Posted by skourak on October 15, 2011 at 7:49am
I've recently started experimenting with the Omega theme, getting pleasantly surprised with its features several times already :) I have a simple layout question to which I'm trying to figure out the best solution:
In my content section, I have a 4-col #region-sidebar-first followed by a 8-col #region-content. For my narrow size, I want to move the sidebar to the right and redimension it, resulting in a 9-col content with a 3-col sidebar on the right.
What is the recommended way of going about this?
Comments
I am assuming from the lack
I am assuming from the lack of replies (as well as the lack of available options through the UI) that such a reordering is beyond the scope of Omega. I have managed to emulate the behavior I want by printing two copies of the sidebar and hiding via display:none one of the two depending on the size being displayed.
Tricky business designing and developing responsive designs! It seems that each approach and toolset for doing responsive has its own strong and weak points, it is now a question of learning each approach well and applying it appropriately.
Isn't that a call for Delta? . . .
http://himerus.com/blog/himerus/omega-intro-2-delta-module-contextual-th...
That blog post has moved...
...and the new URL is http://developmentgeeks.com/blog/using-delta-contextual-layouts.
Interesting approach...
...but how would this work in practice? As far as I can understand, Delta is triggered by the context module. Essentially, when the (page load) conditions specified in Context are triggered, you can specify an alternate Delta template to display. Even if Context could be extended to react to realtime size change events, the page would need to reload or at the very least get a whole new DOM structure... or not?
The brute force approach to reload all the page somehow is not a solution, it feels like going in the wrong direction when dealing with responsive design. But would it be possible to modify just those few tiny bits of the DOM, perhaps shifting a whole branch to another parent and loading only the least possible missing bits of content by an AJAX call? Would that be even possible, and would it be a viable approach for all use cases that cannot be resolved merely by CSS positioning magic?
(apologies in advance if my train of thought is obvious, obviously wrong or whatnot - this is not my area of expertise, it rather stems from a newcomer's enthusiasm about the practice of responsive design, its potential and limitations)
Did you get anywhere with
Did you get anywhere with this Silth?
I have a similar need, in that I want to slim down by not displaying certain regions to mobile browsers.
My understanding is also that context triggers delta, but I can't figure out how to do this.
@MrPaulDriver
Me too
I'm looking to do this too, and I've tried everything in the Omega UI and can't get it to work there.
The only solution I've found (and I don't know if this is the orthodox way to do this) is by putting in CSS styles in each screen-size layout (narrow,normal, wide etc...) that overwrite the widths of the zones in the regions.
I think on the documentation site, he is using a similar method where the zones re-flow to different column numbers. If you look at the regions above and below the "Beautiful and Powerful" header, the zones stack differently and change how they are flowed when the browser is re-sized. But I don't know for sure how himerus did this.
Anyways, here a quick-dirty CSS example in a 12 columns grid where I changed the two header-zones in my header region to different column counts, manually... Hope this helps someone out there.
Make the header zones 9-3 when normal layout is active, floating header-second to the right:
in 'alpha-default-normal.css',
#region-header-first{
width: 700px; /* 9 columns /
float:left;
}
#region-header-second{
width: 220px; / 3 columns */
float:right;
}
Make the header zones 4-8 when wide layout is active, floating header-second to the left:
in 'alpha-default-wide.css',
#region-header-first{
width: 780px; /* 8 columns /
float:right;
}
#region-header-second{
width: 380px; / 4 columns*/
float:left;
}
You may find this thread helpful
I've been struggling with similar issues and found comments by dhalbert to be very helpful.
See http://drupal.org/node/1343798
@MrPaulDriver