Home > Branding > Changing hover-styles on SharePoint elements

Changing hover-styles on SharePoint elements

This one has caused some headache for me when branding things like the “Site Actions” menu and other hover-over-able elements.  Here’s the technique I use:

  1. Find an element you want to style (in this case, I’ll use the Site Actions Menu)
  2. Select the element with IE Dev Toolbar or Firebug
  3. Get the class or ID name.  The hover equivalent usually has an appended “hover” on the name.  For instance:  .ms-siteactionsmenu = .ms-siteactionsmenuhover
  4. Verify the style name by finding the style in corev4.css… but not modifying corev4.css or bad things will happen!
  5. Add the desired attributes to the new css selector in your overriding style sheet and enjoy =)

Here’s an example:

Siteactions_non-hover

Siteactions_hover

new Siteactions_hover

Normal Site Actions

Normal Site Actions Hover

New Site Actions Hover

In this case, the Site Actions Hover is transparent with my new ribbon style.
Unfortunately, SharePoint doesn’t always utilize the :hover selector.  It does for certain elements..like a:hover…but not always.  For these fringe cases, you can use the above method to change those hovering elements.
Advertisements
Categories: Branding
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: