Posted by rdy_kc on November 8, 2012 at 7:00pm
I am prototyping a mobile friendly page with Omega/Context/Delta. I have an address bar currently contained in the "Sidebar Second" region of the "Content" section, which is weighted 3 (less than sidebar first and content regions).
On a mobile device I want it to be displayed after the content. But on the wider displays I would like it to be on the left-hand side. The weighting of 3 moves it to the right hand side on desktop.
How do I overcome this default weighting? Or can I change it so that the weighting of 3 is in a different spot?
Comments
Use push/pull classes
This is what you can use the push and pull classes for. In this case, you want to put a pull-N class on the sidebar with the weight of 3 where N is equal to the total number of columns of the other regions in the content zone.
For example:
Using a 12 column grid, you have, in zone-content:
1 .region-content.grid-6
2 .region-sidebar-first.grid-3
3 .region-sidebar-second.grid-3
You can add the class 'pull-9' to .region-sidebar-second.grid-3, and add class 'push-3' to both .region-content.grid-6 and .region-sidebar-first.grid-3.
This would display the regions in the content zone in the order of 'content, sidebar-first, sidebar-second' on mobile, but on wider displays, you get the order 'sidebar-second, content, sidebar-first'.
Perfect
That worked perfectly, kkuhnen, thanks for the tip. At first I added the push and pull classes in the source, but then I went back and put them in the zone and region configuration under "additional regional classes" which seemed like the better pl,ace to put them.
Q: Do you know of a good all-purpose reference to the push and pull classes?
Don't know of one, but if you
Don't know of one, but if you look at the grid css files that Omega uses, it helps to understand how to use those classes.
To update, it looks like using weight & position (the "customize region position" setting, see: http://drupal.org/node/1722500#comment-6343258) would be a better method, because it's more dynamic.
To reverse all three
To reverse all three sometimes I just set their float to right in the narrow CSS but I will have to try out the pull/push technique. Thanks.