WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to change menu bar color? (top and bottom) (9 posts)

  1. lolswipe
    Member
    Posted 6 months ago #

    Hi there everyone,

    it's just a quick question:

    I'm trying to change the color of the menu bars (the top one is black right now, the bottom one is grey)

    to this Color:

    6BCEB1

    How do I go about doing this?

    Thanks

    my site:

    voilacars(dot)net

  2. Pioneer Valley Web Design
    Member
    Posted 6 months ago #

    Use this per below:

    .header_top {
    	background:none;
    }
    
    .header_thin {
    	background:#6BCEB1;
    }
    
    .footer {
    	background:#6BCEB1;
    }

    To discover what CSS is output by your theme, use a web inspection tool such as Firebug: http://getfirebug.com/ , Chrome Inspect Element: https://developers.google.com/chrome-developer-tools/ or Internet Explorer 9+ F12 Dev. Tools: http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx#csstool

    There are others.

    When editing CSS, use a Child Theme
    http://codex.wordpress.org/Child_Themes
    Custom CSS Plugin, or Theme provided custom CSS option.
    Edits to parent themes are lost on theme update
    .

    Learn CSS: http://www.w3schools.com/css/

  3. lolswipe
    Member
    Posted 6 months ago #

    Hi there PVWDM,

    Thank you for your quick response.

    This is my first time creating a child theme, so how do I go about that process?

    And I just simply create the child theme and copy and paste that bit of the code into it?

    Thanks

  4. Pioneer Valley Web Design
    Member
    Posted 6 months ago #

    You are using a Child Theme. So add this to bottom of current theme's style.css

    Admin Dashboard>Appearance>Editor>style.css should be the file shown by default but verify.

    Add just below:

    @import url("../autotrader-parent/screen.css");
    
    ADD HERE

    So file now looks like:

    /*
    Theme Name: AutoTrader Child
    Theme URI: http://themefuse.com/demo/wp/autotrader/
    Description: Child theme for the AutoTrader. Child themes are the recommended way of making modifications to a theme. <a href="http://codex.wordpress.org/Child_Themes">Reade More</a>
    Author: ThemeFuse
    Author URI: http://themefuse.com
    Template: autotrader-parent
    */
    
    @import url("../autotrader-parent/style.css");
    
    @import url("../autotrader-parent/screen.css");
    
    .header_top {
    	background:none;
    }
    
    .header_thin {
    	background:#6BCEB1;
    }
    
    .footer {
    	background:#6BCEB1;
    }

    Caution: I strongly encourage you to backup the site first, or at least this file now, in case an error is made (by you). When we edit files in the Dashboard Editor, we can lose access to the site, just read through the multitude of posts on this forum related to that.

    What I do is use FileZilla and keep an unedited copy of any file that will be edited prior to edit so I can quickly put the original file back if I mess up (and we all do at some point).

  5. lolswipe
    Member
    Posted 6 months ago #

    YES

    THANK YOU.

    It is done.

    TREMENDOUS HELP.

    (I backed it up by the way, so thanks).

    Problem Resolved.

  6. lolswipe
    Member
    Posted 6 months ago #

    And also, if I'm hearing you correctly, anytime that I need to make a change to the CSS, I have to do so on the child's style.css sheet in order to make sure that the changes remain permanent and are not "erased" in an update?

    Thanks

  7. Pioneer Valley Web Design
    Member
    Posted 6 months ago #

    Yes.

  8. lolswipe
    Member
    Posted 6 months ago #

    Thanks.

    Resolved.

    (Mods; Thread can be closed now. THX)

  9. Pioneer Valley Web Design
    Member
    Posted 6 months ago #

    Oh, and glad to help, please mark post as resolved if so.

    Edit: we posted at same time!

Reply

You must log in to post.

About this Topic