Creating a minimalistic master page_SharePoint 2013 WCM Advanced Cookbook-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

Creating a minimalistic master page

SharePoint 2013 comes with an out of the box fairly minimalistic design. In this recipe, we will modify the seattle.master master page to hide many of the SharePoint controls to create an even more minimalistic look. A minimalistic-design approach usually provides more emphasis on the page content and less emphasis on gratuitous design elements.

How to do it...

Follow these steps to create a minimalistic master page:

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 it Seattle_Minimalistic.master).
Check out the new Seattle_Minimalistic.master master page.
Open the Seattle_Minimalistic.master master page.
Locate the following closing tag for the SharePointForm element:
```
</SharePoint:SharePointForm>
```
Add the following <div> container to hide our controls before the </SharePoint:SharePointForm> element:
```
<div style="display: none;">
</div>
```
Locate the <div id="suiteBarLeft"> element.
Cut the contents of the <div id="suiteBarLeft"> element (not the opening and closing DIV tags of the element) and paste them into our hidden <div> tag.
Locate the <SharePoint:SPRibbonPeripheralContent> element with the ID RibbonTabRowRight.
Cut the <SharePoint:SPRibbonPeripheralContent> element with its contents and paste it into our hidden <div> tag.
Locate the <div id="s4-titlerow"> element.
Cut the <div id="s4-titlerow"> element with its contents and paste it into our hidden <div> tag.
Locate the <div id="sideNavBox"> element.
Cut the <div id="sideNavBox"> element with its contents and paste it into our hidden <div> tag.
Locate the <div id="contentBox"> element.
Add the following style attribute to the <div id="contentBox"> element to override its left margin to 20px:
```
<div id="contentBox" style="margin-left: 20px;"
```
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. The result will be similar to the following screenshot:

How it works...

In order for SharePoint pages to render correctly, most of the server controls included in the default master pages are required. Using CSS to hide server controls allows SharePoint to render the control while the browser hides it for the end user. In our recipe, we have hidden controls to provide the default SharePoint master page with a more minimalistic look.