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
/* Site Actions Menu button: change hover background of Site Actions button */
/* Site Actions Menu Button: removes the border from the button in the off state */
All of these code changes produced this:
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.
There are several ways that you can pursue a branding project with SharePoint 2010. You can use one of the new themes, override existing styles with a new css file, alter an existing masterpage, or go completely custom. For this series of posts I will share how I go about altering an existing masterpage and styles.
Make a copy of the v4.master
Open the v4.master in Designer and do a save as. Save the new file as something different, such as custom.master, and then open it in Designer. Make sure the file is checked out before you start editing it.
Create a custom css file
Create a new css file and save it to a location that makes sense to you. You can save it to the Styles library, or on the server in the 14 hive, or anywhere that is accessible.
Create a changes.txt file
Use this file to record changes made to the masterpage as well as to paste in any controls that have been removed from the masterpage.
Link to the new css file in your copy of the masterpage:
Paste the following code into the HEAD of the masterpage and change the link to refer to your custom css file:
<!-- custom css -->
<SharePoint:CssRegistration name="http://spimages.stei.com/sp2010/styles_senet03.css" After="corev4.css" runat="server"/>
This code assures that your custom styles will always be able to override the corev4 styles.
Apply your custom masterpage to a site
Right-click on the new masterpage and select Set as Default Masterpage. You will only be able to preview fully your masterpage changes if the custom masterpage is applied to a site. Make sure that after each change you save the masterpage, check it in and then approve it. Make sure to check the file out before editing it again.
Now you can start altering the masterpage and overriding the css.
This is a quick tip if you want to easily override some css or hide some elements on a specific page, using JQuery is really easy and it works well. Of course, the example below is overkill as you can easily use css to do the same thing, I am simply showing that it is possible.
1: make sure you have a link to JQuery in your master page in the HEAD:
2: add a content editor web part to the page you wish to alter
3: use the css() method to target any html tag, css class or id
Say you want to hide the quicklaunch on a page. Use the IE Developer tools to inspect the page and find the outer wrapper for the quicklaunch (.ms-quicklaunchouter). Now add the following code to your content editor web part in code view:
The area where the .ms-quicklaunchouter is displaying is where you would reference any html tag, ID, or class. ‘Display‘ is where you reference the property, and ‘none‘ is where you reference the value. With this one method you can override pretty much anything on your site.
If you want to override a style across your site collection, create a functions.css file, link it to your masterpage under the initial JQuery link, and put all of your functions there.