Color Change

[Craig]

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]

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]

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]

If you provide a link to your site we can provide the css

 

[Craig]

If you provide a link to your site we can provide the css

The one I actually want changed it VIP Membership. I used Contact as merely an example.
Thanks for the offer! The site link is;

Doomsday Prepper Forums

 

[James]

The one I actually want changed it VIP Membership. I used Contact as merely an example.
Thanks for the offer! The site link is;

Doomsday Prepper Forums

You don't actually have any unique classes on that link for it to be altered individually. Did you create those links with template edits?

 

[Craig]

You don't actually have any unique classes on that link for it to be altered individually. Did you create those links with template edits?

No, i used "Nodes As Tabs" add on

http://xenforo.com/community/resources/nodes-as-tabs.9/update?update=1441

 

[James]

I've submitted a request to Jake, but at the minute there's no way to target just that tab individually.

 

[James]

Actually, here's a very hackish way to do it:
In EXTRA.css:

 a[href="http://www.doomsdayprepperforums.com/index.php?link-forums/vip-membership.83/"]{
 background: red !important;
}

Change "red" to change the background colour.

 

[Craig]

I've submitted a request to Jake, but at the minute there's no way to target just that tab individually.

unfortunately I know no other way to make a tab.

 

[0xym0r0n]

AdminCP > Appearance > Templates > Extra.css

add this anywhere

.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]

AdminCP > Appearance > Templates > Extra.css

add this anywhere

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

 

[Jake Bunce]

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.

 

[Craig]

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]

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]

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]

Your template is fixed now. But your CSS is wrong. See this example:

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

Your CSS is not the same. It has an extra dot that doesn't belong:

.navTabs .navTab.nodetab.83 .navLink
{
color: red;
}

 

[Craig]

Your template is fixed now. But your CSS is wrong. See this example:

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

Your CSS is not the same. It has an extra dot that doesn't belong:

.navTabs .navTab.nodetab.83 .navLink
{
color: red;
}

I changed it to the following;

.navTabs .navTab.nodetab83 .navLink
{
color: red;
}

But still no go

 

[Jake Bunce]

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

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

 

[Craig]

That worked like a charm! Thank you so very much!
I appreciate all of the help and patience!