Change the color scheme

The current color of the Admin bar is gray gradient. However, you can change the color to match your brand colors.

The style of the Admin bar is defined in the stylesheet.css located in extension/resources/src/main/webapp/skin/platformSkin/UIToolbarContainer.

Edit this CSS file to customize the Admin bar to your preferred color scheme.

The CSS code below shows how to modify the Admin bar to look like this:

.UIWorkingWorkspace #UIToolbarContainer .HomeLinkTDContainer {
	line-height: 31px;
    margin: 0px 5px;
    vertical-align: middle;
}

.UIWorkingWorkspace .UIToolbarContainer .ToolbarContainer {
	/*background: url(background/BgToolbarContainer.gif) repeat-x left top;*/
	height: 31px;
	border: none;
}

.UIWorkingWorkspace .UIToolbarContainer .ToolbarContainer .UITab .MenuItemContainer .MenuItem a {
	padding: 0 22px 0 22px;
	font-size: 12px!important;
	color: #4c4c4c;
	display: block;
	font-weight: normal;
	white-space: nowrap;
}

.UIToolbarContainer .ToolbarContainer .PinLink {
    padding: 0px;
}

.UIWorkingWorkspace .UIToolbarContainer .ToolbarContainer a.TBIcon {
	/*color: #2f3334;*/
	font-weight: normal;
	padding: 0 20px;
	display: block;
	white-space: nowrap;
	background: none;
	margin-left: 0;
	zoom: 1;
	font-size:14px!important;
	font-family: verdana;
	border: 1px solid transparent;
	border-bottom: none;
	line-height: 29px;
	height: 29px;
}

.UIWorkingWorkspace .UIToolbarContainer .ToolbarContainer a.SetupMenuItem  {
	padding: 0 8px;
	line-height:25px;
 }