Change background color [Header] Outreach Pro

Community Forums Forums Design Tips and Tricks Change background color [Header] Outreach Pro

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  wizz6113 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #82395

    nancimurdock
    Member
    Post count: 8

    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
    #82398

    AC
    Blocked
    Post count: 7712

    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.

    #82480

    nancimurdock
    Member
    Post count: 8

    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!

    #91003

    wizz6113
    Member
    Post count: 77

    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?

    #91615

    wizz6113
    Member
    Post count: 77

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.