1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Change hover links

Discussion in 'XenForo Questions and Support' started by Peggy, Mar 23, 2011.

  1. Peggy

    Peggy Well-Known Member

    When you hover over a link on the navbar currently, a background color appears.
    I'd like to change this behavior if possible. I've tried to figure it out, but can't get it to work.

    I'd like to get rid of the background color that appears upon hovering, and have the text change color instead. (See screenie).
    Is this possible? If so, how?

    hover.png
    Thanks!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Add this to EXTRA.css:

    Code:
    /* Change navigation tab hover colour */
    .navTabs .navTab.PopupClosed:hover {
    background-color: @secondaryDark;
    color: @primaryLight;
    }
    Change the colours to suit.
     
  3. Peggy

    Peggy Well-Known Member

    This is not for the tabs, tho. It's for What's New, Watched Threads, etc. This will do that?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    In that case try this:
    Code:
    .navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {
    background-color: @secondaryDark;
    color: @primaryLight;
    }
     
  5. Peggy

    Peggy Well-Known Member

    Unfortunately there's still a background color on hovering, just a different color now, lol.
    How do I get rid of that background color?

    I did:

    Code:
    .navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {
    background-color: none;
    color: @primaryLight;
    }
    didn't work.
     
  6. Russ

    Russ Well-Known Member




    Peggy,

    Go to Appeareance -> Style Properties -> Header and Navigation -> Selected Tabs Link Hover State

    Then remove the background effects, should work for you.
     
  7. Peggy

    Peggy Well-Known Member

    OK! I changed none to transparent, and that's alot better, but, there's still a noticeable border around it.
    How to get rid of that?
     
  8. Peggy

    Peggy Well-Known Member

    THis isn't for the tabs tho hun, it's for the links below them i.e. what's new, watched threads, etc.
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Add a border property to the code above, the same colour as the background.

    border: 1 px solid @whatever;

    Set the background colour in the original code to the same colour as the navigation bar and it will appear identical on hover.
     
  10. Peggy

    Peggy Well-Known Member

    I have this now which is working great, except there's still a border...
    Code:
    .navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {
    background-color: transparent;
    color: #000000;
    }
     
  11. Peggy

    Peggy Well-Known Member

    OK! ummmm what is that strip called? :)
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    Try this:

    Code:
    .navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {
    background-color: transparent;
    border: transparent;
    color: #000000;
    }
    
     
  13. Peggy

    Peggy Well-Known Member

    w00t! That did it. Thanks Brogan!
     

Share This Page