SharePoint 101: Styling the Site Actions menu

This is a quick one… I wanted to share a “SharePoint 101” tip: Styling the Site Actions Menu.

Here’s what i started with–you can tell that the site actions menu (with its Out-Of-The-Box style) wasn’t going to work for me:

siteactions4[1]

I wanted something simpler that matches the “welcome” screen! So for starters, i removed the background from the container div:

.ms-siteactionsmenu div div div{      background:transparent !important; }

Notice the “!important”.  This is so that I can override the inline styles on the control (get ready for a few more of them).  Next I remove the border from this same div:

.ms-siteactionsmenu div div div{                 background:transparent !important;      border:1px solid transparent !important; }

So–Getting Better!

siteactions2[1]

Note that I leave the 1 pixel ‘transparent’ border so that when I show a border on hover I don’t get a funky “resize” behavior.  So, on that note–let’s add the “hover” behavior:

.ms-siteactionsmenu div div div.ms-siteactionsmenuhover{

     background: green !important;

     border:1px solid white !important;

}

 

On hover now looks like this:

siteactions3[1]

Simple and clean! To finish it off, I similarly set the Welcome to the same hover style:

.ms-siteactionsmenu div div div.ms-siteactionsmenuhover, .ms-SpLinkButtonActive{

     background: green !important;

     border:1px solid white !important;

}

siteactions1[1] 

 

Advertisements

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