Outreach Pro Header Color

[ChristinaGammon]

I have gone in and changed the red color to a burgundy where I want to. Now all I need to do is change the header red to white. How do I find this? I've looked for the answer and I see people saying look for this bundle and that bundle but I am at a complete loss. Do I go to the css file? And once there, what am I looking for? I have Firebug so can do a search but am afraid of "finding" the wrong thing. I already had this done once but lost part of my template which forced me to start over...

Please help!!!

And thank you SO much! This forum has been awesome!

http://www.hopeassociation.org

[WisdmLabs]

Hi,
The link you provided ( http://www.hopeassociation.org/ ) doesn't have any red color in the header.
Can you please confirm the URL where you want to do the change?

---

http://wisdmlabs.com/

[ChristinaGammon]

It's not live yet...

[WisdmLabs]

Hi,
Go to line no.2006 of style.css of Outreach Pro theme to change the header color to burgundy from red.
In the below CSS code, I have changed the background color. However, this will also change the hover color of red buttons and red input buttons.

.outreach-pro-red .button:hover, .outreach-pro-red .site-header, .outreach-pro-red button:hover, .outreach-pro-red input:hover[type="button"], .outreach-pro-red input:hover[type="reset"], .outreach-pro-red input:hover[type="submit"] {
     background-color: #800020;
     color: #fff;
}

In case you just want to change the header color without changing the button hover color, you can add the below CSS at the end of your CSS file:

.outreach-pro-red .site-header {
     background-color: #800020;
}

---

http://wisdmlabs.com/

[ChristinaGammon]

It's Outreach Pro.
I really appreciate your help with this! But I am so lost with it right now. How do I find the line # when viewing Editor in WP?
If I click on Edit CSS, it comes up with lines 1-12 and it says:

/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.

By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don't need to copy all
your theme's stylesheet content.
*/

[ChristinaGammon]

Okay, I've finally figured out where to edit the css so I am getting somewhere... thank you for your help!

What I want is to change ONLY the header from red to white so my logo shows up. I've already changed the nav bar.

[WisdmLabs]

Hi,
For changing the background-color of only the header, add the below CSS at the end of style.css

.outreach-pro-red .site-header {
     background-color: #fff;
}

You can also add the above CSS in Custom CSS field in the backend as it loads after your theme stylesheet.

---

http://wisdmlabs.com/

[Doug]

ChristinaGammon - how did you change the top part of the site to white - that's exactly what I want to do?

[ChristinaGammon]

Hi Doug,
Sorry I didn't see this until right now. I added this: .outreach-pro-red .site-header {
background-color: #fff;
}

to the very end of my style.css sheet. I've done this with others too and if it's blue to white, I just change out the word red for blue....

[Author]

Posts