0

I have a 2-column panel (Regular, not stacked). I've made it responsive and it appears allright in mobile view @media screen and (max-width: 519px) {width: 100%;}.

The only problem is that my site is a Right to left one, and therefore, What you guys call "Panel-col-first" appears last in mobile view and it's seems Illogical... What is the way to change it, specifically for that particular panel?

Btw, CSS games (Float) didn't help one bit, so I'm looking for a another way, may it be customization of other files.

3
  • No one knows how to solve it?
    – user16289
    Feb 10 '15 at 22:34
  • check this jsfiddle, found on stackoverflow: jsfiddle.net/brettdewoody/3s3uc Link to answer: stackoverflow.com/a/21841999/594897
    – Volker
    Feb 10 '15 at 22:39
  • Trust me, I need a way to change how the module itself works... I just don't have the needed knowledge in PHP to do so and I'm looking for more of a "recipe" Of what to change, So I'll shell mark it up for next occasions...
    – user16289
    Feb 11 '15 at 0:35
1

The control over the Panel-col's (Panel columns) can be maid manually via the relevant TPL file (each one of the natural Panels' layouts has it's own TPL).

The TPL files are stored at sites\all\modules\panels\plugins\layouts. Check there for the layout you use for your panel.

At my case, I've edited the layout "twocol". It's TPL is inside it's directory (also named "twocol").

There I've changed:

  <div class="panel-panel panel-col-first">
    <div class="inside"><?php print $content['left']; ?></div>
  </div>

  <div class="panel-panel panel-col-last">
    <div class="inside"><?php print $content['right']; ?></div>
  </div>
</div>

To:

<div class="panel-panel panel-col-last">
    <div class="inside"><?php print $content['right']; ?></div>
  </div>

  <div class="panel-panel panel-col-first">
    <div class="inside"><?php print $content['left']; ?></div>
  </div>
</div>

After I did this flip, I still haven't seen the change in responsive mode... This is because a change had to be made in the CSS file also... The CSS change is basically comprised of a float: change, and a media screen and () change. Inspect each Panel-pane to get more info on the float and width and then make these, and any other needed changes, in the CSS file.

This manual editing seems to me to be the only way for RTLization\flipping the layouts. I hope the developers of the module would make a more "friendly" option for RTLization.

Note: Better make a backup of the edited versions of your files and store them outside the sites\all\modules\Panels folder - This could save time in case a Panels update would delete them; Even though this action is relatively short.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy