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

Customizing not working for "Selected Tab Link, Hover State" - Help!

Discussion in 'Styling and Customization Questions' started by fredrikse, Jan 21, 2012.

  1. fredrikse

    fredrikse Active Member


    I've tried to customize the style properties for the element "Selected Tab Link, Hover State". Unfortunately I can't get it to work the I want.

    My goal is to get rid of the default highlighted area around the link itself as you can see in the attached file.


    I have tried to remove the background color for this element as you can see in the second attached picture. The background still shows up when I hover above the link. Why does it not work?

    style properties.jpg
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Add to EXTRA.css:
    .navTabs .navTab.selected .tabLinks a:hover,
    .navTabs .navTab.selected .tabLinks a:focus {
    background: none;
    border: none;
  3. fredrikse

    fredrikse Active Member

    Thank you so much. That did it! Works like a charm :)
  4. fredrikse

    fredrikse Active Member

    One little thing. I noticed that the link text move just a little bit when I go from normal to hover state.

    In miscellaneous settings for normal and hover state the following code is used for both:

    display: block;
    text-shadow: 0 1px 1px @primaryMedium;
    Any ideas?
  5. Brogan

    Brogan XenForo Moderator Staff Member

    There is no border now so add 1px padding.

    Changing it to 0 10px worked when I just tested it.
  6. fredrikse

    fredrikse Active Member

    Thanks once again. You solved my problem!

Share This Page