Results 1 to 3 of 3

Thread: Matt Black Tabs

  1. #1
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Matt Black Tabs

    The Matt Black Tabs CSS has a note against one of the styles:

    .mattblacktabs li a:hover, .mattblacktabs li.selected a{
    background: red; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
    }

    (I have changed the background colour to 'red' myself)

    The class to make the menu bar stay red on the selected page is 'a'

    This class assignment presumably makes the tab on the active page the colour red when it is hovered over, and when it sees class 'a' on the active page.

    But I don't know how to assign the class to the active / selected page so that the menu bar stays red. Please could someone explain how to do it?

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I don't completely understand what you want, but give this a try:
    Code:
    .mattblacktabs li a:hover{
    background: red; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
    }
    .mattblacktabs li.selected a {
    background: blue; /*background for selected*/
    }
    Jeremy | jfein.net

  3. #3
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    on each page, you have to add the class "a" to it's corresponding link in the menu... Say your menu has the links "Home", "About Us", & "Contact"

    Then on the home page you would use:
    Code:
    <li class="a"><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact</a></li>
    Then on the about us page:
    Code:
    <li><a href="#">Home</a></li>
    <li class="a"><a href="#">About Us</a></li>
    <li><a href="#">Contact</a></li>
    And on the contact page:
    Code:
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li class="a"><a href="#">Contact</a></li>
    See the trend? Hope all that made sense...
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •