i have a similar question a few threads down…
the reason is, that the background of the sidebar is not really defined – it is the css id #primary and #secondary; however, these divs don’t really have any proper padding etc.
one way to do a sidebar background is using css ‘faux columns’ method, i.e. in this case, putting a background image into #main (which has diferent colored zones for content and sidebar, and repreating it vertically.
how would that work for additional, non-blog type pages that have static content?
these pages are all different lengths, so how would you do it then?
It can be done by adding
background:#colorhex;
if you add it in primary code then the area widget area will have the color
#primary, #secondary {
float:right;
overflow:hidden;
width:220px;
if you add widget-container then each widget will have color
.widget-container {
margin:0 0 18px;
how would that work for additional, non-blog type pages that have static content?
these pages are all different lengths, so how would you do it then?
no difference – the div #main stretches down all the length of the center, starting below the menu, ending just at the top of footer.
the ‘repeat-y’ that you would have in the background style, would take care of that.
http://www.w3schools.com/css/css_background.asp
(only difficulty would be with the ‘one-columnpage’ template – that would need additional css.)
I had to do this recently, but the content has to be longer than the sidebar content, you might be able to use min-height on the content to match the sidebar.
For the wide-page if the color bleeds, just use a custom header.php and set the main background to white.
#main {
background: #999;
}
#content {
background: #fff;
}
HTH
David
How would I achieve this effect on this page then, its a very similar question:
below are links to 2 screenshots from http://www.maxtannone.com
http://img.photobucket.com/albums/v224/MintyFreshBeats/Picture3.png
The first is my BLOG page, which is functioning perfectly. The blog page uses the default template.
http://img.photobucket.com/albums/v224/MintyFreshBeats/Picture4.png
The second is a link to my ABOUT page. You can see how the white/grey background has not extended to match the width of the header, nor has it filled in the footer area. I have expanded the width of the .one-page content from 640 pixels to 900+, but that still obviously hasn’t fixed my problem.
There is also a few white/grey pixel padding beneath the header / above the menu which I can’t seem to get rid of.
The same thing happens on all of my non-blog pages, which all use the “One column, no sidebar” template.
Again, to reiterate, I am trying to match the look of all the pages to the BLOG page.
edit: i just fixed part of the problem, still worknig on removing that white line below my header and above the menu
(visible in the ABOUT page screenshot)
While adding the background-color to the #primary and #secondary does add it to the widget area, it doesn’t extend the length of the page. Is there any way to do that?
The sidebars are in the #main area and do not have a background color, so setting a color on #main and #content does this, in a work around sort of way,
The only caveat is that, if the content is less in height than the sidebar you have a block of main color below.
To do what you want you would need to re-structure the theme adding another container div.
HTH
David
