SharePoint 2010 Ribbon tab colors

So I’ve got myself this nifty new design for a client’s SharePoint 2010 site.  I’ve changed the background of the ribbon from the original navy blue to a very light color.  Everything looks great … that is until I try to edit text or something within the page.  Then the editing tabs look like this:

Light Colored Text on Tab

And after about 15 minutes of frustrating attempts to figure out the style with IE developer toolbar, I went to the trusty Firebug and got them. Turns out Microsoft has named these according to color.

Orange tabs

.ms-cui-cg-or .ms-cui-cg-t

Green tabs

.ms-cui-cg-gr .ms-cui-cg-t

Magenta tabs — although I think it’s more of a fushia, IMO

.ms-cui-cg-mg .ms-cui-cg-t

Yellow tabs

.ms-cui-cg-yl .ms-cui-cg-t

Purple tabs

.ms-cui-cg-pp .ms-cui-cg-t

After tweaking my styles slightly to have the tab headers appear on my lighter background, I now have this:

Darker Text on Ribbon Tab

Happy Branding!

Advertisement