Is there an easy way to set the background color of the sidebars? Their length seems to be determined by the number of blocks they contain, so their background colour does not reach the bottom of the page.

I've looked at class="region region-sidebar-first column sidebar", but again it is not full length. And div#main-wrapper is full length, but it does not distinguish the article space (middle column) from the sidebars.

CommentFileSizeAuthor
column-background-colors.jpg243.39 KBiantresman
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

eatings’s picture

eatings
he/him
Primary language English
Location San Francisco, USA
CreditAttribution: eatings commented
Category: feature » support

You'll have to equalize div heights with jquery or a similar technique; there isn't a way to do it in CSS.

Once your region divs have the same height, apply background styles as needed, et voila! C'est dans la poche.

Try something like http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

KrisBulman’s picture

KrisBulman CreditAttribution: KrisBulman commented
Status: Active » Closed (works as designed)

This isn't a zen problem specifically, providing solutions and closing ticket, zen works as designed.

See the faux columns method
http://www.alistapart.com/articles/fauxcolumns/

Or you can use the jquery equalheights plugin
http://www.cssnewbie.com/equalheights-jquery-plugin/

iantresman’s picture

iantresman CreditAttribution: iantresman commented

I agree that it's not a Zen bug, and Zen is not designed to work this way, but there is an argument to suggest that it should, on the grounds that there is no disadvantage if it worked this way.

Thanks for the suggestions. I think my workaround is to add a background image to <div id="main">, that just covers the two columns, and repeats down the div, your Faux Columns suggestion.

A better solution does appear to be available, such as that described in the article "Equal Height Columns with Cross-Browser CSS".

I also found (and there are many others) "Four Methods to Create Equal Height Columns".

But thanks for the feedback.

KrisBulman’s picture

KrisBulman CreditAttribution: KrisBulman commented

there's a D6 module
http://drupal.org/project/equalheights

And Omega D7 does have, or did have, it integrated into their base theme, but from my use of it, it doesn't work in all situations. I think it's a little beyond the scope of a base theme though, and should be added in a subtheme.

iantresman’s picture

iantresman CreditAttribution: iantresman commented

OK, might have solved this with just CSS, following the useful suggestions in the aforementioned articles. The following CSS will give one of the sidebars a background color:

.region-sidebar-first {
    background: none repeat scroll 0 0 lightBlue;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

#main {
  overflow: hidden
}
iantresman’s picture

iantresman CreditAttribution: iantresman commented
Status: Closed (works as designed) » Closed (fixed)
iantresman’s picture

iantresman CreditAttribution: iantresman commented
Status: Closed (fixed) » Needs work

OK, the "fix" doesn't work, when the main content is shorter than the sidebars. I think this is on the right track, so a little more research is necessary.

iantresman’s picture

iantresman CreditAttribution: iantresman commented
Status: Needs work » Closed (fixed)

Here's the corrected fix, just needed some extra css DIVs, now showing on both columns:

div.region-sidebar-first {
  padding-bottom:9999px;
  margin-bottom:-9999px;
  background:lightblue
}

div.region-sidebar-second {
  padding-bottom:9999px;
  margin-bottom:-9999px;
  background:lightyellow
}

#main {overflow:hidden}

If both columns have the same background color, then this can be reduced to:

div.sidebar {
  padding-bottom:9999px;
  margin-bottom:-9999px;
  background:lightblue
}

#main {overflow:hidden}
morrisjones’s picture

morrisjones CreditAttribution: morrisjones commented

Well done Ian! I wish I could get that proposed solution to come up higher in the Google search results.

hmartens’s picture

hmartens CreditAttribution: hmartens commented
Issue summary: View changes

This worked until I used an anchore tag...then it removes all the content above the anchore ;) But thanks, it worked great until I had to use anchors :)

diddism’s picture

diddism CreditAttribution: diddism commented

Do it the other way around. I have this CSS. Give main the color of the sidebar and content the color you want main to be. 

#main {
  margin-top:30px;
  background: url("images/sidebar-bg.png") repeat-y scroll right center #FFFFFF;
  border:1px solid #CCC;
}
#content {
  background-color:#FFFFFF;
  border-right:1px solid #CCC;
}