SharePoint ribbon headers—A quick branding tip

By Ryan Keller

September 20, 2011 — Here’s a quick branding tip about styling the SharePoint ribbon group headers.

In the out-of-the-box v4.master master page, the SharePoint 2010 ribbon is a dark blue color, and unselected ribbon tabs stand out just fine against the dark background, like so:

But what if you have custom branding that calls for a very light background color in the ribbon? You might end up with something like this:

Kind of hard to read, wouldn’t you say?

There are eight different colors used for the ribbon header groupings:
• Orange (Editing Tools, Media groups)
• Light Blue (List Tools group)
• Dark Blue (Library Tools group)
• Teal (Table Tools group)
• Green (Links group)
• Magenta (Picture Tools group)
• Yellow (Page Tools group)
• Purple (Web Part Tools group)

To fix this little annoyance, all you need to do is override the CSS classes from corev4.css to set the header text to whatever color you’d like the unselected state to be. Here are the classes for each color:

Orange: .ms-cui-cg-or, .ms-cui-cg-t
Light Blue: .ms-cui-cg-lb, .ms-cui-cg-t
Dark Blue: .ms-cui-cg-db, .ms-cui-cg-t
Teal: .ms-cui-cg-tl, .ms-cui-cg-t
Green: .ms-cui-cg-or, .ms-cui-cg-t
Magenta: .ms-cui-cg-mg, .ms-cui-cg-t
Yellow: .ms-cui-cg-yl, .ms-cui-cg-t
Purple: .ms-cui-cg-pp, .ms-cui-cg-t

Simply change the color attribute to your desired color and your ribbon becomes instantly more readable! In the example below, all the group headers are set to the same color, but you could have each grouping header be its own separate color if you wanted.

There, much better!

Ryan Keller is a consultant with SharePoint911.

Share this link: https://sptechweb.com/link/35928

Customizing SharePoint Online Using SharePoint Designer, Part 1 Once you get a handle on SharePoint Online, the question becomes: How can I modify it to suit my needs. First of two parts.

A SharePoint Marketplace This startup will be providing templates at first, and a community will be built in for better feedback collection

New SharePoint Web Part Builds Forms Simple drag-and-drop approach to creating forms aims to eliminate the need for custom coding, Designer and InfoPath

Add comment

Name*
Email*
Country

Comment
Preview

SharePoint ribbon headers—A quick branding tip

By Ryan Keller

Related Articles

Add comment