Support » Theme: Twenty Twelve » footer background color

  • I want to change the footer background color, so that all the footer content is in a box of the same background color. I tried to add the background color as follows:

    .template-front-page.two-sidebars {
    	background: #2c2c2c;

    That however only changes the background color of the single widges in the footer. Also tried adding the background to .widget-area#secondary, that’s a div from sidebar-front.php that includes all the footer content, but without success.

    How can I get the background color into the footer the way I want?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Andrew Nevins


    Are you using a browser developer tool like Firebug for these sorts of CSS issues?

    yes i use firebug. Is there a feature that allows me to solve this easily? I wouldnt say I’m a firebug expert…

    Please post a link to you site for help with CSS questions.

    WPyogi, here is a link to the page:

    I managed to get the background color in the footer by now so that it covers all the widgets inside the footer.

    However, no I face the problem that the right part of the footer is being pushed more down than the left part if you use the menu to go to any other page. For me, that problem however only appears in Chrome and not in Firefox. Any ideas how to solve this problem??

    here’s the relevant css part that I changed for the coloring of the footer:

    div.front-widgets * h3 {
    		color: #ffffff;
    	.template-front-page.two-sidebars .widget-area .front-widgets {
    		background: #2c2c2c;
    		float: left;
    		width: 60.9375%;
    		margin-bottom: 24px;
    		margin-bottom: 1.714285714rem;
    		height: 17.857142rem;
    		color: #ffffff !important;
    	.template-front-page .widget-area .widget {
    		padding: 20px 20px 0 20px;
    	.template-front-page .widget-area .widget:nth-child(odd) {
    		clear: right;
    	.template-front-page .widget-area .widget:nth-child(even),
    	.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
    		float: right;
    		width: 39.0625%;

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘footer background color’ is closed to new replies.