Chaks' Corner

In the WCM projects that I am working, the first thing the client says when they see a demo of ‘editing a page’ is - “Why is this Site Actions’ design not in sync with our website design?”

Unlike in Intranet websites, where this doesn’t come to a much concern, it does look odd when you have applied your branding in the SharePoint WCM website.

So, can we customize the look and feel of the Site Actions menu? – Of course, YES!

CSS Styles

If you have IE8 installed, fire up the Developer Tools. I selected the Site Actions menu and here are the styles associated with it

And within minutes I had the necessary CSS styles from the interactive team!

/*SITE ACTIONS*/
div#siteActionsWrapper {
    width: 975px;
    margin: auto;
    overflow: hidden;
}
    table.ms-siteaction {
        float: right;
        }
    .ms-siteactionsmenu div div div {
        margin-top:10px;
    }
    .ms-siteactionsmenu div div div a {
        display: block;
        line-height: 200px;
        overflow: hidden;
        width: 89px;
        height: 28px;
        }
    span#ctl00_siteActionsEditModeControl_authoringcontrols {
        width: 850px; 
        display: block;
    }
    td.ms-siteactionsmenu div div span div img {
        display: none;
    }
	 
.ms-siteactionsmenu div div div {
    background: 
	 transparent url(/_layouts/images/chaks/buttonSiteActions.png) 
	      no-repeat !important;
    border: 1px transparent solid !important;
}

The span#ctl00_siteActionsEditModeControl_authoringcontrols corresponds to the Page editing toolbar. Note the !important  - This overrides the SharePoint styling and applies our style!

Below is the screenshot of the customized Site Actions Menu and Page editing toolbar