WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Ten colour tabs (6 posts)

  1. lazystuff
    Member
    Posted 3 years ago #

    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.

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

    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.

  3. lazystuff
    Member
    Posted 3 years ago #

    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

  4. lazystuff
    Member
    Posted 3 years ago #

    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;
    }
  5. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

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

    #access #menu-item-9.current-menu-item a:hover {background-color:#ee1c24;}
  6. lazystuff
    Member
    Posted 3 years ago #

    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;}
    }

Topic Closed

This topic has been closed to new replies.

About this Topic