Changing or removing the seemingly unchangeable options in SharePoint Online (Office 365) Site Actions

This is a follow-up post to one with an eerily similar title, Changing or removing the seemingly unchangeable options in SharePoint 2013 Site Actions, and I am betting that you cracked the code for what this post will address… how to do the same thing for SharePoint Online.  🙂

I won’t go through the introduction again, you can read that here. Instead this post will just provide the code for the SharePoint Online solution.

Editing the Menu Item Text

The source code for SharePoint Online is different than SharePoint 2013 on-premises but the concept from the original post remains the same. The text is wrapped in a SPAN tag, which is then wrapped in an anchor tag which is finally wrapped in a DIV tag. Here is the source code for Edit Page in the Site Actions drop down menu:

<div tabindex="0" class="_fce_w ms-font-s ms-fwt-sl" aria-selected="true">
	<a class="o365button o365cs-contextMenuItem ms-fcl-b o365cs-contextMenuItemHover ms-bgc-nl" role="link" href="javascript:SuiteOnClick(&quot;if \u0028document.forms[\u0027aspnetForm\u0027][\u0027MSOLayout_InDesignMode\u0027] != null\u0029 document.forms[\u0027aspnetForm\u0027][\u0027MSOLayout_InDesignMode\u0027].value = 1;if \u0028document.forms[\u0027aspnetForm\u0027][\u0027MSOAuthoringConsole_FormContext\u0027] != null\u0029 document.forms[\u0027aspnetForm\u0027][\u0027MSOAuthoringConsole_FormContext\u0027].value = 1;if \u0028document.forms[\u0027aspnetForm\u0027][\u0027MSOSPWebPartManager_DisplayModeName\u0027] != null\u0029 document.forms[\u0027aspnetForm\u0027][\u0027MSOSPWebPartManager_DisplayModeName\u0027].value = \u0027Design\u0027;__doPostBack\u0028\u0027ctl05\u0027,\u0027edit\u0027\u0029&quot;)" id="O365_SubLink_SuiteMenu_ctl00_SiteActionsMenuMainData_ctl00_wsaEditPage" aria-label="Edit page">
		<div class="_fce_D">
			<span class="owaimg _fce_E" style="display: none;"> </span>
			<span autoid="_fce_9" aria-label="Edit page">Edit page</span>
		</div>
	</a>
</div>

The DIV tag doesn’t have anything unique, so we will ignore it. The anchor has classes, but they are used for every navigation item rendering them useless for our cause. But the anchor does have a unique HREF, ID and ARIA-LABEL, giving us several choices for targeting. I can use any of those in an attribute selector to either hide the item completely, or hide the item and show a different text/icon in its place.

Another challenge that isn’t immediately apparent: there is a display property added by SharePoint for the anchor.

.o365cs-nav-contextMenu .o365cs-contextMenuItem, 
.o365cs-nav-contextMenu .o365cs-contextMenuInactiveItem {
	box-sizing: border-box;
	display: block;
	font: 15px "SegoeUI-Regular-final","Segoe UI","Segoe UI WPC",Segoe,Tahoma,Helvetica,Arial,sans-serif;
	outline-offset: -1px;
	padding: 10px 30px;
	text-align: left;
}

This code will just make our own CSS selectors a little longer.

Code Bits for Each Menu Item (SharePoint Online)

Here are the code bits to do both of these actions (hide or update the text for something new) for all four Site Actions menu items that can be removed via master page changes. Note that the code for team site’s “Getting Started” is slightly different due to ID clashes with the Edit Page option in the Site Actions menu. If you need the code for SharePoint 2013 on-premises, please grab that here.

/* --- Edit Page --- */
	/* Hide default label */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[id$="EditPage"] span {
	  display: none;
	}
	/* Insert new label text - does not support localization */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[id$="EditPage"]:before {
	  content: "Modify this page";
	}

	/*  --  OR -- */

	/* Hide menu item */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[id$="EditPage"] {
	  display: none;
	}

/* --- Add a Page --- */
	/* Hide default label */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[id$="CreatePage"] span {
	  display: none;
	}
	/* Insert new label text - does not support localization */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[id$="CreatePage"]:before {
	  content: "Add new web page";
	}

	/*  --  OR -- */

	/* Hide menu item*/
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[id$="CreatePage"] {
	  display: none;
	}

/* --- Design Manager --- */
	/* Hide default label */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[id*="DesignEditor"] span {
	  display: none;
	}
	/* Insert new label text - does not support localization */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[id*="DesignEditor"]:before {
	  content: "Edit site branding";
	}

	/*  --  OR -- */

	/* Hide menu item */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[id*="DesignEditor"] {
	  display: none;
	}

/* --- Getting Started --- */
	/* Hide default label */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[aria-label*="Getting started"] span {
	  display: none;
	}
	/* Insert new label text - does not support localization */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[aria-label*="Getting started"]:before {
	  content: "Customize this site";
	}

	/*  --  OR -- */

	/* Hide menu item */
	.o365cs-nav-contextMenu .o365cs-contextMenuItem[aria-label*="Getting started"] {
	  display: none;
	}

That’s it! There is no need to remove any extra lines with Getting Started that happens with SharePoint 2013 on-premises.