SharePoint 2010 Branding: How to Style the Ribbon's Context Menus

The Ribbon has a number of context menus that are activated when different elements are being edited. Each context menu has a different color you might want to customize to match your design or even have them all use the same color. Here's how that's done.

Each different context menu has a different main class associated to it that defines the color it will take. See the table bellow for the full list of classes, the colors these classes will translate to and the context where these menus show up.

After going through the COREV4.css file I was able to pull out all the rules that apply to the context menu. In the code bellow I set all the context menus with the same style (all in a shade of gray). If you want to change the styles individually for each context menu you'll have to separate all the rules, you can guide yourself using the base class indicated in the previous table.

.ms-cui-cg-db .ms-cui-cg-t,
.ms-cui-cg-lb .ms-cui-cg-t,
.ms-cui-cg-tl .ms-cui-cg-t,
.ms-cui-cg-or .ms-cui-cg-t,
.ms-cui-cg-gr .ms-cui-cg-t,
.ms-cui-cg-mg .ms-cui-cg-t,
.ms-cui-cg-yl .ms-cui-cg-t,
.ms-cui-cg-pp .ms-cui-cg-t {
    background: #d7d7d7 !important;
}

.ms-cui-cg-db .ms-cui-cg-i,
.ms-cui-cg-lb .ms-cui-cg-i,
.ms-cui-cg-tl .ms-cui-cg-i,
.ms-cui-cg-or .ms-cui-cg-i,
.ms-cui-cg-gr .ms-cui-cg-i,
.ms-cui-cg-mg .ms-cui-cg-i,
.ms-cui-cg-yl .ms-cui-cg-i,
.ms-cui-cg-pp .ms-cui-cg-i{
    border-color: #d7d7d7 !important;
}

.ms-cui-cg-db .ms-cui-ct-first .ms-cui-tt-a,
.ms-cui-cg-lb .ms-cui-ct-first .ms-cui-tt-a,
.ms-cui-cg-tl .ms-cui-ct-first .ms-cui-tt-a,
.ms-cui-cg-or .ms-cui-ct-first .ms-cui-tt-a,
.ms-cui-cg-gr .ms-cui-ct-first .ms-cui-tt-a,
.ms-cui-cg-mg .ms-cui-ct-first .ms-cui-tt-a,
.ms-cui-cg-yl .ms-cui-ct-first .ms-cui-tt-a,
.ms-cui-cg-pp .ms-cui-ct-first .ms-cui-tt-a {
    border-left-color: #d7d7d7 !important;
}

.ms-cui-cg-db .ms-cui-ct-last .ms-cui-tt-a,
.ms-cui-cg-lb .ms-cui-ct-last .ms-cui-tt-a,
.ms-cui-cg-tl .ms-cui-ct-last .ms-cui-tt-a,
.ms-cui-cg-or .ms-cui-ct-last .ms-cui-tt-a,
.ms-cui-cg-gr .ms-cui-ct-last .ms-cui-tt-a, 
.ms-cui-cg-mg .ms-cui-ct-last .ms-cui-tt-a,
.ms-cui-cg-yl .ms-cui-ct-last .ms-cui-tt-a,
.ms-cui-cg-pp .ms-cui-ct-last .ms-cui-tt-a {
    border-right-color: #d7d7d7 !important;
}

.ms-cui-cg-db .ms-cui-tt-a:hover,
.ms-cui-cg-lb .ms-cui-tt-a:hover,
.ms-cui-cg-tl .ms-cui-tt-a:hover,
.ms-cui-cg-or .ms-cui-tt-a:hover,
.ms-cui-cg-gr .ms-cui-tt-a:hover,
.ms-cui-cg-mg .ms-cui-tt-a:hover,
.ms-cui-cg-yl .ms-cui-tt-a:hover,
.ms-cui-cg-pp .ms-cui-tt-a:hover
.ms-cui-cg-gr .ms-cui-tt-a:hover {
    background: #F2F2F2 !important;
    border-color: #d7d7d7 !important;
    border-top-color: #d7d7d7 !important;
}

.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a {
    border-left-color: #d7d7d7;
    border-right-color: #d7d7d7;
}

.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-ul,
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-ct-ul,
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-ct-ul,
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-ct-ul,
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-ul,
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-ct-ul,
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-ct-ul,
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-ct-ul, 
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-ul {
    background-color: #d7d7d7;
    border-color: #d7d7d7;
}

.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-tt-a, 
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a {
    background: #F2F2F2 ;
}

.ms-cui-cg-db .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-lb .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-tl .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-or .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-gr .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-mg .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-yl .ms-cui-tt-s .ms-cui-tt-a,
.ms-cui-cg-pp .ms-cui-tt-s .ms-cui-tt-a, 
.ms-cui-cg-gr .ms-cui-tt-s .ms-cui-tt-a {
    background-color: #fff ;
}

.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-tt-a,
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-tt-a, 
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a {
    border-color: #d7d7d7;
}

.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-a:hover,
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-tt-a:hover,
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-tt-a:hover,
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-tt-a:hover,
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a:hover,
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-tt-a:hover,
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-tt-a:hover,
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-tt-a:hover, 
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a:hover {
    background-color: #F2F2F2 !important;
    border-color: #d7d7d7;
    color: #FF6600 !important;
}

.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover,
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover,
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover,
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover,
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover,
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover,
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover,
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover, 
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover {
    background-color: #F2F2F2 !important;
    border-color: #d7d7d7;
}

.ms-cui-cg-db .ms-cui-tt-a:hover,
.ms-cui-cg-lb .ms-cui-tt-a:hover,
.ms-cui-cg-tl .ms-cui-tt-a:hover,
.ms-cui-cg-or .ms-cui-tt-a:hover,
.ms-cui-cg-gr .ms-cui-tt-a:hover,
.ms-cui-cg-mg .ms-cui-tt-a:hover,
.ms-cui-cg-yl .ms-cui-tt-a:hover,
.ms-cui-cg-pp .ms-cui-tt-a:hover, 
.ms-cui-cg-gr .ms-cui-tt-a:hover {
    border-color: #d7d7d7;
    border-top-color: #d7d7d7;
    background: #F2F2F2;
}

.ms-cui-ct-topBar-db, .ms-cui-tabBody-db,
.ms-cui-ct-topBar-lb, .ms-cui-tabBody-lb,
.ms-cui-ct-topBar-tl, .ms-cui-tabBody-tl,
.ms-cui-ct-topBar-or, .ms-cui-tabBody-or,
.ms-cui-ct-topBar-gr, .ms-cui-tabBody-gr,
.ms-cui-ct-topBar-mg, .ms-cui-tabBody-mg,
.ms-cui-ct-topBar-yl, .ms-cui-tabBody-yl,
.ms-cui-ct-topBar-pp, .ms-cui-tabBody-pp,
.ms-cui-ct-topBar-gr, .ms-cui-tabBody-gr {
    border-color: #d7d7d7 !important;
}

.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-cg-t {
    color: #666;
}