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!

Comments

2pha’s picture

I don't think you can because the size of the screen (and therefore the layout) is not known by the server. You would have to make all your regions output and then just hide the appropriate ones with css.
When I have been in this situation and couldn't move the region to the position I wanted, I just made another region with the same content and hid/displayed the appropriate ones with css.

stephenplatz’s picture

You will need to adjust the weight and the position of the regions in your subtheme UI. To do this, in the zone configuration, tick "Custmize region positioning." This will allow to position your regions in your normal/wide layout. For your mobile layout, adjust the weight of each region in the region configuration. Experimenting with the region positioning and weight values should make things very clear to you.