SharePoint 2010 Branding: Site Actions Menu Styling

You can customize the Site Actions menu styling by overriding a few rules from the COREV4.css.

We will customize the menu item hover background, link colors and the menu border color.

The original style
The original style

The code:

/*site actions hover */
div.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner ul.ms-MenuUIUL div.ms-MenuUIULItemHover {
 background-color:#dcdcdc;
 border-color:#E0E0E0;
}

/* site actions link color */
div.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner div.ms-MenuUILarge ul.ms-MenuUIUL div.ms-MenuUIULItem a.ms-MenuUIULLink,
div.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner div.ms-MenuUILargeRtL ul.ms-MenuUIUL div.ms-MenuUIULItem a.ms-MenuUIULLink {
 color: #28387E !important;
}

div.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner ul.ms-MenuUIUL div.ms-MenuUIULItemHover a.ms-MenuUIULLink {
 color:#000 !important;
}

/* menu borders */
.ms-MenuUIPopupBody {
 border-color:#E0E0E0 !important;
}

/* menu borders - inner */
div.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner ul.ms-MenuUIUL {
 border-color:#f8f8f8 !important;
}

After implementing the code above:

Dércia Silva
Posted by Dércia Silva on August 21, 2013

Related articles