Changing color of primary and secondary menu bars

[tracyw]

I'm working on my first website (http://dschurchofchrist.com/) and have a question:  I want to change the original blue theme color to green (not the ugly green pre-set, but with color #72764e).  I have gone through the css page and replaced every original blue color code with this one...still have a blue menu bar.  Also, where do I find the place to edit the drop-down menu from clear (don't even know how that got there--used to be gray) to a light green #b0b872?  I want the hover to be #b0b872 green as well, so that when you hover, the entire menu strand downward is the light green.

One more:  In the custom header, I would like to be able to place an image on the very far right of the top header.  The green outlined box there now is as far as I can put before it cuts off.   Where would I find that in the css and how much can I change it?  Right now the image size restriction is 1060p x 240p.

I've taught myself as far as I've come, but I spent all day today trying to figure these out.  Any help would be appreciated.  To those who take the time to answer questions like mine (can you say newbie?), you are truly appreciated!

[susanlangenes]

The blue in the main menu bar is a background image.  It's being specified on line 1729 of your child theme's css file with this:

.outreach-blue #nav { background: url(images/blue/nav.png); }

If you comment it out, then add:

background-color: #72764e;

You should get the green you're after.

Then, on line 262, make sure you have this:

.menu-primary, .menu-secondary, #header .menu { background-color: #B0B872; }
NOTE: "color" by itself refers to text color; for background color you have to actually say "background-color"

Next, look for all this stuff at line 345:

.menu-primary li li a, .menu-primary li li a:link, .menu-primary li li a:visited, .menu-secondary li li a, .menu-secondary li li a:link, .menu-secondary li li a:visited, #header .menu li li a, #header .menu li li a:link, #header .menu li li a:visited {
background: none;
background-color: #bob872;
(etc) }

^^ remove or comment out the line that says "background:none;"

Now, one last task.  Go find line line 317 where it says:

.menu-primary li a:active, .menu-primary li a:hover, .menu-primary li:hover a, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a { background-color: white; }

And change that color to  #b0b872

 

[tracyw]

THANK YOU!!  I just about have it.  Once I went thru those steps, I was left with the original green on the ends of that menu bar...what am I looking for to get that to the new green?

I want to be able to use that entire width and where it is, is as far right as it'll go.  My upload instructions in the header say 1060p is the max width.  Is this where I would change the width of the custom header, where the little box with the tree is?  How much past 1060p can I go with it?

.wrap {
margin: 0 auto;
width: 1060px;
}

.outreach-landing .wrap {
width: 760px;

 

One last thing--I see that I have text in the top left corner of the slider widget.  I put that word TEXT there, when I was playing with the post page, but where is the code for that font to be a different color, aka #fff?

I may have used some of the wrong terminology, so thank you for your patience.

[Author]

Posts