Change colour of footer area in Twenty Eleven

So, if I understand this right, you’re trying to just put the background color of the footer so that it’s different than the other parts of your site?

If so, add a background color to your css. for example, put this in your #colophon id in the style sheet…

#colophon {
clear: both;
background-color: #89FF00;
}

Thank you!! I could actually weep with joy. This is the only post I have seen that answers the question.

Macegg.

Hi there Macegg and mixmastermichael
I am trying to do the same thing and I can’t get the colours on the footer to change on my website. I am a newbie, so is this because I need to purchase the CSS upgrade, or can I do this without it?
Also any help on how to change the footer – I have created a child theme based on Twenty Eleven, so is there something I can put in the code to make this happen?
Thanks so much for your help ??
M x

Hi MIchelle,

You need to go to your APPEARANCE tab and then to your EDITOR where you will find the style.css file.

Paste the following in:

#colophon {
clear: both;
background-color: #89FF00;
}

And change the #color to whatever colour you like. Voila!

Let me know.

Macegg.

Also, try the same but paste:

#site-generator {
background-color: #003399;
}

Thanks so much ?? That worked!!!

Macegg … no such luck with either suggestion. What can I be doing wrong?

I tried:
#site-generator {
background-color: #ffffcc;
}
Nothing changed – still white on the footer

I also tried:
#colophon {
clear: both;
background-color: #ffffcc;
}

still nothing. I do have a background image I’m using. Is that stopping mine from working? H E L P!!!

Roflmbo …. ok so I ended up using BOTH of those codes and it worked so disregard my panic message and THANK YOU THANK YOU THANK YOU.

all right, I can’t change backgroundcolor to value transparent (I tried to any other color, doesn’t work either). I used both above codes separately and also together – nothing.

#colophon {
clear: both;
background-color: transparent;
}

#site-generator {
background-color: transparent;
}

any ideas?

all right, what I found after ‘inspecting the element’ in my child theme’s CSS file is following:

the #site-generator that affects the color is under the comment /*Site Generator Line*/ However, it doesn’t understand value ‘transparent’. Font color, for instance, does understand ‘transparent’. By the way, I am able to change the color of the footer. however, the effect I want to get it that there is technically no visible footer and that copyright and disclaimer are displayed over the background image. Like on my website in which root the wordpress is installed: https://www.dacesita.com and it’s not a wordpress site.

I think I resolved it – in footer.php if you replace the closing </div> of #page to before the <div id=”site-generator”> it leaves the footer out of #page formatting.

In your style.css you change the background value to transparent at #site-generator id.

I added the following into my child theme and am getting no changes. I’m just trying to shrink that huge padding, but nothing works. All of my other changes in the child theme are working fine….

Will be giddy if someone can stop me from banging my head against the wall!!

#site-generator {
    background: none repeat scroll 0 0 #F9F9F9;
    border-top: 1px solid #DDDDDD;
    color: #666666;
    font-size: 8px;
    line-height: 1.0em;
    padding: .2em 0.5em;
    text-align: center;
}

https://windowtreats.windowimagination.com/

When I changed the padding size, it immediately skinnied down my footer. I took it from the 2.2em listed below to 1.2em and it’s now just a bit larger than the size of the 12px font.

/* Site Generator Line */
#site-generator {
background: #f9f9f9;
border-top: 1px solid #ddd;
color: #666;
font-size: 12px;
line-height: 2.2em;
padding: 2.2em 0.5em;
text-align: center;
}

I totally agree Infoprincess. I can make changes all day if I use the twentyeleven theme, but only a couple of my changes are working when I use the child theme.

I’m guessing there is some sort of magic to the CSS that one has to use when using a child theme. I’m pulling stuff out of firebug, finding it in the main style.css file and copying that to my child theme and making my changes. Again, only a few of those are actually working.

Sometimes they work if I add the full css chunk of code, sometimes they work if I only add the section that I want changed. I’m the first to admit that i’m not a CSS master, but this is WAY too frustrating. I’m going to play with it again today with fresh (and less frustrated) eyes, but I’m leaning heavily towards just using the parent theme and keeping notes of my changes. At least then it works every time.

All that said, I’m frankly amazed that there is so little talk about this issue. That is making me feel like it is something I have done wrong in the setup or something else. grrrrr

??

Thanks again for checking it.

broken styles, such as this one in your style.css of the child theme, without closing bracket, will stop the application of anything that follows after:

#site-description {
    margin: 0 270px 0.5625em 0;

add the missing } bracket there, and you will see that the #site-generator styles should get applied.

nothing to do with child themes or wrong setups…