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

Discussion in 'XenForo Questions and Support' started by DigitalForgeOnline, Feb 11, 2012.

  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?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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>
    
     
    Shelley likes this.
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    Shelley likes this.
  4. I want text diff colour, not button.
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Which text? Can you post a URL or screenshot?
     
  6. In the nav bar where it says Forum, how do i change Forum from White to lets say Green. Not the backrground, just the text of the nav bar link.
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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;
    }
    
     
    Shelley likes this.
  8. How does it determine which nav button it is ?
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The ".forums" part identifies the "Forums" tab.
     
  10. Doesnt work
     
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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;
    }
    
     
  12. Still nothing, do i just add it to the bottum of extra.css ?
     
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Yes. Add it to EXTRA.css.

    If you post your URL then I can take a look.
     
  14. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The CSS code you need to add is not showing up in your stylesheet. Make sure you edited the correct style.
     
  15. Its tehre now, i removed it cause it didnt work
     
  16. It only works on forums

    I want it to work on the custom Donate thing i put in the nav bar.
     
  17. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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;
    }
    
     
  18. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  19. Ok thanks you, and also how do you bold it ?
     

Share This Page