Posted by slsonnier on July 4, 2013 at 1:15am
2 possible related questions.
I'm trying to add a wrapper around a zone: For example, on this link. I want to use a wrapper around the three preface regions so that they have a uniform background color. I don't seem to be able to configure that correctly. Is there a way? http://cci.prod2.webenabled.net/#overlay-context=node
Second quest> Is there a way to increase the size of a region to include the left or right margin space?
Thank you
Comments
One way to solve the first
One way to solve the first problem would be to use content instead of postfix. You could then layout content with CSS, panels, or display suite.
--
Portland Drupal Developer
Work with Omega's grid system
All the regions include a left/right margin space of 10px so the zones that wrap around the regions include this space on the sides of your page. You can see this using the CSS below, the sides of the Preface zone stick out.
.zone-preface {
background-color: #fcc;
}
.zone-preface .region {
background-color: rgba(255, 255, 255, .25);
}
.zone-preface .alpha-debug-block {
height: 100px; /* this is just to help visualize the blocks */
}
One approach would be to use this space for background color on all the zones, with a different color for the Preface zone. You could then make the body a different color as well. Add this on top of the previous CSS:
body {
background-color: #eee;
}
.zone {
background-color: #fff;
}
If you wanted to define your pagebox further with a border or box-shadow, you'll need to manipulate the "page" div. For the normal 960 display you'd add this:
.page {
border: 1px solid #000;
width: 960px;
margin: 0 auto;
}
To use this you'll need to change the .page width with media queries that follow your different breakpoints. Also, you can experiment with these things using your browser inspector. I especially like using a bookmarklet called CSS Terminal for this: http://barberboy.github.io/css-terminal/.
Hope this helps.
Victor Velt
Yale University Office of Public Affairs & Communications
http://opac.yale.edu
Omega Update
Thanks.
I think I needed to step away for a bit. I took 3 giant steps back and thought about it.
By removing the margins on my wrapper, thinking about the left float and removing right margins on the last region, I've made it work and breaks are correct on all screen sizes.
Still thinking about the background for the margins. :)
update
No worries, there are always several ways to approach problems like these. That's what makes it Fun right?
Victor Velt
Yale University Office of Public Affairs & Communications
http://opac.yale.edu
Solid color background image...
The way I did this was to add a solid color background image to the wrapper: http://web.library.yale.edu/
Omega also has two classes that remove margins .alpha and .omega, but I ended up not using them.
Learn more at iRolo.net.
comment
The Library site is a great example. And yes, don't forget the .alpha and .omega classes that you can enter in your Theme Settings, no need to come up with your own override CSS to remove margins.
Victor Velt
Yale University Office of Public Affairs & Communications
http://opac.yale.edu