Wrapper div around multiple zones

This could easily be accomplished... in a variety of ways. I will do my best to outline the most simple.

My first thought is this... assuming the blue outer "border" is a full 960px wide (width of the container elements), for the branding zone, style the entire container to have a background that includes the top portion of the blue border cutup and positioned bottom in that zone. This will emulate the menu bar.

For the header, preface, content and any other zones that will continue to have the blue "border", this could be a background image that encompassed the entire (blue & white) colors... so one image with for example 20px of blue on the outsides and the rest in the center white.

If the full width (including blue "border") is over 960px, then you can simply use the theme setting to provide wrappers around each zone, and rather than allowing them to be the full width of the browser, style them to something like 1000px margin 0 auto, giving that extra space needed for the border background image(s).

I know personally I could get this one implemented fairly quickly, and then have my full "body" ready with the white background to start placing regions and blocks/content. That does come from my heavy understanding of the structure though as well.

I really tend to think a bit outside the "box" on getting elements from a PSD to the theme layer though. That was my reasoning for ever building Omega, and building it in such a way that I yet to have come across ANY design I couldn't quickly implement with it.

If you need some further ideas/clarification, I can attempt to make some real code examples to demonstrate how I'd attack this. But I'm about to be out for the rest of the day today, and won't be able to provide any response of great detail till early Mon/Tues.

I hope this helps!!

Okay... This perplexed me, and I wanted to give a better idea of how to truly accomplish this... I was able to get the screenshot attached implemented in a clean subtheme in about 10 minutes...

My steps were this...

In the .info file...

Change:

zones[branding][] = branding
zones[branding][] = menu

to:

zones[branding][] = branding

zones[menu][] = menu

This is giving the branding and menu their own zones... so that menu can be a little outta the box.

Now, in the theme settings, make sure to set the width of the region appropriately for the new menu zone, enabling it, and giving it a full width wrapper.

For the following zones in theme settings, I made sure the full width wrapper was enabled:

• menu
• header
• preface
• content
• postscript

Now in a new CSS file defined for my subtheme:

/* Give default background "border" to all main elements on the page */
#menu-outer-wrapper,
#header-outer-wrapper,
#preface-outer-wrapper,
#content-outer-wrapper,
#postscript-outer-wrapper {
  width: 1000px;
  margin: 0 auto;
  background-color: #0062A0;
}
/* Give white BG to "content" sections */
#header-container,
#preface-container,
#content-container,
#postscript-container {
  background: #FFF;
}
/* Give the menu container the top rounded corners */
#menu-outer-wrapper {
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  padding-top: 20px;
  padding-bottom: 20px;
}
/* Give the postscript container the bottom rounded corners */
#postscript-outer-wrapper {
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  padding-bottom: 20px;
}

Done... no code editing other than the .info region/zone change and some CSS to make it happen all without background images.

Glad it worked/or at least gave you an idea of how it was possible....

Marking as fixed. :)

I see how this solution works if you have a fixed background color.

But what if I wanted the wrapped area to have a radial gradient?

See attached example (made in a different theme).

see #6, reopening to catch the attention :)

The way to achieve this is to add extra regions to the content-zone and use the wrapper arround those.

this css doesn't seem to work using the Omega 3 theme? I have added it to global.css of my omega subtheme, but it does not work. is there a way to adapt it for Omega 3?

thank you..

Agreed - I'm trying to do something similar in Omega3 - have a gray wrapper around two regions in a zone - but I want a white border on the edges. Or is there a way to make the gutter space a set color?

Thanks,

I just hit a bit of a brick wall with Omega. There doesn't seem to be any way to add CSS layers which translates into nested DIV's. I need to add multiple background layers for a fairy fancy website. When originally created in Photoshop it uses multiple background images layered on top of each other and multiple image slices added in on top of the background. The html template uses nested DIV's to add all the layers in. 8 layers total. There doesn't seem to be any way to do it in Omega without creating custom php files.

Yes, there is the wrapper then the zone then region and then inner region but that still isn't enough and not very clean doing it that way since everything should pretty much be in Regions as much as possible. What I really need is multiple nested subregions. I figured out how to do it with Omega but it required a custom region.tpl.php

I'm not a pro web designer but I would think this would be a fairly common requirement for a polished looking pro website no?

@mustardman: himerus' example[s] (above) are a great primer on this issue, and you know in CSS you can combine background properties including background-clip to accomplish some pretty spectacular feats, right (check out Can I Use [or your preference] for compatibility)? And if need be you can always create new region[s] to be used as pseudo-regions for the purposes of styling. But as himerus points out above, it's almost always possible to skin the styling cat without needing to resort to Omega 'hacks' - however mild or subtle they be. Are you able to post links regarding your project?