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!

Improve this question

3 Answers 3

Reset to default
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.

Improve this answer
2
  • Omega does do media queries, though... how is that different from the user agent talking back to the server?
    – beth
    Commented Aug 15, 2012 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
    Commented Aug 16, 2012 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.

Improve this answer
3
  • 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
    Commented Aug 15, 2012 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
    Commented Aug 15, 2012 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
    Commented Aug 15, 2012 at 21:12
0

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

Improve this answer
1
  • 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 ♦
    Commented Mar 15, 2013 at 0:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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