Color Change

Craig

Active member
Good morning to you.
I am wondering if there is a way to change the color(s) of the navbar / menu items?
for example


  • Home
  • Forums
  • Members
  • Help
  • Contact
IF I wanted to just change the color for the menu item "contact" how would I go about doing that?

Thank you in advance for your help!
 

James

Well-known member
You can change the colour of them all using the style properties system.

For just contact, you would merely add it to EXTRA.css. Seeing as "Contact" isn't a default XenForo tab, I can't provide specific selectors, but it's simple CSS.
 

Craig

Active member
You can change the colour of them all using the style properties system.

For just contact, you would merely add it to EXTRA.css. Seeing as "Contact" isn't a default XenForo tab, I can't provide specific selectors, but it's simple CSS.
Thank you for the response but.... I don't know how to write code of any type.
 

James

Well-known member
Actually, here's a very hackish way to do it:
In EXTRA.css:
Code:
 a[href="http://www.doomsdayprepperforums.com/index.php?link-forums/vip-membership.83/"]{
 background: red !important;
}
Change "red" to change the background colour.
 

0xym0r0n

Well-known member
AdminCP > Appearance > Templates > Extra.css

add this anywhere
Code:
.navTabs .navTab.contact .navLink
{
    color: #FF0000;
}
change contact to forums, help, etc
You might have to play with the casing but I am able to hide tabs and links based off the same cs. So, in theory, this code should work for color.

Sourced: http://xenforo.com/community/threads/change-colour-of-tabs.38846/#post-429148

And for nodes as tabs: http://xenforo.com/community/threads/nodes-as-tabs.26687/page-12#post-435085

So instead of contact or home it'd be nodetab1 nodetab2 etc
 

James

Well-known member
AdminCP > Appearance > Templates > Extra.css

add this anywhere
Code:
.navTabs .navTab.contact .navLink
{
    color: #FF0000;
}
change contact to forums, help, etc
You might have to play with the casing but I am able to hide tabs and links based off the same css, so, in theory, this code should work for color.

Sourced: http://xenforo.com/community/threads/change-colour-of-tabs.38846/#post-429148

And for nodes as tabs: http://xenforo.com/community/threads/nodes-as-tabs.26687/page-12#post-435085

So instead of contact or home it'd be nodetab1 nodetab2 etc
This doesn't work.
 

Craig

Active member
You are afflicted by an old bug in the default navigation template. It is described here, along with a CSS example for a node tab using the Nodes As Tabs addon:

http://xenforo.com/community/threads/nodes-as-tabs.26687/page-12#post-435085

Read that post and the few posts after it regarding the template bug.

I am still not able to get the color to change.

I used
.navTabs .navTab.nodetab83 .navLink
{
color: red;
}
and I added the missing
{$extraTabId}

Yet I still can't get the tab color to change.
When I hover over it on the node tree it shows vip-membership.83
 

Jake Bunce

XenForo moderator
Staff member
I am still not able to get the color to change.

I used
.navTabs .navTab.nodetab83 .navLink
{
color: red;
}
and I added the missing
{$extraTabId}

Yet I still can't get the tab color to change.
When I hover over it on the node tree it shows vip-membership.83
Your style still has the bug. You did not fix it. Make sure you are editing the correct style. And note that there are 3 extraTabs blocks, and so there are 3 places to apply the fix.
 

Craig

Active member
Your style still has the bug. You did not fix it. Make sure you are editing the correct style. And note that there are 3 extraTabs blocks, and so there are 3 places to apply the fix.
Ok, I went through and made sure each section looks like;

<xen:else />
<li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">

But I still am not getting the color change.
Should I put {} around any and all $extraTabId
 

Jake Bunce

XenForo moderator
Staff member
It's being overridden by other CSS in your style. Add !important to force it:

Code:
.navTabs .navTab.nodetab83 .navLink
{
color: red !important;
}
 
Top