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

Change the color

Discussion in 'XenForo Questions and Support' started by Kaiser, Dec 3, 2010.

  1. Kaiser

    Kaiser Well-Known Member

    How do I change the color of the links, and the background of both the dark bar and light bar? Capture.PNG
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    The upper navigation bar takes the colour of @primaryDark

    The lower navigation bar @primaryLightish

    The links @primaryLighter
     
  3. Kaiser

    Kaiser Well-Known Member

    but where do I exactly go to edit this?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    In the ACP - > Appearance -> Style Properties -> Color Palette

    Bear in mind that many different components use the same color so changing one will affect other areas of the board.

    If you want to change the colour of a specific element without affecting anything else then you will need to create custom css in EXTRA.css.

    There's a handy color palette guide here: http://xenforo.com/community/threads/colour-palette-guide.6231/
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Just to be a little more explicit if you are having trouble finding it... here are specific instructions for changing the navbar background and font colors.

    Screen shot 2010-12-03 at 10.29.00 AM.png

    Dark Navbar

    You can edit the CSS directly:

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

    The background color is from this code (@primaryDark):

    Code:
    	.navTabs
    	{
    		@property "navTabs";
    		font-size: 11px;
    		background-color: @primaryDark;
    		padding: 0 25px;
    		border: 1px solid @primaryLightish;
    		border-bottom: 1px solid @primaryDarker;
    		border-top-left-radius: 10px;
    		border-top-right-radius: 10px;
    		@property "/navTabs";
    		
    		height: @headerTabHeight;
    	}
    
    The link colors use this code (@primaryLighter, @primaryMedium, and @textCtrlBackground for the different active/hover states):

    Code:
    	/* ---------------------------------------- */
    	/* unselected tab, popup closed */
    	
    	.navTabs .navTab.PopupClosed .navLink
    	{
    		color: @primaryLighter;
    	}
    	
    		.navTabs .navTab.PopupClosed:hover
    		{
    			background-color: @primaryMedium;
    		}
    		
    			.navTabs .navTab.PopupClosed .navLink:hover
    			{
    				color: @textCtrlBackground;
    			}
    

    Light Navbar

    You can edit the CSS directly:

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

    The background color is from this code (@primaryLightish):

    Code:
    /* ---------------------------------------- */
    /* Second Row */
    
    .navTabs .navTab.selected .tabLinks
    {
    	@property "navTabSelected.background";
    	background: @primaryLightish url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x top;
    	@property "/navTabSelected.background";
    	
    	width: 100%;	
    	padding: 0;
    	border: none;
    	overflow: hidden; zoom: 1;	
    	position: absolute;
    	left: 0px;	
    	top: {xen:calc '@headerTabHeight + 2'}px;
    	height: @headerTabHeight;
    	background-position: 0px -@headerTabHeight;
    	*clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
    }
    
    The link colors use this code (@textCtrlBackground, @primaryDark for normal and hover states):

    Code:
    		.navTabs .navTab.selected .tabLinks a
    		{
    			@property "navTabLink";
    			font-size: 11px;
    			color: @textCtrlBackground;
    			padding: 1px 10px;
    			display: block;
    			@property "/navTabLink";
    			
    			line-height: {xen:calc '@headerTabHeight - 6'}px;
    		}
    		
    			.navTabs .navTab.selected .tabLinks a:hover,
    			.navTabs .navTab.selected .tabLinks a:focus
    			{
    				@property "navTabLinkHover";
    				color: @primaryDark;
    				text-decoration: none;
    				background-color: @primaryLighterStill;
    				padding: 0 9px;
    				border: 1px solid @primaryLight;
    				border-radius: 5px;
    				text-shadow: 1px 1px 0px @primaryLightest;
    				outline: 0;
    				@property "/navTabLinkHover";
    				
    			}
    
     
  6. Floris

    Floris Guest

    Geesh Jake, can your support be any better? lol :) *watches thread as a resource*
     
  7. Kaiser

    Kaiser Well-Known Member

    Haha I agree.
     
  8. Main Company

    Main Company Active Member

    Just took a stab at it... varying shades of gray. Not bad. Thanks for the instruction.
     

Share This Page