Support » Theme: Twenty Thirteen » Change Color of Footer to Match header image

  • I was able to change the header image, but now need to change the footer color. There’s no option to do so in appearance, so I assume I need to change something in the CSS under Appearance–>Editor

    I’m a relative newbie at editing CSS, so please be very specific.

    I do know the color I need it to be is #47ad54 and I’d prefer the type to be either #000000 or #191919.

    Thanks!

Viewing 15 replies - 1 through 15 (of 29 total)
  • Ack! Not the footer–the Widget area is what I need to recolor. Sorry all, I did say I was a newbie.

    esmi

    (@esmi)

    Forum Moderator

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

    Esmi, it’s good to know not to edit the original, but I still don’t know what I’d need to change, how to make a child theme or which plugin to use.

    I’m a rank beginner…can you give me some more clues (point me to proper threads or help files)?

    esmi

    (@esmi)

    Forum Moderator

    Is your child theme active yet? If so, can we have a link to your site?

    @esmi Thanks for your tips–I do still need some help.

    My child theme is created, but I’ve not done anything with it. The URL is: http://iaap-wa-ak-conf.org/

    What I need is to change the entire color scheme of the template from what it is to another using the following colors:
    Primary color: 47ad54
    Secondary color: EBB316
    Tertiary color: 4F4E4A
    Highlight/pop-out color: 1B8DC9

    I realize that I need to put info in the child theme about the colors, but I’m at a loss. If someone could give me the code to copy and paste that would be so very helpful.

    Thank you!!

    esmi

    (@esmi)

    Forum Moderator

    Goodness! I think that is probably far more in the way of customisation than a support forum can provide. Doubly so if you are not CSS-savvy.

    Ugh…I was thinking that as I started to get into this.

    Any suggestions for a simple template with more of a primary color scheme?

    Lets just take it step by step.
    With your child theme loaded navigate to Appearance > Editor.
    On the right hand side click on style.css
    Paste this block of code and change the colors #’s to the one you want.

    #navbar {
        background-color: #EBB316;
    }
    #colophon {
        background-color: #EBB316;
    }

    I’ll try that out this evening at home….Thanks for the guidance.

    YEs, that worked a treat! What are my next options, @batharoy?

    This is for the font color & hover font & background color for the navigation links in your menu. You should add the sample page to the menu to see all the effects.

    .nav-menu li a {
        color: #000;
    }
    .nav-menu li:hover > a, .nav-menu li a:hover {
        background-color: #EBB316;  color: #fff;
    }

    This will change the menu background color & font color on the current page only.

    .nav-menu .current_page_item > a {
    color: white;
    background-color: #EBB316;

    Thank you batharoy! These look great.

    What’s next?

    Sorry it’s taken so long to get back. Lets add some of the blue color you supplied.

    .entry-meta a {
        color: #1B8DC9;
    }
    .entry-meta > span {
        color: #1B8DC9;
    }

    Lets also add the dark grey color to most of the text. And make that super big text a little smaller.

    body {
        color: #4F4E4A;
    }
    .entry-title a {
        color: #4F4E4A;
        font-size:38px;
    }

Viewing 15 replies - 1 through 15 (of 29 total)
  • The topic ‘Change Color of Footer to Match header image’ is closed to new replies.