Change Color of Footer to Match header image

Ack! Not the footer–the Widget area is what I need to recolor. Sorry all, I did say I was a newbie.

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

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: https://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!!

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