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:

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
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
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 </asp:Content> tag in the PlaybookHome.aspx file:

      </asp:Content>

<asp:ContentContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server"

<!--This renders the page title in the header area. -->
<SharePointWebControls:FieldValue FieldName="Title" runat="server" />

</asp:Content>

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

</PublishingWebControls:EditModePanel>

<div class="playbook-PLContainer">

            <div class="playbook-LtCol"></div>

            <div class="playbook-RtCol"></div>

</div>

</asp:Content>


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:
 

<div class="playbook-RtCol">

            <div class="playbook-RtCol1"></div>
            <div class="playbook-RtCol2"></div>

</div>

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.
 

      <div class="playbook-RtCol1>

      <div class="playbook-coachtitle">Coach Baginski's Corner</div>
      <div>
            <div class="playbook-coachimg">Image Content Field Goes Here</div>
            <div>HTML Content Field Goes Here</div>
      </div>

      </div>

Creating custom site columns. Next, we want to add content fields to the page layout. However, we must first create custom site columns and associate them with the Welcome Page content type.

Note that site columns must be associated with the same content type as the page layout if they are to be available for use in that page layout. Therefore, we must associate our custom site columns with the Welcome Page content type because that is the content type with which our page layout is associated (see Figure 5).

To create site columns that are associated with the Welcome content type, follow these steps. Note that you must follow these steps at the top-level site in a site collection.

  1. On the Site Actions menu, click Site Settings.
  2. Under Galleries, click Site Content Types.
  3. In the Page Layout Content Types group, click Welcome Page.
  4. At the bottom of the page, click Add from new site column.

Note that if we wanted to associate a site column with a content type that already exists, we would click Add from existing site columns instead.

5.     Create a site column (see Figure 22) to display an image of the coach on the home page.

6.     Create a site column (see Figure 23) to display a note from the coach on the home page.

Note that, because we created a new group when we created the first site column, the Playbook group is available in the drop-down list.

 

Adding content fields to page layout. Now that we have created the custom site columns, we can insert these content fields into the page layout. To do this, follow these steps:

1.     On the SharePoint Designer Ribbon, click View, click Task Panes, then click Toolbox. The Toolbox pane opens on the right side (see Figure 24).

2.     Expand Page Fields and Content Fields.

Note that each content type is a child of a parent content type. Therefore, Page Fields displays all site columns that are inherited from the parent content, and Content Fields displays all site columns that were specifically added to the content type with which the page layout is associated.

Also note that when we initially created our page layout, we associated it with the Welcome Page content type. Then, we created two site columns and associated these with the Welcome Page content type. Our custom site columns appear under the Content Fields category.

3.     To add content fields to the page layout locate <div class="playbook-coachimg"> Image Content Field Goes Here </div>. Drag the Playbook Coach Image content field from the Toolbox pane to the space between the opening and closing <DIV> tags (as in Figure 25).

4.     Locate <div>HTML Field Control Goes Here</div> and drag the Playbook Coach Description content field from the Toolbox pane into this DIV (see Figure 26).

5.     The second section of the right column contains a title and a Web Part zone only (see Figure 27).

6.     In the second section of the right column (see Figure 28), add the title Upcoming Games, then follow the previous procedure to create the Web Part zone. Rename the Web Part zone title as Right Column.”

7.     In the Playbook.css file, add the following CSS code to format the title:
 

/* This formats the title. */
.playbook-gamesheader {
font-family:Tahoma;
font-size:10pt;
font-weight:bold;
color:#983B20;
}

8.     To remove the column titles from list views (shown in Figure 29), add the following style to Playbook.css, and reference it in the page layout for each Web Part zone:
 

.playbook-hidetitle .ms-viewheadertr {
display:none;
}

Now we can add content to the home page. After adding content, make sure that you save and publish the page. When you add the image, remember that we stored the image in the Images folder (see Figure 10).

Refer back to Figure 13 to see what the home page looks like in edit mode. Figure 3 shows how the home page looks after it's saved. Be aware that your page may look different if you added different Web Parts, images, or text.

Done for the Moment

This article completes the three-part branding series. In this article, we created a custom page layout to complete our brand. The page included editable field controls, Web Part zones, and HTML. Future articles will cover more advanced SharePoint branding techniques.

 

Figure 15: Code to add the title field to the body area of the page

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

<!--This displays the title field only when the page is in edit mode. -->

<PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel">

<!--This renders the page title field in the content area. -->

<SharePointWebControls:TextField runat="server" FieldName="Title" />

</PublishingWebControls:EditModePanel>

</asp:Content>



Figure 17: CSS code to create positioning for the two main columns

/* This adds padding to the container and sets this DIV as the parent. */

.playbook-PLContainer {

padding:10px;

position:relative;

}

/* This positions DIV to the left side, sets the width, and adds padding at the bottom. */

.playbook-LtCol {

float:left;

width:510px;

padding-bottom:10px;

}

/* This positions DIV to the right side, sets the width, and adds padding around all sides. */

.playbook-RtCol {

float:right;

position:relative;

width:285px;

padding:10px;

}

 

Figure 20: CSS code to create positioning for two rows

            /* For column 2 row 1, this adds a gray background, padding on all sides, and a space          between the two rows. */

            .playbook-RtCol1 {

            background-color:#F2F2F2;

            padding:10px;

            margin-bottom:10px;

            }

            /* For column 2 row 2, this adds a gray background and padding on all sides. */

            .playbook-RtCol2 {

            background-color:#F2F2F2;

            padding:10px;

            }