WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change colour of footer area in Twenty Eleven (24 posts)

  1. macegg
    Member
    Posted 2 years ago #

    Hi,

    I am going crazy trying to change the colour, or create a custom footer area for my website. I am using a twenty eleven child theme and have added the following to the style.css page:

    #site-generator {
    background: #000000;
    border-top-color:#000DD;
    color: #000000;

    BUT! The footer area remains the same colour as the body of the site.

    http://www.estellasanylevelfitness.co.uk

    Please ignore the horrible green header, it is just a place holder for now!

    Your help would be much appreciated.

    Macegg.

  2. mixmastermichael
    Member
    Posted 2 years ago #

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

  3. macegg
    Member
    Posted 2 years ago #

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

    Macegg.

  4. michelle.woodall@yahoo.co.uk
    Member
    Posted 2 years ago #

    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

  5. macegg
    Member
    Posted 2 years ago #

    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.

  6. macegg
    Member
    Posted 2 years ago #

    Also, try the same but paste:

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

  7. michelle.woodall@yahoo.co.uk
    Member
    Posted 2 years ago #

    Thanks so much :-) That worked!!!

  8. Infoprincess
    Member
    Posted 2 years ago #

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

  9. Infoprincess
    Member
    Posted 2 years ago #

    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.

  10. ddss
    Member
    Posted 1 year ago #

    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?

  11. ddss
    Member
    Posted 1 year ago #

    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: http://www.dacesita.com and it's not a wordpress site.

  12. ddss
    Member
    Posted 1 year ago #

    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.

  13. jrobie23
    Member
    Posted 1 year ago #

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

    http://windowtreats.windowimagination.com/

  14. Infoprincess
    Member
    Posted 1 year ago #

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

  15. jrobie23
    Member
    Posted 1 year ago #

    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.

  16. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

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

  17. jrobie23
    Member
    Posted 1 year ago #

    Holy crap, you're my hero!! :-)

    Sometimes you just need to step away from the monitor and go for a bike ride.....

    Thank you again alchymyth.

  18. ijmacmurray
    Member
    Posted 1 year ago #

    Is it possible to change background color of the footer widget area - not the generator footer?

  19. HD1234
    Member
    Posted 1 year ago #

    I wanted that off white color in the stock 2011 footer where it says "proudly powered by..." changed to match the content area background and the following code worked by placing it at the bottom of my child theme style.css file.

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

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

    If you want it to be a different color changing it from "transparent" to "black" or #000 or whatever color you want will work. Does for me anyway.

  20. aasbd
    Member
    Posted 1 year ago #

    It's a great post to change footer color. It worked for me.
    http://www.aas-bd.com/

  21. kvogelmann
    Member
    Posted 1 year ago #

    Thanks infoprincess, I used your following to change footer background, text color, font size, and padding. Love it! You might qualify for goddess status instead of princess... ;)

    /* 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;
    }

  22. Infoprincess
    Member
    Posted 1 year ago #

    Thanks, I'm glad I could help. Just as an FYI if you ever want to have no background color in your text area like this site
    http://www.webbsjanitorial.com, use the background #fffcc. YES it's 5 letters not 3 or 6, but for that website with the wooden floor background it just tickeled me to no end.

    Enjoy!!

  23. linux garage
    Member
    Posted 1 year ago #

    There's a easier solution.

    Use this plugin: http://wordpress.org/extend/plugins/background-per-page/ Backgrounds Per Page

    You can set a color and add images (including transparencies) to each page. The footer won't break.

    But you would need to set the background for each page or post.

  24. Bilal Ameer
    Member
    Posted 1 year ago #

    I need a Theme Option with color picker (farbtastic) to change any class or ID of css
    Actually in my case, I need to change footer container color (.footer_continer)

Topic Closed

This topic has been closed to new replies.

About this Topic