Tuesday, July 8, 2014

Master Page Customization to remove page elements

SharePoint 2013
Remove Site Actions Cog, Side Nav, Top Nav, Search box, etc..



Purpose


This post describes the process necessary to modify a custom master page in order to hide various page elements from the end user.  This has a number of uses, particularly surrounding custom elements and list forms.
By default, SharePoint includes all side navigation, office ribbon, and other navigation and functional elements on all list item forms (create, update, view…).  However, in some cases, we want the end users to focus specifically on the information in the form and not be permitted to navigate away.  This is particularly true for a disclaimer page, where you have a list of people signing up for a service or a event, and they need to “Agree” to a list of conditions and caveats.  On this page, we want the user to focus on the agreement language and accepting the terms and conditions, without the noise and alternative tools and navigation provided by default.
This approach can be used for any page type of course, not just list forms.
The approach used here is creating a copy of the default master page and “hiding” various elements that we don’t wish to be included.  Other approaches include:
1.       Creating javascript code hidden within a content editor web part that, when the page loads, it runs and “hides” the various elements using css call.

2.       Creating a custom page that does not use the master page.
The approach used here has the advantage of re-use.  That is, once you create the custom master page and remove the desired elements, you can use that same master page for other site pages, so that multiple list forms and other pages use this same master page without modification.

Create Custom Master Page


These steps take you through the creation of a custom master page based on your current sites default master page.

1.       Open SharePoint designer, open the site that hosts the page(s) you wish to change.

2.       Navigate to the “Master Pages” site object in designer.

3.       Determine the default master page used for your site.  In SharePoint 2013, it is usually “seattle.master”.  This can be confirmed by right clicking on the master page.  If the item “Set as default master page” is grayed out, then this is the default master page:




4.       Right click on the Master Page and choose “Copy”.

5.       Right click on a blank area of the master page screen and choose “Paste”.

6.       Rename the master page you chose with a descriptive name, such as “seattle_no_nav.master”.

Link to Custom Master Page


This step updates the link in your SharePoint site page (including list forms) to use the custom master page.

1.       Open your page in SharePoint designer, choose “Advanced Mode” editing to allow us to modify the page markup.

2.       Locate the element “MasterPageFile” in one of the top tag elements in your page.

3.       Delete the link for the current master page (~masterurl/default.master).  Note that there is actually no file called “default.master”.  SharePoint takes this value and converts it to the default master page at run time (in our case, Seattle.Master).

4.       Remove the quotation marks, then add the first quotation mark for the link.  This should bring up the “Pick URL” button:



5.       Browse to your new master page file.  It is normally located in the “_catalogs” folder, here is my complete URL:
MasterPageFile="../../_catalogs/masterpage/seattle_No_Nav.master"

6.       Save your changes to the page, and open the page in SharePoint.  There should be no change to the appearance of the page, as we are using an identical master page.  If the page resolves then it is working, if not, tweak the URL to the master page until it does.

Hide Page Elements


Once you have created a new master page and linked to it on your specific page, you can make edits to the new master page that will hide elements on your page.
The process for updating the master page is as follows:
1.       Have the master page opened in edit mode within SharePoint Designer.

2.       Determine the element(s) you wish to hide.

3.       Cross reference with the table below to determine the corresponding element in the master page to modify.

4.       Update the element in the master page with the visible=”false” configuration element.  Here is an example that hides the left navigation:
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server" Visible="false">

5.       Save your master page, and refresh your new page in SharePoint.  The element you hid should now be missing from the page.

6.       Repeat 4 and 5 for each element you wish to hide.

Element Componet Mapping Table


Component Image
Component Name
Master Page Tag set to visible=”false”

Side Navigation
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server" Visible="false">

Office Ribbon
<SharePoint:AjaxDelta id="DeltaSPRibbon" BlockElement="true" runat="server"  visible="false">



Site Actions Cog
<SharePoint:SiteActions runat="server" accesskey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain"
PrefixHtml=""
SuffixHtml=""
ImageUrl="/_layouts/15/images/spcommon.png?rev=23"
ThemeKey="spcommon"
MenuAlignment="Right"
MenuNotVisibleHtml="&amp;nbsp;"
LargeIconMode="false"
visible="false"    >
 

Help
<SharePoint:ThemedClusteredHoverImage
runat="server"
ID="TopHelpLink”
visible="false"

Search this Site
<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" visible="false"/>
 

Home and Edit Links links
<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server" Visible="false">