WordPress.org

Forums

Kavya
[resolved] change color of blue bar (12 posts)

  1. szaszi2014
    Member
    Posted 10 months ago #

    Hello Suresh Patel,
    thank you for your great theme.
    I am currently seting up a non-profit wp site for a sports club and your theme fits very well. Except the color of the main navigation bar, the sport club's logo is red and I wonder if it is possible to change the color from blue to sth. different - any advise how to do it would be appreciated, thank you
    kind regards
    Frank

  2. Karlopa
    Member
    Posted 10 months ago #

    Yes I would also like to know how to change the Black background and grey 'hover' colours on the Main navigation(drop down Nav too) and also the Black background on the Widget Title section.
    I have looked and tried to make changes to the CSS file but to no avail. I found where to change the Hyper link colour but don't need that changed.

    It would be GREAT if this feature would be added as an easy Setting features for other who will maintain the site.

    Thanks in advance, Karlopa

  3. Karlopa
    Member
    Posted 10 months ago #

  4. .
    Member
    Posted 10 months ago #

    @szaszi2014:

    Add this to the bottom of your child theme CSS or custom CSS:

    #navWrapper {
    background: #C20061; /* navigation bar background color */
    }

    You can use http://colorpicker.com/ to grab the color code you want.

    -----------

    @Karlopa:

    This is just CSS, very simple stuffs. We can add new rules to the bottom of a separate stylesheet (such as child-them CSS or custom CSS) to overwrite whatever above it. No need to search around in the parent theme's style.css for the right place to edit--that's actually not recommended.

    For the navbar background, please see the answer to szaszi2014's question above.

    As for the hover color, use this:

    .main-navigation li:hover > a {
    color: #000; /* navigation menu item text color on hover */
    background: #fff; /* navigation menu item background color on hover */
    }
  5. Karlopa
    Member
    Posted 10 months ago #

    Thanks 'Techievous' but that didn't work, added it to my custom CSS. Even cleared the Cache and still black. I'm going to hunt on the php files to see if I can find any colour codes, hidding there. Certainly isn't any for the NAV on the style sheet, at least that I can see.

  6. .
    Member
    Posted 10 months ago #

    Thanks 'Techievous' but that didn't work, added it to my custom CSS. Even cleared the Cache and still black. I'm going to hunt on the php files to see if I can find any colour codes, hidding there. Certainly isn't any for the NAV on the style sheet, at least that I can see.

    Yes, it does work. See screenshot here: http://i.imgur.com/xZWKJ2Y.png. I changed the navbar background to a pink-ish color; I also change the hover background color to a green-ish with dark text. Both CSS codes work when apply correctly.

    You'd probably want to learn basic CSS and HTML first before advancing to PHP though, because one mistake and you'll be lock out of your entire site if you mess with PHP.

  7. Karlopa
    Member
    Posted 10 months ago #

    Thanks I will try the 'hover' link as that is what I am wanting to change more, the Black default background of 'current' page and the greys from the hover... drop down menu.
    I know CSS and HTML quite well as I have built numerous sites from code. I realize if I change the style sheet I should create a child-style sheet or use the 'custom' section.
    Thanks.. and how about the Black Menus for the widgets, where do I find that code, so I can tweak it in a child theme.

  8. .
    Member
    Posted 10 months ago #

    how about the Black Menus for the widgets, where do I find that code, so I can tweak it in a child theme.

    Change the colors as needed:

    .widget-area .widget-title {
    background: #fefefe; /* widget title background color */
    color: #181818; /* widget title font color */
    }
  9. Karlopa
    Member
    Posted 10 months ago #

    Ok for some reason it does not work when I put it in the Custom CSS section.
    But it does work if I test the colour code in the style sheet. So I will create a child-theme, style.css for what I want.
    Thanks.

  10. .
    Member
    Posted 10 months ago #

    Besides child theme, you can also use a plugin like Jetpack (an official plugin by WordPress themselves) or Simple Custom CSS.

    • If you choose Jetpack: Install and activate the plugin --> go to Jetpack --> Settings --> activate custom CSS module --> go to Appearance --> Edit CSS --> copy-paste the code there.
    • If you choose Simple Custom CSS: Install and activate the plugin --> then go to Appearance --> Custom CSS --> copy-paste the code in there.
  11. Karlopa
    Member
    Posted 10 months ago #

    Thanks, the Jetpack edit CSS works well.

  12. szaszi2014
    Member
    Posted 10 months ago #

    Hi Techievous,
    thanks for your support! Installing Simple Custom CSS and adding your suggested lines there works for me as well!
    cheers
    Frank

Reply

You must log in to post.

About this Theme

About this Topic