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

Class navLink issues

Floren

Well-known member
#1
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.
 

Shelley

Well-known member
#2
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

Well-known member
#3
Have you tried the following Floren? I haven't tested it so unsure whether this is a solution for you.
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.
 

zappaDPJ

Well-known member
#5
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

Well-known member
#6
This should help:

http://xenforo.com/community/threads/change-the-color.8749/#post-120671

That's all of the CSS anyways. You can edit the CSS directly or duplicate it in EXTRA.css.
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

Well-known member
#7
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;
}
 

Shelley

Well-known member
#8
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:

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.
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. :)
 

Floren

Well-known member
#9
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;
}
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

Well-known member
#10
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.
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)