How to remove the grid from a zone in Omega

Question

I have an Omega subtheme that I am working on, and a request has come in to have a zone and all regions within the zone not be gridded. By not gridded, I mean that I need the zone and all regions inside it to not be bound by any of the widths that 960.gs imposes. Just having the full width wrapper around the zone is not sufficient for that the requested layout.

I am not sure what the best way to do this is.

Inside template_process_zone() I can remove the grid classes from $variables["content_attributes_array"]["class"] and inside template_process_region() I can remove them from $variables["classes_array"]. This is a little messy because it assumes prior knowledge of all the grid classes (or at least the patterns), but it mostly managable.

The problem is that I can't see how I can figure out what zone I am in from within a region. I want to avoid hardcoding region names in the template_process_region() for those to degridify.

I could also override the grid with CSS for a particular zone, but there are a lot of rules to override to future proof any changes.

Is there a well tested solution to this or other options that I am not considering?

Answer 1

Could you elaborate on what it means not to be gridded inside a zone? If you just make a single region inside the zone that is as wide as the zone, then you could lay out content in the region however you want. Your CSS would just have the zone or region class as a prefix to anything else in that region.

Or, are you trying to get rid of the gutters? If so, you could make a custom grid of some number of columns with zero-width gutters. Then you have to add padding and margins yourself to your content. I have a site with an Omega grid-based layout with zero-width gutters, and do some non-grid-based layout inside certain regions.. For instance, I have pairs of images side by side inside the right sidebar. They are not aligned with the grid columns.

Answer 2

If I understand correctly, easy to do with css. On the zone...add position:absolute and width: 100%. On the region inside it (assuming there is only 1 region)...add width:100%