2

I´m starting my first theme with Omega. I´ve read the documentation, and managed to understand how it works. My problem here is that I don´t know how to stack regions in different order for each layout. I know that I can hide some regions with css and the different css files provided by the omega subtheme, but how to change the order?

Let me explain with an example:

I have this in my wide and tablet (normal) layout:

HEADER SECTION:

User Bar First -- User Bar Second -- Branding

CONTENT SECTION: ...

FOOTER SECTION: ...

For my mobile version I have this:

HEADER SECTION:

User Bar First

User Bar Second

Branding

CONTENT SECTION: ...

FOOTER SECTION: ...

And I want it to be:

HEADER SECTION:

User Bar First

CONTENT SECTION: ...

User Bar Second

Branding

FOOTER SECTION: ...

Any idea on how to do that? Thanks!

4

The browser, not the server, knows the width of the layout. So you cannot change the stacking order on the server side and move the regions or zones up and down without having the browser talk back to the server, which Omega doesn't do.

You could use Javascript to move things around, which is painful. You could also duplicate the content you want to be in the different places, and then hide it or display it with display: none and display: block. But then you are outputting multiple copies of the content and lengthening page load time.

Here's a similar discussion about (not) changing stacking order in Omega: http://drupal.org/node/1343798.

  • Omega does do media queries, though... how is that different from the user agent talking back to the server? – beth Aug 15 '12 at 20:23
  • I should have been less hand-wavy. A media query is part of a <link ...> tag that gets sent with the page, and controls whether a CSS file gets loaded. But by itself (without Javascript) it can't control the actual content loading. – Dan Halbert Aug 16 '12 at 2:41
1

The following is an example of selective region/zone display as show on this comment from Dan Halbert to how to change the stacking order for mobile layouts. It shows how to use the CSS display attribute to hide the header zone in the mobile layout.

  • Put this in global.css:

    .zone-header { display: none; }
    
  • Put this in mytheme-alpha-default.css:

    .zone-header { display: block; }
    

The header zone will be visible in all but the mobile layout. You can imagine variations on that: If you wanted to hide in the narrow layout, but not in normal and wide, you could put the display: block in mytheme-alpha-default-normal.css and mytheme-alpha-wide.css.

See also Additive content / display:none problem.
There are some good comments on this on Display problem.

  • Thanks Vic!! But... how do I rearrange those zones? I want to display the header in the mobile version, but at the bottom of the layout... – Rosamunda Aug 15 '12 at 14:31
  • 1
    The first part of this answer is a direct unattributed quote from something I wrote here: drupal.org/node/1343798#comment-5267222. I don't mind your using what I wrote to help answer a question, but please say where you got it from, and adapt to the question at hand. – Dan Halbert Aug 15 '12 at 16:17
  • Hi Dan, Ofc, I was actually in highlighting your quote and linking to it, But Kiamlaluno beat me to it, by 59 seconds – Vic Aug 15 '12 at 21:12
0

The answer can be found here: http://drupal.org/node/1343798#comment-7180142

  • 1
    That post has already been listed in both answers, and link only answers aren't considered good ones here. Can you summarize how this is different. – mpdonadio Mar 15 '13 at 0:43

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.