Creating an expanding width master page with content padding_SharePoint 2013 WCM Advanced Cookbook-QQ阅读轻小说男生网

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

Creating an expanding width master page with content padding

In this recipe, we will modify the seattle.master master page to have padding added around the expanding width content for a contained look that still expands with the browser window using CSS.

How to do it...

Follow these steps to create an expanding width master page with content padding:

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_ExpandingWidthWithPadding.master).
Check out the new Seattle_ExpandingWidthWithPadding.master master page using the Check Out feature.
Open the Seattle_ExpandingWidthWithPadding.master master page.
Locate the <head> element.

Add the following CSS reference to the ExpandingWidthWithPadding.css file we created:

<SharePoint:CssRegistration ID="customCssRegistration" Name="<% $SPUrl:~Site/_catalogs/masterpage/resources/ExpandingWidthWithPadding.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.
From the New section on the ribbon, navigate to File | CSS.
Name the new CSS file ExpandingWidthWithPadding.css.
Check out the new ExpandingWidthWithPadding.css file.
Open the ExpandingWidthWithPadding.css file.
Specify a background color for the #s4-workspace element.
```
#s4-workspace {
background: #999999;
}
```
Give the #s4-titlerow and #contentRow elements a white background and set the left-hand side and right-hand side margins to 100px.
```
#s4-titlerow, #contentRow {
background: #FFFFFF;
margin-left: 100px;
margin-right: 100px;
}
```
Add a top margin to the #s4-titlerow element to separate it from the header controls on the page as shown in the following code:
```
#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. Resize the browser window to observe the results. Compare the behavior to the results of the previous recipe, Creating a fixed width master page.

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 the s4-workspace element. We then used CSS to center the content of the s4-workspace element in a white box that expands with the size of the browser window. An HTML element that has its left and right margins set to the same size will be centered in the element that contains it and will expand in size as the element containing it expands in size.