SharePoint 2010: Styling the Site Actions Menu Items

I spent a whole frustrating day trying to find what styles change the hover state of the Site Actions Menu items in SharePoint 2010. I finally found a blog post that had a trick for how to get the Site Actions Menu to display on screen so that you can explore the html output in Firebug. Because the menu is generated by JavaScript, and is called by an onClick event, the menu never gets displayed in a way that you can explore in Firebug. The trick is to find the onClick event code, copy it, change the event to null, and then paste into the console-this causes the menu to display on screen and allows you to explore the menu code. The trick is fully explained here: http://blogbaris.blogspot.com/2011/03/how-to-style-sharepoint-site-actions.html

What I wanted to do is to simply remove the default hover styling from the menu items and apply my own. I was finally able to change the hover states with this code:

/* Site Actions Menu Items: changes the hover background of menu items */
div.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner ul.ms-MenuUIUL div.ms-MenuUIULItemHover
{
border-color:#274E61;
background-image:none;
background-color:#F7E6D7;
}

It is easier to change the Site Actions menu button since it displays on screen without JavaScript. I used the following code:

/* Site Actions Menu button: change hover background of Site Actions button */
.ms-siteactionsmenuhover{
border-color:#274E61 !important;
background-image:none !important;
background-color:#478eaf !important;

}

/* Site Actions Menu Button: removes the border from the button in the off state */
.ms-siteactionsmenu {
border-color:none !important; 
}

All of these code changes produced this:
Site Actions Menu

NOTE: The code above will change the hover state for not only the Site Actions menu items, but also the Welcome menu items and the list item drop menu items.

Advertisements

3 thoughts on “SharePoint 2010: Styling the Site Actions Menu Items

  1. I double checked on the style for the menu items hover and it seems you are missing a part of the selector? I had to add a.ms-MenuUIULLink to the end of the selector line and it rendered correctly for me.

    • It’s been awhile since I wrote that post, but I think that the code I posted was what I used. SharePoint is a tricky beast, it amazes me that things that work for some people don’t work for others. I have followed other peoples tutorials and have had wacky results myself sometimes. When I get a chance I will go over this code again and will post any updates needed.

  2. The same for the Site Actions menu button itself, the correct class to use is ms-siteactionsmenuinner, where I removed the background image and changed the background color.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s