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
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:
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:
That's all. The Site Actions menu should now have a text "My Actions".
In order to change the color of the text "Site Actions" (or any custom text) add additional line of jQuery code:
2 comments on "Change the Site Actions menu text in SharePoint 2010"
Posted Thursday, January 03, 2013 by Umar
Hi, How can i change the fore color of text 'site action' ?
Posted Tuesday, February 12, 2013
It's a matter of changing the CSS style. Look at the update to the post.