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

Class navLink issues

Discussion in 'Styling and Customization Questions' started by Floren, Mar 23, 2012.

  1. Floren

    Floren Well-Known Member

    Hi,

    I'm trying to change the color of the text displaying into tabs Home, Members, Help, etc.
    I changed the navLink class color to black but the link still shows light blue. What else do I need to change?

    Thanks for your help.
     
  2. Shelley

    Shelley Well-Known Member

    Have you tried the following Floren? I haven't tested it so unsure whether this is a solution for you.

    Code:
    .navTabs .publicTabs .navLink {
    color: black !important;
    }
    
     
    Floren likes this.
  3. Floren

    Floren Well-Known Member

    Thank you Shelley, adding the important part solved the text issue. I also need help changing the color of the tab, in hover state. For example, if you hover over the Home link, it turns blueish.

    I cannot find anywhere that related CSS class.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Floren and Shelley like this.
  5. zappaDPJ

    zappaDPJ Well-Known Member

    I think this might be what you are looking for.

    Code:
    .navTabs .navTab.PopupClosed:hover {
        background-color: #FF0000;
    }
    If you also want to change the text colour, this should do it.
    Code:
    .navTabs .navTab.PopupClosed .navLink {
        color: #FF0000;
    }

    [EDIT] Or probably what Jake said!
     
    Floren likes this.
  6. Floren

    Floren Well-Known Member

    Thanks Jake. Well, the problem is I have the .navtabs already customized but if I hover over the Home link it turns blue, so it still links to @primaryMedium somehow:
    Code:
    .navTabs
    {
    @property "navTabs";
    font-size: 11px;
    background-color: rgb(229, 229, 229);
    padding: 0 25px;
    border: 1px solid rgb(217, 217, 217);
    border-bottom: 1px solid rgb(217, 217, 217);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    @property "/navTabs";
     
    height: @headerTabHeight;
    }
    Changing the @primaryMedium color fixes the issue but I don't want to do that because it changes the link color also. It is the hover part I'm interested only. It has to be a property somewhere, not involving editing a .css template.

    The only way I managed to fix it is by adding this to EXTRA.css:
    Code:
    .navTabs .navTab.PopupClosed:hover
    {
    background-color: #a7cf5f;
    }
     
    .navTabs .navTab.PopupClosed .navLink:hover
    {
    color: @textCtrlBackground !important;
    }
    It has to be a better way to do all this... Where is @primaryMedium called into .navTabs? I think is inherited from the top template, that's why is breaking everything. We probably need a property added there, so we can enter the hover state like we do for the rest of style.
     
    Shelley likes this.
  7. Shelley

    Shelley Well-Known Member

    Again I haven't tested this floren and I've just woken up so unsure whether this is what you wanted. Orange being the example colour below that should change the public background-colour main tabs.

    Code:
    .navTabs .publicTabs .navLink:hover {
    background-color: orange !important;
    }
    
     
  8. Shelley

    Shelley Well-Known Member

    Forgot to reply to this Floren. 100% agree I think with regards to the navbar and adding more style properties should be added. Infact, I would welcome alot more flexibility with the introduction of more properties by the devs be re-visited and really extend upon at some point.

    I myself am quite happy using extra.css and finding many elements but as said above that would be very welcomed. :)
     
  9. Floren

    Floren Well-Known Member

    Using .publicTabs will make all tabs green, even the selected ones. :D
    I made that mistake also, heh. The only combo working nice was the one posted into above post.
     
    Shelley likes this.
  10. Shelley

    Shelley Well-Known Member

    I just had my morning coffee and had a chance to wake up and test what I suggested and looking at what you just posted I can see what your doing. (y)
     

Share This Page