SharePoint Branding 101: Branding Page Layouts

This article is part three of a three-part series. The first article focused on creating a custom Cascading Style Sheets (CSS) file to override out-of-the-box styles in Corev4.css. The second article focused on branding master pages. Here, we will focus on branding page layouts.

In “SharePoint Branding 101: How to Customize Your SharePoint Site, Part 1: Creating custom CSS to override out-of-the-box styles,” we performed simple branding tasks for football coaches at a fictitious local high school. Because the school’s budget was limited, we used out-of-the-box SharePoint settings and one custom .css file. When the school received additional funding, the administration decided to extend its branding to include custom master pages and page layouts. As we begin this article, our site has the following attributes:

• The branding example is based on a SharePoint Server 2010 publishing site.
• The Mission theme is applied to the site.
• Styling from the first article of the series is applied.
• A custom master page from the second article, “SharePoint Branding 101: How to Customize Your SharePoint Site, Part 2: Branding Master Pages” is applied.

Figure 1 shows what the Playbook intranet site looks like with the CSS styling from the first article and a custom master page from the second article.

Figure 1: The site with styling and custom master page applied

Page Layout Overview

I am especially keen on using page layouts when I brand SharePoint sites. They provide greater control over the entire site's brand by using structured HTML for content arrangement, and they also present an easy-to-understand method for content authors to create publishing pages that use specific editable fields. Page layouts allow organizations to present content in a traditional webpage format for their Internet, intranet, and extranet sites.

Page layouts and master pages work together. Whereas a master page is used to organize shared elements throughout the site, page layouts provide structure for individual content pages (as Figure 2 shows). Page layouts contain content controls. Each content control in a page layout references a specific content placeholder in the master page, as illustrated in Figure 16.

Every publishing page uses a page layout. There are various out-of-the-box page layouts that may provide satisfactory arrangements for your content. However, you must frequently use a custom page layout to organize your content most effectively.

To quickly determine whether a page is a publishing page, examine the URL. All publishing pages are stored in a SharePoint document library named Pages, so “/Pages/” is always included in the URL path. For example, the URL http://sp2010-b/playbook/Pages/default.aspx indicates that the Playbook site's home page is a publishing page.

 

Getting Started

Now, we will create a custom page layout and the corresponding CSS for the home page. To download the initial style sheet (which we'll build upon) and the custom master page created from the first two articles, go to <INSERT URL HERE>. Figure 3 shows what the site will look like after we complete the steps in this article.

Figure 3: The final design

Creating Custom Page Layouts

You can use Microsoft SharePoint Designer 2010 to create custom page layouts. To do this, follow these steps:

1. Click Start, click All Programs, click SharePoint, then click Microsoft SharePoint Designer 2010.
2. Open your site. When you do this, the Site Settings page opens, and the navigation pane appears on the left side.
3. Move to the Page Layouts folder. When you do this, the Page Layouts gallery opens.
4. Click inside the Page Layouts gallery pane. The New Page Layout option appears in the Ribbon.
5. On the Ribbon, click New Page Layout (see Figure 4).

When the pop-up window appears, provide the following information (as shown in Figure 5):

1. In the Content Type Group list, select Page Layout Content Types.
2. In the Content Type Name list, select Welcome Page.
3. In the URL Name field, type Playbook Home.
4. In the Title field, type Playbook Home.

Note that when you select Welcome Page in the drop-down list, you associate your new page layout with the existing Welcome content type. In future articles, we will discuss creating custom content types for page layouts. Before we can apply the custom page layout to the home page, we must first publish it. To do this, follow these steps:

1. On the Site Actions menu in SharePoint, click Site Settings.
2. In the Galleries section, click Master pages and page layouts.
3. Move the mouse pointer over the PlaybookHome.aspx file, then click the arrow.
4. Click Check In, then click OK (as Figure 6 shows).
5. Click Major version (publish), then click OK. The file is now in pending mode.
6. Move the mouse pointer over the PlaybookHome.aspx file again, click the arrow, then click Approve/Reject (as Figure 7 shows).
7. Click Approved, then click OK.