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

Color Change

Craig

Active member
#1
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
#2
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
#3
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
#9
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
#11
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
#12
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
#14
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
#15
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
#16
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
#19
It's being overridden by other CSS in your style. Add !important to force it:

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