WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven menu bar color (9 posts)

  1. massimo6342
    Member
    Posted 2 years ago #

    Hi, I would like to change the color of the big menu bar (where I put my categories - see http://www.roma2oggi.it) from black into a more soft color. I think that this is possible but I cannot find how. Any help will be appreciated, thank you very much, Massimo

  2. Kurt
    Member
    Posted 2 years ago #

    massimo6342:

    If you want to update the 2011 theme in the future, you'll need to create a child theme. Here's the codex page for child themes: http://codex.wordpress.org/Child_Themes . Optionally, this plugin claims to create a child theme for you: http://wordpress.org/extend/plugins/one-click-child-theme/ . I have not used the plugin.

    The navigation bar in 2011 uses a CSS3 gradient. Here's the CSS for access (the navigation bar):

    #access {
    background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
    }

    You need to change the first rule regarding background.

    If you don't care about updating the 2011 theme, edit the 2011 style.css file, scroll to the bottom and add this:

    #access {
    background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
    }

    The two hex values are the starting color and the ending color. To go from black to white the colors would be: (#000000, #FFFFFF). To go from red to blue: (#FF0000, #0000FF). You can experiment with the colors you want.

    If you want a solid color change the rule to look like this:

    background: none repeat scroll 0 0 #FF0000;

    The hex value in the example is red. Change it to match the color you want.

    If you create a child theme (recommended), add the new CSS rule to the style.css file for your child theme.

    Note: You can use rgb values as well, if you're more familiar with rgb. For example, using red: rgb(100%,0,0) or rgb(255,0,0).

  3. massimo6342
    Member
    Posted 2 years ago #

    Kurt, thank you very much for your answer. Very clear. I am testing so I changed the style.css file and the menu bar now appears as I like. I plan to create a child theme to make things cleaner and easier to maintain. I learned a lot so thank you again, Massimo.

  4. Kurt
    Member
    Posted 2 years ago #

    Massimo: I looked at your site. The matching color looks better than black.

    Glad I could help.

  5. cjwilson81@yahoo.com
    Member
    Posted 2 years ago #

    I need help doing the SAME thing Kurt! I would like to change my menu bar color to purple. Can I get some help?

  6. cjwilson81@yahoo.com
    Member
    Posted 2 years ago #

    If you go to http://www.iamchristianj.com you will notice that the menu bar is black.....I want it purple

  7. esmi
    Forum Moderator
    Posted 2 years ago #

    @cjwilson81@yahoo.com: Please post your own topic.

  8. massimo6342
    Member
    Posted 2 years ago #

    @cjwilson81@yahoo.com
    Hi, I followed Kurt suggestions to find where to change color. You should create a child-theme that would be the best solution to make changes to the theme. If you are in a hurry there is the "dirt" solution: change the style.css file in your wp directory. You have to find the lines where the /* Menu .... */ appears and change the colors as you may need. I did it this way:
    /* =Menu
    -------------------------------------------------------------- */

    #access {
    background: #BA232A /* #222 original changed by Massimo*/; /* Show a solid color for older browsers */
    background: -moz-linear-gradient (##BA232A, ##A1232A);/*(#252525, #0a0a0a); */
    background: -o-linear-gradient (##BA232A, ##A1232A);/*(#252525, #0a0a0a); */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(##BA232A), to(##A1232A)); /* older webkit syntax */
    background: -webkit-linear-gradient(##BA232A, ##A1232A);

    ----------------------
    Leave the following lines as they are. I strongly suggest to make a backup copy of your style.css file BEFORE making any changes. Apply the changes and replace the original file. It should work. Be careful.
    As a reference my site: http://www.roma2oggi.it/ Ciao, Massimo

  9. brainframe
    Member
    Posted 1 year ago #

    You DON'T need to do any of this.

    You can fix this in seconds!!!
    http://wordpress.org/extend/plugins/styles/

    We have a Plugin that will change the menu color and over 50 other appearance settings.

    It is called "Styles" by Brainstorm Media. (It's Free!!)

    Once installed, it will show under the Appearance menu.
    Look for the section called Main Menu and the first option is Wrapper.
    Click the little green box (for color,) type in your HEX# or choose a color.

    Thats it. Your done.

    Look at your newly colored menu. Yay :)

    Happy Designing,

    Taylor

    [signature moderated]

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.