SharePoint Ribbon CSS Tips and Tricks

This is the fifth post in a SharePoint 2010 ribbon series.  Be sure to check out posts 1 through 4 as well:

1) Boil it down to the basics… the SharePoint 2010 ribbon
2) Gathering requirements for your ribbon needs
3) The Docked Ribbon
4) Ribbon visibility using CSS

It is no secret that I have a thing for CSS.  There is nothing like adding a few lines of code and seeing things instantly change before your eyes. I may be overly romanticizing CSS but hey, I will take what I can get when it comes to changing up SharePoint.  Keeping up the spirit of ribbon modification for this series, here are some quick SharePoint ribbon CSS tips and tricks that you can do with the your sites.  If you are feeling the need for more CSS love, check out the ribbon section of my SharePoint 2010 CSS Chart.  

Hide the ribbon when not in use

This is a duplicate from the last post but worth mentioning again.  To hide the ribbon when it is not actively being used, add this style statement to your CSS file:

.s4-ribbonrowhidetitle {
	display: none;
}

Change the blue background bar

If the navy blue going across the top of the browser in the default SharePoint branding isn’t rocking your world, you can update it quickly using this style statement:

body #s4-ribbonrow {
	background-color: gray;
}

Change the background color at the top of the page

As a side note, if you have gradient issues pop up, you can use this to remove the default gradient image:

body #s4-ribboncont {
	padding:0px;
	background:black url("/_layouts/images/bgximg.png") repeat-x 0px -30px;
}

Sometimes this haunts me, other times not so much.

Change the ribbon bar color

The ribbon bar background can be switched, but I suggest you stick with a light color unless you plan on changing the the font color as well. You can take this to the next level and specify a background image in addition to the background color.

.ms-cui-tabBody{
	background: #ddd;
}

Change the background for the ribbon bar

Modify the Browse tab

The “Browse” tab/button in the top bar doesn’t provide any real functionality. It just toggles the ribbon’s visibility. It can easily be hidden from view.

li.ms-browseTab {
	display: none;
}

Hide the Browse tab

Or it can be highlighted to make it stand out.

.ms-browseTab > a.ms-cui-tt-a {
	background-color:#ddd;
	color:black !important; /* Need !important to override inline style */
}

Highlight the Browse tab

If you want to make it look even, you can highlight both the Browse tab and the Page tab.

.ms-cui-tt > a.ms-cui-tt-a {
	background-color:#ddd;
	color:black !important; /* Need !important to override inline style */
}

Convert Save and Edit icons to text

This next one gets a little fancier. It hides the OOTB Save and Edit icons and replaces it with text.

/* The magic that makes this work */
	.ms-cui-TabRowLeft{
		font-size:11px; /* Sets font size for text replacement in Edit/Save icon*/
	}

/* Hide the OOTB icons */
	a.ms-qatbutton > span{
		display: none !important;  /* Need !important to override inline style */
	}

/* Insert text for Save*/	
	a.ms-qatbutton[title^="Save"]:after {		
		content: "Save Page";	
	}

/* Insert text for Edit*/
	a.ms-qatbutton[title="Edit"]:after {		
		content: "Edit Page";	
	}

/* Shared properties for Save/Edit text */
	a.ms-qatbutton {		
		padding:3px 10px 3px;
		border: 0;
		margin-right: 10px;
	}

/* Save background */
	a.ms-qatbutton[title^="Save"] {		
		background: red;
		color: white;
	}

/* Edit background */
	a.ms-qatbutton[title^="Edit"] {		
		background: green;
		color: white;
	}

Change the Save and Edit icons

Increase height and add rounded corners

I admit at this point I am getting a little hacky, but a girl’s gotta have fun, right? This next one bumps the ribbon in from the edges of the window (the width below can be switched out for a set size instead of the percentage), adds rounded corners and even increases the height when the ribbon is displayed so the background shows all around the ribbon area.

/* Constrict width of ribbon area. This is the second container so the background of first container (#s4-ribbonrow) will still appear 100% width */
	body #s4-ribboncont {
		width: 98%;
		margin: 0 auto;
		background: none;
	}

/* Increase height of ribbon area. This creates a space between the ribbon and the content area */
	body #s4-ribbonrow[class$="s4-pr "]  /* The space after s4-pr is intentional and necessary for this to work */ {
		height: auto !important; /* Need !important to override inline style */
	}

/* Add rounded borders to container around ribbon options */
.ms-cui-tabBody {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

/* Hide default borders on top and bottom of container around ribbon options */
	div[class*="ms-cui-ct-topBar"], 
	ul[class*="ms-cui-tabBody"] {
		border-color: transparent !important; /* !important was present in original SharePoint style statement */
	}

Added space and rounded corners for the ribbon

Alter the tab groups (colored headings above ribbon tabs)

The last style statement (div[class*=”ms-cui-ct-topBar”], ul[class*=”ms-cui-tabBody”]) in the previous example is a little special. The original SharePoint selector is different than what I used. Here is the original:

.ms-cui-ct-topBar-or, .ms-cui-tabBody-or

The “-or” at the end is not universal for all states of the ribbon. As you move within SharePoint (from a list to a library to a publishing page, etc.) the tab group coloring at the top of the ribbon area changes.
Samples of ribbon tab groups

There are 8 different colors used for the various tab groups. And they each have their own special extension in the selector. For the samples in the image above, the selector extensions are:

  • -or : Page editing – orange
  • -db : Library tools – dark blue
  • -lb : List tools – light blue

The extensions are color codes, which is a big no-no when writing CSS class names and IDs. This is a classic case showing why you want to avoid color specific names.  Perhaps your branding needs the ribbon background to be a light blue color, thus making the List Tools light blue background look awful.  The CSS can easily be changed but it will forever be referenced by a color code even though in your branding it may be another color such as green.

To universally change the tab group coloring, if you start with the existing selectors you will be writing a lot of CSS. For example:

.ms-cui-cg-or.ms-cui-cg-s .ms-cui-cg-t,  /* Editing/Publishing (orange) */
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-cg-t,  /* Document Library (dark blue) */
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-cg-t,  /* List (light blue) */
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-cg-t  /* WP Pages (yellow) */
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-cg-t  /* Tables (teal) */
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-cg-t  /* Links (green) */
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-cg-t  /* Pictures (magenta) */
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-cg-t  /* Web parts (purple)  */

This can be rewritten as a catch all by using an attribute selector:

li[class*="ms-cui-cg"].ms-cui-cg-s .ms-cui-cg-t

The following code block changes the tab group heading background color and border color universally for all tab groups used in the ribbon:

/* Upper background of tab group label - Inactive state */
	li[class*="ms-cui-cg"] .ms-cui-cg-t  { 
		color:silver;
		background:none;
		border-bottom: 1px solid #ccc;
	}

/* Upper border of tab group label - Active state */
	li[class*="ms-cui-cg"].ms-cui-cg-s .ms-cui-cg-i{
		border-color:gray;
	}

/* Upper border of tab group label - Inactive state */
	li[class*="ms-cui-cg"] .ms-cui-cg-i,
	.ms-cui-cg {
		border-color: transparent;
	}

/* Upper background of tab group label - Active state */
	li[class*="ms-cui-cg"].ms-cui-cg-s .ms-cui-cg-t {
		background-color:#ccc;
	}

Change the heading of the tab groups

Wrapping up

Hopefully your creative juices are flowing after seeing some things that CSS can do to the ribbon. Be sure to check out the SharePoint 2010 CSS Chart for more selectors that can be used in your custom CSS. Cheers!