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

Change Text Colour of Nav Bar Button

#1
Hey how do i change only the text colour of a custom nav bar i added in the navigation template.

EDIT: Also how do i make it so that only a certain group can posts threads in a certain area. But other members can reply to those threadS?
 

Jake Bunce

XenForo moderator
Staff member
#2
Hey how do i change only the text colour of a custom nav bar i added in the navigation template.
This post shows all of the navbar colors:

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

To change only one nav tab you can add CSS to this template:

Admin CP -> Appearance -> Templates -> EXTRA.css

For example, add this code to change the text color of a tab when it's not selected:

Code:
.navTabs .navTab.tabID.PopupClosed .navLink
{
	color: red;
}
The tabID is in the source code of the page, for example:

Code:
			<li class="navTab gallery Popup PopupControl PopupClosed">
			
				<a href="index.php?gallery/" class="navLink">Gallery</a>
				<a href="index.php?gallery/" class="SplitCtrl" rel="Menu"></a>
				
				<div class="Menu JsOnly tabMenu">
					<div class="primaryContent menuHeader">

						<h3>Gallery</h3>
						<div class="muted">Quick Links</div>
					</div>
					<ul class="secondaryContent blockLinksList">
						<li><a href="index.php?gallery/">Main Gallery</a></li>
						<li><a href="index.php?gallery/">Your Gallery</a></li>
					</ul>

				</div>
			</li>
 

Jake Bunce

XenForo moderator
Staff member
#3
EDIT: Also how do i make it so that only a certain group can posts threads in a certain area. But other members can reply to those threadS?
Enable this option:

Admin CP -> Applications -> Display Node Tree -> Permissions -> Private node

Now you can specify Allowed permissions for the groups under that node. The Private node option disables all permissions such that you only need to specify Allowed permissions.
 
#4
This post shows all of the navbar colors:

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

To change only one nav tab you can add CSS to this template:

Admin CP -> Appearance -> Templates -> EXTRA.css

For example, add this code to change the text color of a tab when it's not selected:

Code:
.navTabs .navTab.tabID.PopupClosed .navLink
{
color: red;
}
The tabID is in the source code of the page, for example:

Code:
<li class="navTab gallery Popup PopupControl PopupClosed">
 
<a href="index.php?gallery/" class="navLink">Gallery</a>
<a href="index.php?gallery/" class="SplitCtrl" rel="Menu"></a>
 
<div class="Menu JsOnly tabMenu">
<div class="primaryContent menuHeader">
 
<h3>Gallery</h3>
<div class="muted">Quick Links</div>
</div>
<ul class="secondaryContent blockLinksList">
<li><a href="index.php?gallery/">Main Gallery</a></li>
<li><a href="index.php?gallery/">Your Gallery</a></li>
</ul>
 
</div>
</li>
I want text diff colour, not button.
 

Jake Bunce

XenForo moderator
Staff member
#7
Admin CP -> Appearance -> Templates -> EXTRA.css

Not selected:

Code:
.navTabs .navTab.forums.PopupClosed .navLink
{
	color: red;
}
Selected:

Code:
.navTabs .navTab.forums.selected .navLink
{
	color: red;
}
 

Jake Bunce

XenForo moderator
Staff member
#11
It works on my test forum.

Try adding !important:

Code:
.navTabs .navTab.forums.PopupClosed .navLink
{
	color: red !important;
}
Code:
.navTabs .navTab.forums.selected .navLink
{
	color: red !important;
}
 

Jake Bunce

XenForo moderator
Staff member
#18
The Donate tab doesn't have it's own class, so first you need to edit the navigation template and give it a class name:

Code:
		<li class="navTab donate PopupClosed" style="text-color: #008000"><a href="http://digitalforgeonline.com/index.php?wiki/donate-now/" class="navLink">Donate</a></li>
Then add CSS to EXTRA.css:

Code:
.navTabs .navTab.donate.PopupClosed .navLink
{
	color: red !important;
}
Code:
.navTabs .navTab.donate.selected .navLink
{
	color: red !important;
}