WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
[resolved] How can I change menu bar color? (11 posts)

  1. Fabrizio Pivari
    Member
    Posted 2 years ago #

    Hello,

    how can I change the menu bar color (default is black)?
    I think in style.css but I'm not css expert, can you indicate me the exact fields?

    Thanks

    Fabrizio

    http://wordpress.org/extend/themes/twentyeleven/

  2. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    look in

    #access {

    for

    background-color; your_color_here;

  3. Fabrizio Pivari
    Member
    Posted 2 years ago #

    I've to change the black default with #b9cb13.
    In style.css I go to
    /* =Menu
    -------------------------------------------------------------- */
    #access {

    I've not found background-color
    so I've tried to change
    background: #222; /* Show a solid color for older browsers */
    into
    background: #b9cb13; /* Show a solid color for older browsers */

    But it doesn't work. Do I have to add background-color ?

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

  5. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    looking at your site.... none of the css has been changed - here is your code

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

    be aware that all of those background lines would need some sort of change. the first one is the fallback for all browsers not supporting the gradient property. The next 4 lines are all proprietary broser specific gradients for the menu bar.

    If you don't wish to have the gradient, and just want your colour, delete the four lines, and just keep that top line with your colour

    Also, I see you are editing 2011 directly, which is not good, as you will soon lose your changes
    http://vudu.me/child
    That explains child themes, the article is about the 2010 theme, but the basis is the same for all themes

  6. Fabrizio Pivari
    Member
    Posted 2 years ago #

    Thanks for suggestions.
    I've made
    @import url("../twentyeleven/style.css");

    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #b9cb13);
    background: -o-linear-gradient(#252525, #b9cb13);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b9cb13), to(#b9cb13)); /* older webkit syntax */
    background: -webkit-linear-gradient(#b9cb13, #b9cb13);
    }

    and works!

  7. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    excellent! just a note, you may want to update this one line:

    background: #222; /* Show a solid color for older browsers */

    For users of older browsers like IE, etc. If you are worried what colour your menu appears to them. Currently they would still see a nearly black menu bar.

  8. Fabrizio Pivari
    Member
    Posted 2 years ago #

    I think I can't use #b9cb13.
    What's the colour more similar?

  9. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    You should be fine really with that

    the #222 is shorthand for #222222, you can use a 6 digit hex value.

    If you are ever looking for a way to hunt down colours, kuler.adobe.com is a great site for finding values for colours

  10. aasbd
    Member
    Posted 1 year ago #

    It is a great post about changing menubar color. How can I change the site Title color? Any suggestion will be appreciated
    http://www.aas-bd.com/

  11. PTLF
    Member
    Posted 1 year ago #

    Any how can I totally remove the menu? I managed to have it not showing up, but how do I get rid of the remaining background? Not only the color but the space? See it here:

    http://personalfitnesstrainerluebeck.com/pro/aktion/vielen-dank/

    Thanks for your help!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic