Change background color [Header] Outreach Pro

[nancimurdock]

Hello, and Happy New Year to anyone that is on the forum right now!

This is a fairly easy one (I think) but I would like to change the background color of the header area (where my logo is) to white #ffffff without changing/removing all of my other "orange" elements that are coded with the Theme Color of Orange.

Any assistance and code line snippet would be appreciated.

Thanks!
Nanci

http://socialmediabonk.com

[Anita]

In the site header:

.site-header {
background-color: #ffffff;
}

add !important at the end of that line:

background-color: #ffffff !important

Something in there is blocking that.

---

Love coffee, chocolate and my Bella!

[nancimurdock]

Thank you! Because I am using the Orange version of the theme, I had to locate the site-header code in that section - changing in the main CSS would only work if I was using the default version of the theme.

I did find it in Outreach Pro - Orange (it was bundled with several other items, which I assume are also now #ffffff), however I did not notice anything obvious that I would still like to be orange. If I do, I assume I can just remove site-header from the list of items and add a new section:

.site-header {
background-color: #ffffff;
}

in the Orange instructions.

Thank you!

[wizz6113]

I changed the site header color to white while using the blue preset and I ended up with the entire navigation bar hover messed up - jumping all over the place! I have no idea why merely changing the site header color would do that.

I also want white, and to change the site title and tagline to blue (inverse of the preset, in essence). I'll try the code about but am oh so worried about the effects (took me 1.5 hrs to re-do coding as I ended up replacing the entire CSS with the default).

Does anyone know why this would happen?

[wizz6113]

OK, I've got the hang of this and understand my issue with messing up the navbar (see above). If you choose any of the presets other than the default green, you need to change the .site-header in two places - within your chosen color first and in then overall css coding (which is set to green).

1. Locate your chosen preset colour - mine was blue. Locate the single code line that bundles .site-header with various hovers on navbars.

2. Cut it out and create it as its own entry as follows, putting in your chosen background color - in the eg, this is white #ffffff. I placed this new line above the section I cut it from, for ease sake and to find and replace it if things went wrong!:

}
.outreach-pro-blue .site-header,
background-color: #ffffff;
}

3. Save this if you like and view page and you'll now see your header green. So, then locate the general CSS site header code earlier in the stylesheet, and replace the green #589b37 with your chosen color - in my case white. Be aware that if you title header text and tagline are white, you'll need to change those too so they show. It didn't matter in my case as I was putting in a custom design image header.

Site Header
---------------------------------------------------------------------------------------------------- */
.site-header {
background-color: #ffffff;
color: #fff;
min-height: 110px;
}

[Author]

Posts