By default, SharePoint has a large number of SharePoint-specific controls and content zones added to each master page. SharePoint requires most of these controls in order to work correctly. When removing an undesirable control from the master page, we generally hide the control rather than removing it completely. This ensures SharePoint has access to the control, but does not render it to the end user.
Many of the controls included on the SharePoint master pages are required for the page to render correctly. When removing a control we can test whether it can be removed completely. If the page generates errors about the missing control, we know we need to hide it instead of removing it completely.
In this recipe, we will hide the suite bar branding (SharePoint or Office 365) and suite bar links (Newsfeed, SkyDrive, and Sites) using our customized master page.
Follow these steps to hide unwanted master page controls:
- Open SharePoint Designer.
- Select Open Site. Enter the complete URL to the SharePoint site and select Open.
- From the Navigation pane, select Master Pages.
- In the list of files in the Master Pages library, make a copy of
seattle.master(in our example, we have renamed itSeattle_HideControls.master).When modifying master pages included with SharePoint, do not modify the included master page. Make a copy of the master page and make your changes to the copy and then check out the new
Seattle_HideControls.mastermaster page. - Open the
Seattle_HideControls.mastermaster page. - Locate the
</SharePoint:SharePointForm>closing tag for theSharePointFormelement as shown in the following screenshot:
- Add a
<div>container to hide our controls before the</SharePoint:SharePointForm>element as shown in the following code:<div style="display: none;"> </div>
The following screenshot shows these elements:
- Locate the
<div id="suiteBarLeft">element.
- Cut the contents of the
<div id="suiteBarLeft">element to remove them from this location and allow us to paste them later. The following screenshot shows this<div>element:
- Paste the following contents into the
<div>tag that we created earlier to hide the elements:<div style="display: none;"> <SharePoint:DelegateControl id="ID_SuiteBarBrandingDelegate" ControlId="SuiteBarBrandingDelegate" runat="server"/> <SharePoint:AjaxDelta runat="server" id="DeltaSuiteLinks" BlockElement="true" CssClass="ms-core-deltaSuiteLinks"> <div id="suiteLinksBox"> <SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" /> </div> </SharePoint:AjaxDelta> </div>We can remove the
<div>elements we pasted, which surround the SharePoint controls. All we need to ensure is that the controls are on the page.
- Save the master page.
- Check in and publish the master page using the Check In and Publish options.
- Set the master page as the Site Master Page.
- Navigate to the site in your preferred web browser to observe the results. You will see a screen similar to the following screenshot:
In order for SharePoint pages to render correctly, most of the server controls included on the default master pages are required. Using CSS to hide server controls allows for SharePoint to render the control while the browser hides it for the end user. Rendering the control, even though hidden, still requires server and browser resources. It will still impact the page load performance.
- The CSS Display and Visibility article on W3 Schools at http://www.w3schools.com/css/css_display_visibility.asp
- The Overview of the SharePoint 2013 Page Model topic on MSDN at http://msdn.microsoft.com/en-us/library/jj191506.aspx