Posted on Oct 12, 2011

At first, let's have a look at the HTML code generated on a SharePoint page (event handlers, styles, and other attributes omitted for clarity):

<span id="zz11_SiteActionsMenu_t" class="ms-siteactionsmenuinner">
    <a id="zz11_SiteActionsMenu" class="ms-menu-a">
        <span>Site Actions</span>
        <img src="/_layouts/images/blank.gif" />
    </a>
    <span class="s4-clust ms-viewselector-arrow">
        <img src="/_layouts/images/fgimg.png" />
    </span>
</span>

It may seem that all what we need to do is to reference the zz11_SiteActionsMenu anchor tag and change its innerHtml attribute. Unfortunately, this solution is not reliable. The ID of the anchor tag may change next time the page is rendered, for example to zz3_SiteActionsMenu.

Well, if this approach does not work, how about referencing the anchor tag by its class name "ms-menu-a"? This would work fine if the anchor was the only element on the page that uses this style. It happens that there are more elements that use "ms-menu-a" such as the Welcome menu (i.e. the drop down list located in the right-top corner of the SharePoint page).

A solution is to combine two classes: the parent's class "ms-siteactionsmenuinner" and the anchor's class "ms-menu-a" and use them to identify the anchor. CSS brings a convenient syntax for that:

span.ms-siteactionsmenuinner > a.ms-menu-a

This uniquely identifies the anchor tag. All what we need to do is to create a piece of JavaScript code (using jQuery) to actually change the text.

At first, let's insert a reference to the jQuery library in the header of our master page. For example, the following line references jQuery from a Microsoft server:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

Next, let's write a piece of jQuery code that references the anchor tag and replaces its innerHtml with "My Actions". We can insert this piece of code at the end of our master page:

<script language="JavaScript"> 
$(document).ready(function () 
{
     $("span.ms-siteactionsmenuinner > a.ms-menu-a").html("My Actions");
}); 
</script>

That's all. The Site Actions menu should now have a text "My Actions".

UPDATE:
In order to change the color of the text "Site Actions" (or any custom text) add additional line of jQuery code:

<script language="JavaScript"> 
$(document).ready(function () 
{
     $("span.ms-siteactionsmenuinner > a.ms-menu-a").html("My Actions");
     // change the fore color of the text "Site Actions" to red
     $("span.ms-siteactionsmenuinner > a.ms-menu-a").css('color', 'red');
}); 
</script>

2 comments on "Change the Site Actions menu text in SharePoint 2010"

  1. Posted Thursday, January 03, 2013 by Umar

    Hi, How can i change the fore color of text 'site action' ?

  2. Posted Tuesday, February 12, 2013

    Hi Umar,
    It's a matter of changing the CSS style. Look at the update to the post.