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:
Dell Software Offers Tips for Empowering Business Users to Embrace DIY SharePoint Customization
A DIY solution enabling users to make their own customizations is crucial to drive SharePoint adoption and strategic projects
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.
New release of AvePoint Meetings takes more steps to end unproductive meetings
AvePoint’s latest release allows business users to control the chaos and further simplify everyday meetings
This site's content Copyright © 1999 - 2014 by BZ Media LLC, All rights reserved.
Legal and Privacy
Phone: +1 (631) 421-4158 • E-mail: