WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
How to change navigation background (11 posts)

  1. wrust
    Member
    Posted 2 years ago #

    I want change navigation background color,but I don't know how to edit.

    Anyone help me?

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

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    I would strongly advice against editing the Twenty Eleven theme as it is the default WordPress 3.2 theme. Having access to an unedited version of the default theme is sometimes vital when troubleshooting a range of site issues.

    For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

  3. wrust
    Member
    Posted 2 years ago #

    Thanks esmi.But I also need know how to change.........

  4. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Once your child theme is active, we should be able to help with the customisation.

  5. fairfaxflora
    Member
    Posted 2 years ago #

    I've created a child theme, and I'm also looking to see how to do this change. Can you help? My site isn't published yet.

  6. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    everything to do with the navigation is in style.css, starting with:

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    ...
    ...

    copy the section into style.css of your child theme and change the background colors.

  7. mb studio services
    Member
    Posted 2 years ago #

    I dropped this code into my twentyeleven child theme and it didn't change the navigation background colors.

    Mike

    /* =Menu
    -------------------------------------------------------------- */

    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);
    ...
    ...

  8. Digital Raindrops
    Member
    Posted 2 years ago #

    Hi Mike,
    Did you change the colors from the defaults?

    Test with this block as you likely did not get all the styles, this will give you an orange menu.

    /* Menu Background */
    #access  {
    	background: #A72608; /* Tertiary to Primary */
    	background: -moz-linear-gradient(#DB7C2A, #A72608);
    	background: -o-linear-gradient(#DB7C2A, #A72608);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DB7C2A), to(#A72608)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#DB7C2A, #A72608);
    }

    If you want to control more colors then I have a twenty eleven color master child theme, this will give you control over all main colors, and it will generate the styles so you can copy them to your other child theme.

    Regards

    David

  9. mb studio services
    Member
    Posted 2 years ago #

    The menu works in the default but when I used the dark template it didn't. Is there a way around this ?

    Mike

  10. Digital Raindrops
    Member
    Posted 2 years ago #

    Hi Mike,
    The problem with the dark template is that the style is loaded after the child themes stylesheet.

    There are two ways:
    Option 1
    Use !important this will stop the style being changed:

    /* Menu Background */
    #access  {
    	background: #A72608 !important; /* Tertiary to Primary */
    	background: -moz-linear-gradient(#DB7C2A, #A72608) !important;
    	background: -o-linear-gradient(#DB7C2A, #A72608) !important;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DB7C2A), to(#A72608)) !important; /* older webkit syntax */
    	background: -webkit-linear-gradient(#DB7C2A, #A72608) !important;
    }

    Option 2
    Create a second stylesheet in the child theme and load this in functions.php, this is the way I would suggest is the better option.

    I wrote a post on how to do this with the code, and a download for registered members.

    HTH

    David

  11. niceWP
    Member
    Posted 1 year ago #

    alchymyth, thank you so much! it worked perfectly for me!

    I just copied and pasted into my child style.css sheet the code you provided and then changed the colors names to my liking. Now i am liking it so much better :)

    I appreciate your help.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic