Posted by eridolfi on January 20, 2012 at 12:12pm
I want to create a div that would wrap around the title, content, and sidebar 2. I was trying to do it through delta because I would like to have layouts that either include or exclude the wrapper. I can't seem to get it working.
Comments
default templates
Hi, you can find the default template files in sites/all/themes/omega/omega/themes and sites/all/themes/omega/alpha/themes. find the ones u need and copy them to your own subtheme "themes" folder so u can modify them. Remember to clear cache after.
Thanks for the reply. The
Thanks for the reply. The problem that I face is that the template files contain a section in each file. For example, the content template file only contains code for the content region. So If I would put a wrapper around that it wouldn't include the sidebar, right? I want to include the sidebar. Maybe I am making things more difficult than they are?
If I understand you
If I understand you correctly, what you are looking for is to enable the "Provide full width wrapper around this zone" for the content section, this shoud include the sidebars.
You can find it under Appearance > settings > Zone and region config > Content section > Content zone
Ok, I enabled a full width
Ok, I enabled a full width wrapper and gave it a width of 900px (to compensate for the padding on left and right) and padding of 0 30px. So now the problem is that the grid overlay and content is pushed over 30px on the left but nothing happened on the right. It's overlapping now, ugh. I really want to use this but this is very confusing.
Hi CreativeInsite, The full
Hi CreativeInsite,
The full width wrapper is supposed to be 100% full width of the screen. Then you have the zone inside that, so your wrapper will be 100%, the zone will be 960px (if you're using normal responsive template). This is actually 940px with a 10px margin either side i.e.
10px margin-left on column #1 and 10px margin-right on column #24 (presuming you're using 24 column layout). Each column has a 10px margin left and right. Using padding on the zones is asking for overlaps and all kinds of weird crap to happen to your layout.
Take my main menu zone which has a full wrapper:
<div id="zone-main-menu-wrapper" class="zone-wrapper zone-main-menu-wrapper clearfix">
<div id="zone-main-menu" class="zone zone-main-menu clearfix container-24">
<div class="grid-24 region region-main-menu" id="region-main-menu">
<div class="region-inner region-main-menu-inner">
<div class="block block-menu-block block-2 block-menu-block-2 odd block-without-title" id="block-menu-block-2">
<div class="block-inner clearfix">
<div class="content clearfix">
<div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu"><li class="first leaf menu-mlid-207"><a href="/">Home</a></li>
<li class="leaf menu-mlid-746"><a href="/about">About</a></li>
<li class="leaf has-children active-trail active menu-mlid-1181"><a href="/services" class="active-trail active">Services</a></li>
<li class="leaf menu-mlid-1187"><a href="/my-work">My work</a></li>
<li class="leaf menu-mlid-748"><a href="/pricing">Pricing</a></li>
<li class="leaf menu-mlid-918"><a href="/contact">Contact</a></li>
<li class="last leaf menu-mlid-730"><a href="/blog">Blog</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
zone-main-menu-wrapper would be full width (100%) left to right on the screen. The zone within that is #zone-main-menu, no padding added to this! Now, if I add the following inmy css:
#region-main-menu {
background: green;
}
.region-main-menu-inner {
background: red;
padding: 0px 20px;
margin: 0px 10px;
}
The id region main menu will be green at 960px. the class region-main-menu-inner will be red with content inside that's padded 20px in at either side (within the red area). The 10px margin will squeeze the red area in at each end so the end result will be a green bar with a red bar inset within by 10px, with the content within the red bar inset by 20px.
In other words, add padding and margins to inner regions or your layout will break. Let the grid take care of the outer regions. If you want it 920px wide or 900px total, make a new grid, but 960px works well, although limited with quite small margins I find.
Hope this helps.
Sam.