I made a few changes to a section of your CSS
/wp-content/themes/{themename}/style.css (line 202)
that make the footer background the dark color, and change the text color to white – changed the backgroundstatement and added the color one
#content-bottom {
background:#1F1F1F none repeat scroll 0 0;
clear:both;
color:#FFFFFF;
display:block;
height:50px;
margin-bottom:-9px;
width:900px;
}
Thank you very much for replying. However, this code only makes the footer dark grey. I want the entire bottom of the page to be grey and bleed off the bottom and side edges of the page, just like the header.
Thanks in advance
That ‘bleed’ is your navbar, not your header.
You will have to rework your theme a bit to accomplish that.
Take a look at this image
http://itreviewed.net/wp-content/themes/themes/wprs-black/images/background.PNG
That is assigned to the body tag and is how the grey background is generated, by repeating that very narrow image repeatedly across the page. It works because the body tag’s width is 100% of the open browser space.
The rest of your site is contained within a div id=container, which is 900 pixels wide. The footer is within container also. So nothing applied to the footer, as it presently is, can be any wider than 900 pixels.
I would add an additional div after div container is closed, defining the new div as 100% wide – applying the same image that is assigned to body as background – that will display the grey stripe at the bottom across the open width of the browser.
That does not put the footer within that new band. To do that you have to move footer out of div container and put it within the new You may need to center the contents of footer within that new div. Also set the height of the new div to match the height of that image.
