Change the color

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.webp
 
The upper navigation bar takes the colour of @primaryDark

The lower navigation bar @primaryLightish

The links @primaryLighter
 
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/
 
but where do I exactly go to edit this?

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

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";
				
			}
 
Top Bottom