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

Change the color

Brogan

XenForo moderator
Staff member
#2
The upper navigation bar takes the colour of @primaryDark

The lower navigation bar @primaryLightish

The links @primaryLighter
 

Brogan

XenForo moderator
Staff member
#4
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/
 

Jake Bunce

XenForo moderator
Staff member
#5
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.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";
				
			}