Twenty Twelve
footer background color (6 posts)

  1. zu1u
    Posted 3 years ago #

    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?

  2. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

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

  3. zu1u
    Posted 3 years ago #

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

  4. WPyogi
    Forum Moderator
    Posted 3 years ago #

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

  5. zu1u
    Posted 3 years ago #

    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??

  6. zu1u
    Posted 3 years ago #

    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%;

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.