in SharePoint, SharePoint 2007

Customizing the Site Actions menu

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!



div#siteActionsWrapper {
    width: 975px;
    margin: auto;
    overflow: hidden;
} {
        float: right;
    .ms-siteactionsmenu div div div {
    .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;
    } div div span div img {
        display: none;

.ms-siteactionsmenu div div div {
	 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


Write a Comment