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:
- This branding example is based on a Microsoft SharePoint Server 2010 publishing site.
- The out-of-the-box Welcome Blank Web Part page layout is applied to the home page.
- The Mission theme is applied to the site.
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:
- default.master—also known as v3 master, it’s equivalent to the SharePoint 2007 default master page. If you apply this master page to your SharePoint site, you'll notice that the ribbon is stripped out and the Site Actions menu is located on the right side of the global navigation container. This master page is used when a SharePoint 2007 site is upgraded to 2010, and you can use it only when SharePoint 2010 is in SharePoint 2007 mode via Visual Upgrade.
- v4.master—the default team site template master page. You can use it for publishing and nonpublishing sites. The master page includes the ribbon, and the Site Actions menu is located in the upper-left corner of the site.
- nightandday.master—used only for publishing sites. It's similar to the blueband.master master page that came with SharePoint 2007. This master page includes the ribbon, and Site Actions menu is located in the upper-left corner of the site.
- minimal.master—seems, at first glance, to be a "starter" master page, but it’s not. This master page is used for sites that have their own navigation control or that need additional space to display content. For example, the search center and Office Web Applications use minimal.master.
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:
- a fixed-width design
- a footer
- a traditional breadcrumb
- background colors and borders
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:
- Open the Master Pages folder. When you do this, the master pages gallery opens.
- Right-click the v4.master file, click Copy, then paste the file into the master pages gallery.
- Rename your file as “playbook.master” (as Figure 4 shows).
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.