Outreach – Change Primary Nav Bar to Custom Color

Community Forums Forums General Discussion Outreach – Change Primary Nav Bar to Custom Color

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  thepixelista 1 year, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #40195

    smk1859
    Participant
    Post count: 1

    Hi -

    Can anyone help me change my navigation bar to a custom color (in Outreach)?  I know that there are 4 available colors, but I’m looking to use a custom color that matches my logo.

    Here’s my url:  http://www.ereadingvillage.com   Thank you!

    Sherry

    http://www.ereadingvillage.com
    #40201

    thepixelista
    Participant
    Post count: 7

    Hi Sherry,

    It looks like this particular theme uses an image for the background. If you want to keep the subtle texture effect, you’ll want to change the “nav.png” image in an image editor like Photoshop, then replace it in your child theme folder.

    Alternatively, you can change the background of the navigation bar to a hex color code of your choice. For example, if you change this:

    #nav {
    background: url(“images/nav.png”) repeat scroll 0 0 transparent;
    }

    …to this:

    #nav {
    background: #4db0d7;
    }

    …in your child theme CSS, it will change your navigation bar to a blue color.

    Hope that helps!


    My passion is working with women to create beautiful and functional websites that allow their personalities to shine through! Visit my website: http://thepixelista.com/

    • This reply was modified 1 year, 4 months ago by  thepixelista.
    • This reply was modified 1 year, 4 months ago by  thepixelista.
    #40206

    smk1859
    Participant
    Post count: 1

    That did the trick!  Thanks you so much!!

    Is it possible to change colors of the large black border showing around the home page responsive slider?  I’m assuming this is an image as well, because I’ve racked my brain trying to change it to the “coffee brown” I’m using for my blog title.

    Same goes for the black bar at the footer (where the copyright info is located).

    I really appreciate your help!

    Sherry

    #40207

    thepixelista
    Participant
    Post count: 7

    You’re welcome – glad I could help! :)

    Those sections use images too, but if you look for these portions of in your CSS and change the hex to the one of your choice, it should to the trick:

    #inner {
    background: #4db0d7;
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 0;
    }

    (“inner” controls the background color behind the slider)

    #footer {
    background: #4db0d7;
    clear: both;
    color: #666666;
    font-size: 14px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    }

    (“footer” changes the footer background color)


    My passion is working with women to create beautiful and functional websites that allow their personalities to shine through! Visit my website: http://thepixelista.com/

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

You must be logged in to reply to this topic.