Posted by billp44ruby on March 21, 2013 at 2:40am
I'm doing an Omega theme. On the front page, I'd like to have a image in the 'branding' zone that bleeds to the browsers edge on both sides. Within the 960 grid system I can only get the image to go to the edge of the grid, which leaves a significant blank space on each side of the image.
Zone wrappers bleed to the edge. How do I get an image to do the same?
Comments
One way to do it...
You could just override the CSS. Something like this should work:
div#zone-branding-wrapper div#zone-preface.container-12,
div#zone-branding-wrapper .grid-12,
div.zone-branding.container-12 {
width: 100%;
}
The grid and container classes might need to be changed depending on how you have them set, but it should point you in the right direction. Oh, you'll possibly need to repeat in a media query or two, so check that as well.
John
John Hannah
Friendly Machine
possible?
use a background image in the zone you want?
Another Way
Of course I cannot expertly comment without seeing the site first-hand, there is another possible method. In CSS3, it is possible to have multiple background elements, so you may try adding that branding zone image to the background (stacking it above other elements), and using CSS positioning to align it to the branding area.
If you do try this route, be sure to check how it looks in all major browsers, and if using the responsive features of Omega, how it looks at different viewport breakpoints.
Target the wrapper
Add your background-image to the branding zone wrapper by targeting:
#zone-branding-wrapper {
background: url(../css/foo.png); //path to your css stylesheets
//some other code here to position it..style it whatever..
}
Remember there is an inheritance stack for omega stylesheets starting with mobile -> global.css and moving wider > alpha-default-wide.css.
You must make sure that in admin> appearance >[your omega theme]>settings>zone & region configuration> you check the box to provide a full-width wrapper around the zone.
Also, use the web developer tools in chrome or firebug to inspect your html markup to ensure your #zone-branding-wrapper is being rendered.
You can turn on a wrapper for any region in the same way
Ken Weigand