Creating a fixed width master page_SharePoint 2013 WCM Advanced Cookbook-QQ阅读男生武侠网

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

Creating a fixed width master page

The default SharePoint 2013 master page, seattle.master, expands to fill the browser window. In this recipe, we will modify the seattle.master master page to have a fixed width using CSS.

How to do it...

Follow these steps to create a fixed width 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 (for our example, we have renamed it Seattle_FixedWidth.master).
Check out the new Seattle_FixedWidth.master master page.
Open the Seattle_FixedWidth.master master page.
Locate the <head> element.

Add the CSS reference to the FixedWidth.css file we will create.

<SharePoint:CssRegistration ID="customCssRegistration" Name="<% $SPUrl:~Site/_catalogs/masterpage/resources/FixedWidth.css %>" runat="server"></SharePoint:CssRegistration>

Save the master page.
Check in and publish the master page using the Check In and Publish options.
Set the master page as Site Master Page.
From the Navigation pane, select All Files.
In the All Files content pane, navigate to _catalogs | masterpage | resources.

Tip

If the resources folder in _catalogs/masterpage has not been created yet, select Folder from the New section on the ribbon.
From the New section on the ribbon, navigate to File | CSS as shown in the following screenshot:
Name the new CSS file as FixedWidth.css.
Check out the new FixedWidth.css file using the Check Out option.
Open the FixedWidth.css file.
Specify a background color for the #s4-workspace element using the following lines of code:
```
#s4-workspace {
background: #999999;
}
```
Give the #s4-titlerow and #contentRow elements a white background, a fixed width of 1024px, and set the left-hand side and right-hand side margins to automatically center align the elements.
```
#s4-titlerow, #contentRow {
background: #FFFFFF;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
```
Add a top margin to the #s4-titlerow element to separate it from the header controls on the page:
```
#s4-titlerow {
margin-top: 50px;
}
```
Save the CSS file.
Check in and publish the CSS file using the Check In and Publish options.
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...

The page content for SharePoint pages is rendered within the s4-workspace DIV element. In our recipe, we used CSS to provide a grey background color for s4-workspace. We then used CSS to center align the content of the s4-workspace element in a white box with a fixed width. An HTML element that has its left and right margins set to auto will be centered in the element that contains it.

The #s4-workspace DIV element is used by SharePoint to contain the majority of the page content. The #s4-titlerow DIV element is used to contain the site logo, navigation, and search box in default configurations. The #contentRow DIV element is used to contain the quick launch navigation and page content.