WordPress.org

Support

Support » Themes and Templates » Twenty Ten colour tabs

Twenty Ten colour tabs

  • Hi

    I have managed to make the tabs on my nav bar a different colour, for each menu item – having followed the forum listed below:

    http://en.forums.wordpress.com/topic/custom-menu-tab-colors-in-twenty-ten

    However, I would like to keep the colour highlighted when the tab is selected.

    I have customised this code to no avail, only the hover works:

    }
    #access #menu-item-9 a:hover,
    #access #menu-item-9 a:active {
    background-color:#ee1c24;
    }
    #access #menu-item-10 a:hover,
    #access #menu-item-10 a:active {
    background-color:#eee809;
    }

    I don’t have a live site for you to view yet, but any advice would be appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Michael

    @alchymyth

    Forum Moderator

    the css pseudo class :active is only used very briefly when the link is clicked until the next page shows – it is not the class for the ‘current active’ page.

    try to integrate/add .current_page_item or .current-menu-item (check what applies to your menu) into your color tabs.

    Thanks for your reply. I may have given the illusion of knowing what I’m doing, sadly I don’t. I’ve tried this amend in my child theme, which doesn’t work – any ideas?

    }
    #access #menu-item-9 a:hover {background-color:#ee1c24;}
    #access #menu-item-10 a:hover {background-color:#eee809;}
    #access #menu-item-11 a:hover {background-color:#a8a8fc;
    }
    
    #content #current-menu-item-9 {background-color:#ee1c24;}
    #content #current-menu-item-10 {background-color:#eee809;}
    #content #current-menu-item-11 {background-color:#a8a8fc;
    }

    Thanks in advance

    OK. This changes the tab colour, but it’s the SAME colour on each tab – how would I change the colour for each tab to match the hover?

    #access
    .current-menu-item {background-color:#eee809;
    }

    This doesn’t work, just #eee809 the same as item 9:

    #access
    .current-menu-item,
    #access .current-menu-item-9 {background-color:#eee809;}
    #access .current-menu-item-10 {background-color:#ee1c24;}
    #access .current-menu-item-11 {background-color:#a8a8fc;
    }
    
    #access #menu-item-9 a:hover {background-color:#ee1c24;}
    #access #menu-item-10 a:hover {background-color:#eee809;}
    #access #menu-item-11 a:hover {background-color:#a8a8fc;
    }
    Michael

    @alchymyth

    Forum Moderator

    this kind of combining the css ids and classes might work:

    #access #menu-item-9.current-menu-item a:hover {background-color:#ee1c24;}

    yes, that’s got it. thanks.

    #access #menu-item-11.current-menu-item {background-color:#8cc49f;}
    #access #menu-item-11 a:hover {background-color:#8cc49f;
    }
    #access #menu-item-10.current-menu-item {background-color:#afa1ce;}
    #access #menu-item-10 a:hover {background-color:#afa1ce;
    }
    #access #menu-item-9.current-menu-item {background-color:#007db5;}
    #access #menu-item-9 a:hover {background-color:#007db5;}
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Twenty Ten colour tabs’ is closed to new replies.
Skip to toolbar