Skip Ribbon Commands
Skip to main content
Sign In
SharePoint Program Manager, Infrastructure
Zach Rosenfield's SharePoint Blog > Posts > SharePoint 101: Styling the Site Actions menu
March 13
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:

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!

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:

 

 

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;

}

 

Comments

nice

good tip thanks!
 on 4/15/2009 11:20 AM

Excellent tip!

Thank you Zach for sharing this tip with the community!
 on 7/8/2009 8:36 AM

Genuine viewpoint

I admit, I have not been on this webpage in a long time... however it was another joy to see It is such an important topic and ignored by so many, even professionals.,
http://www.multiplayer-.net
 on 7/23/2009 12:10 AM

Very close to what I am looking for.

Thanks for sharing Zach. Now, what about changing the "white down triangle"? (similar to your black down triangle next to your name - i.e. - to keep them consistent)

How does one go about doing that? There appears to be some OOTB controls, and in our implementation - a reference to menudark.gif (I have the black triangle - and want to implement a white triangle on a black background).

I was looking for a CSS ID (or class) to override, but am unsure where that lives.

Thanks in advance for continuing the discussion.

//Mark
 on 12/8/2009 2:10 PM

RE: Very close to what I am looking for.

I'm actually pretty sure that is not possible in SharePoint 2007 (but i do know it definitely IS possible in 2010!).

Sorry!
Zach RosenfieldNo presence information on 12/28/2009 1:41 PM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Comments *


Name (required) *


Human Test


Checking if you're human: enter "1234" (no quotes)

Attachments