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.

Where We Are With SharePoint Branding Project

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 . 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.
    

Applying the Custom Page Layout

Before we start coding, apply the new page layout to the home page so we can see the progress that we're making as we build our page layout. To apply the new page layout to the home page, follow these steps:

1. In SharePoint, move to your site’s home page.
2. On the Ribbon, click Site Actions, then click Edit Page.
3. Click Page, then click Page Layout (located in the Page Actions section of the Ribbon).
4. In the Welcome Page section, select the Playbook Home page layout (as Figure 8 shows).
5. Click Save and Close.
    

Customizing the Page Layout

Let's set up SharePoint Designer so we can complete our branding project. In SharePoint Designer, open the files that we'll be working with and create a new images folder. Then, follow these steps:

1. In the SharePoint Designer navigation pane on the left side, under Site Objects, navigate to Page Layouts.
2. Right-click PlaybookHome.aspx, and click Edit File in Advanced Mode to open the file, as shown in Figure 9.
3. When you are prompted about whether you want to check out the file, click Yes.

In the second article of this series, we moved our custom .css file to the Style Library and referenced it in the master page. We need to modify this file again. To do this, follow these steps:

1. Under Site Objects, click All Files, click Style Library, then click Playbook.
2. Right-click Playbook.css, then click Edit File in Advanced Mode.
3. When you are prompted about whether you want to check out the file, click Yes.

We'll use one image for the home page, so we need to create an Images folder in this directory and upload a picture of the high school's football coach. Note that you can add your image to a different folder instead. Just remember the location so that you can find it later.

Under Playbook, create a new Images folder (as Figure 10 shows). Then, upload the image. To do this, follow these steps:

1. Double-click Images, then click inside the Images gallery pane to activate it.
2. On the Ribbon, click Import Files, then click Add File.
3. Select the image, then click OK (as Figure 11 shows).

Now we're ready to modify the page layout. In your page layout, you have an empty content control named PlaceHolderMain (as Figure 12 shows). We’ll put all the custom code for this exercise in this empty content control.

Let's take a closer look at each section of the page layout that we’ll create. Figure 13 shows the finished home page in edit mode. The page has a breadcrumb, a page title, Web Parts, editable field controls, and static HTML.

Starting from the top, the first items that we see are the page-level breadcrumb and the page title. The page-level breadcrumb control is located in the master page and is positioned to appear in the main content area. Because we created the breadcrumb in part 2 of this series, we'll move on to the next task. In our project, the page title field is visible only when the home page is in edit mode. The page title field (as Figure 14 shows) also determines what is published in the title area of the site after the page is saved. Adding this code to the page layout is a two-step process.

First, we insert the code from Figure 15 into the empty PlaceHolderMain ASP:Content tag in the PlaybookHome.aspx file. This adds the title field to the body area of the page. The field appears only if the page is in edit mode. Second, we modify the PlaceHolderPageTitleInTitleArea content placeholder in the header area of our master page.

To make sure that the content that is typed into the Title content field on the page also appears in the header area of the site, we’ll use a content control, and we’ll add the following code after the PlaceHolderMain closing tag in the PlaybookHome.aspx file:

Figure 16 shows the relationship between master page content placeholders and page layout content controls.

Figure 16: The relationship between master page content placeholders and page layout content control

Creating the column structure. Under the breadcrumb and page title, the page layout contains two main columns that hold web parts, editable field controls, and static HTML. Our next task is to create the column structure for the rest of our code. We will also put our HTML inside the PlaceHolderMain content control, but after the page title.

After the page title code and before the closing ASP:Content tag, create the following DIV structure. Add CSS classes to create the two main columns.

In Playbook.css, add the CSS code from Figure 17 to create positioning for the two main columns.

Adding a Web Part zone. Next, we’ll add a Web Part zone to the left column in the page layout. To do this, follow these steps:

1. Put your cursor inside the DIV for the left column. Then, on the Ribbon, click Insert.
2. In the Web Parts section, click the Web Part Zone icon, as Figure 18 shows.
   If the Web Part Zone icon is unavailable, save your file, then click it.
3. When you click the Web Part Zone icon, the code for the Web Part zone is automatically inserted into the position where your cursor was, which you can see in Figure 19. Rename the Web Part zone title as "Left Column.”

Next, build out the right column. This column consists of its own two rows, editable field controls, a Web Part zone, and static HTML. To do this, follow these steps:

1.     In the right column of the page layout, create the following DIV structure to create two rows:
 

2.     In Playbook.css, add the CSS code from Figure 20 to create positioning for two rows.

In the final design, the first section in the second column contains a title (“Coach Baginski's Corner”), an image content field, and an HTML content field (see Figure 21). Inside the first section of the second column, create the DIV structure by using the following code. (This creates two rows and two columns in the last row.) Add the title “Coach Baginski's Corner” to the first row.
 

      
Coach Baginski's Corner
      

            
Image Content Field Goes Here
            
HTML Content Field Goes Here