SharePoint Branding 101: Branding Master Pages

This article is part two of a three-part series. Last month, we focused on creating a custom Cascading Style Sheets (CSS) file to override the out-of-the-box styles in Corev4.css. Here, we will focus on master pages. Next month, we will focus on 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 their budget was limited, we used out-of-the-box SharePoint settings and one custom CSS file.

We applied the out-of-the-box v4.master page to The Playbook intranet site, created and applied a custom CSS file by using the Alternate CSS option in the master page settings, changed the site's logo image in the Title, Description, and Icon settings, and applied the Mission theme to style Web Parts and lists in the Site Theme settings.

However, our local high school has received additional funding, and they want to continue customizing their site's brand. To do this, we will use a custom master page and page layouts. As we begin part 2 of the series, our site has the following attributes:

Figure 1 shows what our Playbook intranet site looked like with just the CSS styling applied from the first article.

Figure 1: Site that has styling applied

Master Page Overview

The following four out-of-the-box master pages are often used for branding:

In the first article, we used the out-of-the-box v4.master. Because we structured our initial styling in the first article around this master page, we're going to make a copy of it in SharePoint Designer 2010 and use it as our starting point.

The most common requests that I receive from clients include creating a fixed-width site, adding a footer, and adding a standard breadcrumb. These are the main tasks that we'll complete in this article, along with removing unnecessary code from our master page.

Figure 2 shows what our site will look like when we're finished performing the tasks in this article (along with the styles applied in the first article). Master page modifications include the following:

Figure 2: Site that has styles and a custom master page applied

Create a Custom Master Page

To open SPD, click Start, point to All Programs, click SharePoint, then click Microsoft SharePoint Designer 2010.

If this is the first time that you have opened SharePoint Designer 2010, you won't see any sites listed in the Recent Sites section (as Figure 3 shows). If this is the case, click Open Site, then type the URL of the SharePoint site in the Site Name box.

Figure 3: Recent sites displayed in SharePoint Designer

The Site Settings page opens and you see the navigation pane on the left side. Then, follow these steps:

Figure 4: Master page gallery in SharePoint Designer

First, let's apply this new master page to our site. Then, we'll begin making modifications. To apply our new master page to our site, follow these steps:

1.     In SharePoint, on the Site Actions menu, click Site Settings.

2.     In the Look and Feel section, click Master Page.

3.     In the list, click playbook.master. At a minimum, you must apply the new master page to the Site Master Page. However, you can also apply it to the System Master Page (as Figure 5 shows).
Notes:

o    The Site Master Page is used by all publishing pages.

o    The System Master Page is used by all pages in non-publishing sites and by all corresponding forms, views, settings pages, and pop-up dialog boxes.

4.   Click Use Microsoft SharePoint Foundation default styles.

Note: In the first article, we specified an Alternate CSS URL to apply styling to our site. However, because we are now going to create a custom master page, we must reference our custom CSS file directly in our master page. Make sure that an Alternate CSS URL is not being referenced.
 

Now we're ready to begin modifying our master page. First, we’ll create a custom CSS file that we will reference in our custom master page. Our CSS file will be stored in the Style Library. To create our file, follow these steps:

Although it's not required to complete this month's branding exercise, you can download the initial custom CSS file created for “SharePoint Branding 101: Customizing Your SharePoint Site, Part 1: Creating custom CSS to override out-of-the-box styles”. Copy the contents from that file into this new CSS file. In this article, we will continue to build upon our initial steps to create our custom brand.

We need to associate our new CSS file with our custom master page. We'll use this CSS file to override SharePoint's core CSS and to create new custom CSS. To edit the master page, follow these steps:

1.     In the navigation pane, under Site Objects, right-click playbook.master, then click Edit File in Advanced Mode (as Figure 8 shows).

2.     Add a reference to our custom CSS file in our custom master page to override some SharePoint out-of-the-box core4.css classes and to create new styles. To do this, add the following code before the closing tag:
 

This path indicates that our CSS file is located in our SharePoint Style Library. Notice the After property. This is new in SharePoint 2010, and it forces our custom CSS to load after SharePoint's corev4.css file. This is extremely beneficial because, in SharePoint 2007, it is difficult to successfully override SharePoint's out-of-the-box CSS. Frequently in SharePoint 2007, core.css overrides your CSS modifications. You can also use the After property if you have more than one custom CSS file and you need to make sure that one loads after the other.

If you need to reference your CSS file, and you specify that it's located at the root of a site collection or at a specific site, you can use a $SPUrl token. For a site collection reference, you’d reference the following:

" after="corev4.css" runat="server"/>

For a specific site reference, you’d reference the following:

" after="corev4.css" runat="server"/>

Creating a Fixed-Width Site

To change the master page from a dynamic width design to a centered fixed-width design, we must add a particular CSS class to our master page's workspace elements. This class tells SharePoint not to override our fixed width. If we don’t add this one class, all our efforts to make our site to a fixed width will be unsuccessful.

To center the ribbon and make it a fixed with, perform a search for id="s4-ribbonrow", add the s4-nosetwidth class to the

tag, add a width style of 1000px, and set the margins to auto (as Listing 1 shows).

To center the main workspace and make it a fixed width, perform a search for id="s4-workspace", add the s4-nosetwidth class to the

tag, add a width style of 1000px, and set the margins to auto (as Listing 2 shows).

After our site is centered and the width is fixed, you'll notice that the scroll bars appear inside and below the ribbon instead of in the typical location in a browser, which is on the “outside” (as Figure 9 shows). This is because the ribbon uses JavaScript to control scrolling. However, if we undock the ribbon from the top and let it scroll with the body of the page, the browser will control the scrolling, which is the standard behavior.

Figure 9: Scroll bar "inside" and underneath the ribbon

Undock the ribbon from the top of the page by overriding the CSS that hides the overflow of the body. To do this, add the following to the playbook.css file:

body.v4master {

overflow:auto;

}

In the master page, delete scroll="no" from the tag. Then, perform a search for id="s4-workspace" and remove it from the

tag that surrounds all the page content. This page content is located directly below the code for the ribbon. All that should remain in that tag is the s4-nosetwidth path and styles (which Listing 3 shows). After you refresh the site, your design will resemble Figure 10.

Figure 10: Scroll bar "outside" the browser window

Note: When the s4-workspace class is removed, the Gantt view does not appear. You will have to take this into account when deciding what is most appropriate for your project.

Adding a Footer

Next, we're going to add a footer to the master page and create corresponding styles. In the master page, before the closing

tag that contains the body of the page, add a new tag and Copyright content by adding the following:

© Copyright 2011 YOUR NAME

In the playbook.css file, add the following styles and reference the new class in the

tag that contains our footer in the master page (as Listing 4 shows):

.playbook-footer {

clear:both;

background-color:#F7F7F7;

border-top:solid 2px #EFEFE7;

height:50px;

padding:10px;

}

Note: Use the CSS clear:both property to make sure that the footer floating element is not allowed on the left side or on the right side. When you do this, the footer will appear below all other elements.

Adding Breadcrumbs

SharePoint 2010 includes two types of out-of-the-box breadcrumbs:

SharePoint 2010 doesn't come with the breadcrumb that is included with SharePoint 2007. This is definitely something that many clients want, and they will often ask for it. Thank goodness it's easy to add! To add it to your new SharePoint 2010 master page, go to your master page and perform a search for . Then, add the following SharePoint 2007 breadcrumb code inside that ContentPlaceHolder:

Wrap the breadcrumb code in a tag. Then, add class="playbook-breadcrumb" to the tag to reference the new styles that we're going to create next (as Listing 5 shows). Add the following CSS to playbook.css:

.playbook-breadcrumb {

padding:9px 0 0 9px;

display:block;

}

Adding Background Colors and Borders

To make our brand look more polished, we'll add background colors and borders. In the playbook.css file, we’ll add a background color to body.v4master to create a light gray background that surrounds the entire site:

body.v4master {

overflow:auto;

background-color:#EAE9E1;

}

To create a new ID selector and change the background color of the body area to white, we’ll add the following to the playbook.css file:

#playbook-container {

background-color:#FFFFFF;

}

In the master page, add a reference to the new playbook-container ID that adds the white background to the design. Insert this ID into the

tag that surrounds all the page content. This page content is located directly below the tag that contains the code for the ribbon (which Listing 6 shows). In playbook.css, add the following to create a new class to format the borders of the ribbon. The ribbon is contained in its own tag so these borders affect only the ribbon area.

.playbook-border {

border-left:solid 5px #DCD9D5;

border-right:solid 5px #DCD9D5;

}

In the master page, add a reference to the new playbook-border style in the

tag that surrounds the ribbon (as Listing 7 shows). In playbook.css, create a new class to format the borders of the body area. This is similar to the ribbon borders except that we're also adding a bottom border to the site.

.playbook-borderbody {

border-left:solid 5px #DCD9D5;

border-right:solid 5px #DCD9D5;

border-bottom:solid 0px #EFEFE7;

} 

In the master page, add a reference to the new playbook-borderbody style to add borders to the design. Insert them into the

tag that surrounds all the page content. This page content is located directly below the code for the ribbon. (as Listing 8 shows). After you refresh your site, your design will resemble Figure 2.

Creating Content Placeholders For Backward Compatibility

This last modification of the master page does not affect the look of our design, but it helps our page load more quickly.

Even though our site does not use them all, the master page must have all nine of the following backward-compatibility content placeholders:

All these placeholders are required for Visual Upgrade to work.

The out-of-the-box v4.master uses CSS to override these placeholders (which you can see if you run a search for the s4-die class). However, we can reduce the amount of HTML that is rendered when the page loads by moving these placeholders into a non-visible panel instead of hiding them with CSS.

To create your non-visible panel, add the following before the closing tag:

Then, search for all the required backward-compatibility content placeholders and add them to the non-visible panel (as Listing 9 shows).

Our last step is to publish our master page file. To publish playbook.master, follow these steps:

Looking Forward

Because we structured our first set of styles in “SharePoint Branding 101: How to Customize Your SharePoint Site, Part 1: Creating custom CSS to override out-of-the-box styles” around v4.master, we created a copy of this out-of-the-box master page and then made our changes. We made the site a fixed-width design, we added a traditional breadcrumb that was used in SharePoint 2007 master pages, we added a footer, and we used simple styling to add background colors and borders around the site. In the next article, we will focus on page layouts to complete our look.