Branding Basics for SharePoint 2010 703 Along with the colors, two font options can be changed from the Customize Theme dialog. Note that all of the fonts installed on the server are available for selection. This can be particularly trou- blesome because site owners can select inappropriate fonts such as Wingdings. One last design option that is available in SharePoint Server 2010 publishing sites is the capability to apply the theme to the current site and reset all of the subsites below it to the same theme. There was no equivalent option in SharePoint 2007 themes, and it can be quite useful for projects with many subsites. Once all of the changes are made, clicking Apply will refresh the site with the new colors and fonts that were selected. The great thing about how themes work in SharePoint 2010 is that they are self service. From an administrative standpoint, your users should be able to create their own color-schemed sites without needing to ask you to mess with XML files or put files in the SharePoint root folder. Master Pages If you think back to the olden days of web development, every page on a website contained all of the HTML and design elements that made up what was seen. If a change had to be made to the general look and feel, every single page had to be edited individually. This led to websites that were difficult to maintain, and often resulted in pages being skipped or errors being introduced. ASP.NET 2.0 fixed this problem by providing a separate master page that controls the many aspects of the layout of each page from one central location. Because SharePoint is built on top of ASP.NET, master pages in SharePoint work very similarly to those in traditional ASP.NET sites. Master pages can be thought of as the glue that holds together, and arranges and styles, all of the SharePoint functionality that is seen when a page is loaded in the browser. Pretty much every page in SharePoint requires an associated master page. When a page is loaded in the browser, SharePoint sees the reference to a master page and combines the page content with the master page to create one seamless page that is displayed to the user. Figure 23-28 shows the relationship between master pages and page content. Web Request: Response: += Content Page Master Page Master Page Content Page FIGURE 2328 Unlike themes, custom master pages enable you to change almost all aspects of how SharePoint looks. From a branding point of view, master pages can be thought of as the outer design or “chrome” of a website. Master pages in SharePoint consist of HTML for layout, CSS for styles, SharePoint controls, and content placeholders. Content placeholders can be thought of as a type of container that loads matching pieces of content from the referring page. 704 CHAPTER 23 BraNdiNg sharePoiNt 2010 Out of the box, SharePoint 2010 includes a few master pages that can be used for branding without any extra effort: Default.master — Only used when a SharePoint 2007 site is being upgraded to 2010. It is virtually identical to the default master page in SharePoint 2007. Note that this master page can only be used when SharePoint 2010 is in SharePoint 2007 mode via Visual Upgrade. Minimal.master — Only used on pages that have their own navigation or need extra space, such as dedicated application pages or the search center. Unlike the concept of minimal mas- ter pages in SharePoint 2007, this master page is not intended for use as the starting point for branding, as it is missing several common SharePoint controls. V4.master — The default master page used for much of SharePoint 2010 (refer to Figure 23-11). In many ways, it is similar to the default master page in SharePoint 2007, but the look and feel has been refreshed with new design and cleaner markup. NightandDay.master — This master page, shown in Figure 23-29, is accessible only in a SharePoint Server 2010 site that has the Publishing Feature enabled. It is similar to the Blueband master page in SharePoint 2007, but with an updated look and feel. It is intended for use as a simple Internet or intranet publishing site. FIGURE 2329 You can see a list of all available master pages in a SharePoint site by loading the Master Page Gallery. Open your SharePoint site and click Site Actions Site Settings Galleries Master pages and page layouts. Figure 23-30 shows the Master Page Gallery. Branding Basics for SharePoint 2010 705 This page shows both master pages and page layouts, which are discussed in the next section. Anything with an extension of . master is typically a master page. FIGURE 2330 Applying Master Pages to Application Pages One major limitation to custom master pages in SharePoint 2007 has been alleviated in SharePoint 2010. In SharePoint 2007, master pages did not apply any formatting or styling to application pages, which included the Site Settings and several other key locations, all of which can be identified with “_ layouts” in the URL. These pages did not receive the custom master page because they were hard-wired to always use something known as Application.master, which was shared across all sites on the farm. As a result, heavily branded sites often had a few rogue pages sticking out like sore thumbs, showing the default yellow and blue look and feel. In SharePoint 2010, custom master pages can apply to almost all pages on a SharePoint site, including the Application pages. Note that there are some cases where a custom master page wouldn’t apply by default, for example the error pages use a specific simple master page to ensure that they remain consistent no matter what has happened. To apply a master page to the Application pages, be sure to set the System master page to the custom master page. In SharePoint Server you can find this setting at Site Actions Site Settings Look and Feel Master page. Figure 23-31 shows the Master Page Setting menu. 706 CHAPTER 23 BraNdiNg sharePoiNt 2010 FIGURE 2331 Making Application Pages Behave Like They Did in SharePoint 2007 If you decide that you don’t want this new master page feature on your SharePoint site, you can turn it off from Central Administration: 1. Open Central Administration on the SharePoint server. 2. Under Application Management, click Manage web applications. 3. Select the desired web application from the list and then, from the Ribbon, click General Settings (see Figure 23-32). 4. In the dialog that appears, scroll down to Master Page Setting for Application _Layouts Pages and select No (see Figure 23-33). 5. Scroll to the bottom of the dialog and click OK. Now custom master pages for this entire web application will not apply to the Application pages, and SharePoint 2010 will behave just like SharePoint 2007 did in this regard. Branding Basics for SharePoint 2010 707 FIGURE 2332 FIGURE 2333 708 CHAPTER 23 BraNdiNg sharePoiNt 2010 Creating Custom Master Pages When starting a new custom master page, it’s tempting to begin with a blank master page, but SharePoint master pages have some very specific needs. The previously mentioned content placehold- ers are one of the reasons why SharePoint master pages are complex; many of them are required in order for SharePoint to operate. If you omit a required content placeholder, SharePoint will display an error. Therefore, it’s often best to start a custom master page with some sort of skeleton to which you can apply your custom branding. One easy way to accomplish this is to start with one of the out of the box master pages such as v4.master or nightandday.master. One benefit to beginning this way is that Microsoft has already done a lot of testing on them, and if you are only making minor changes, this decreases the amount of testing you will need to do. Chapter 22 includes an example that uses SharePoint Designer 2010 to edit an existing master page. You could also use SharePoint Designer to copy an existing master page and create a new one. Another popular way to start a custom branded master page is by utilizing something known as a starter master page. Starter master pages were known as minimal master pages in SharePoint 2007. The name has changed because SharePoint 2010 already has something named minimal.master, which is intended for use with applications that have their own navigation or need extra space. Starter master pages are usually well commented and contain all of the required content placehold- ers, but they have little to no styling or layout applied to them. At the time of writing, there are two popular choices for starter master pages in SharePoint 2010: Microsoft’s Starter Master Page (http://code.msdn.microsoft.com/ odcSP14StarterMaster ) — This starter master page was built for SharePoint Foundation 2010 but it will also work in SharePoint Server 2010. Randy Drisgill’s Starter Master Pages (http://startermasterpages.codeplex.com) — These consist of two starter master pages, one for SharePoint Foundation 2010 and the other for SharePoint Server 2010 publishing sites. They are less minimal than Microsoft’s starter master page and have most of the common SharePoint functional controls displayed. The following example demonstrates how to create a new custom master page based on a starter master page in a SharePoint Server 2010 publishing site: 1. Open SharePoint Designer 2010 and load a SharePoint Server 2010 site. 2. From the Site Objects menu on the left, click Master Pages. 3. Click Blank Master Page from the Ribbon and name it demo.master. 4. Click demo.master and then click Edit File from the Ribbon. When you are asked if you want to check it out, click Yes. 5. Download the starter master pages from http://startermasterpages.codeplex.com and unzip the files to the local computer. 6. Copy the contents of _starter.master to the clipboard. Switch to SharePoint Designer 2010 and make sure you are in Code View, and then paste over the contents of demo.master, replacing the basic master page content that was included in demo.master. Branding Basics for SharePoint 2010 709 7. Save the master page by pressing Control+S. 8. Right-click on demo.master in SharePoint Designer, select Check In, and then select Publish a major version. SharePoint will warn that “This document requires content approval. Do you want to view or modify its approval status?” Click Yes. A browser window will open to the Approval status page. 9. Click the arrow that appears next to demo and select Approve/Reject; and from the next screen click Approved and OK. This will allow other users to see the changes. 10. Click Site Actions Site Settings Look and Feel Master page. 11. Select demo.master for both the Site Master Page and the System Master Page. Make sure Alternate CSS URL is set to Use Microsoft SharePoint Foundation default styles. Click OK. This will apply the new master page throughout the site, even to the Site Settings pages. Figure 23-34 shows the SharePoint site with the starter master page applied. Notice that it contains very little styling or formatting. FIGURE 2334 Upgrading SharePoint 2007 Master Pages One common question when upgrading an existing SharePoint 2007 environment to SharePoint 2010 is, can existing branding be updated to work in SharePoint 2010? The answer is definitely yes, but there are a couple of options for using SharePoint 2007 master pages with SharePoint 2010. SharePoint 2007 master pages can be used as is if SharePoint 2010 is set to use SharePoint 2007 visuals using visual upgrade mode. For more information on visual upgrade mode, see Chapter 5. 710 CHAPTER 23 BraNdiNg sharePoiNt 2010 Because visual upgrade is meant to be a temporary solution when upgrading an old SharePoint server, it is not intended for SharePoint 2007 master pages to be used long term in this way. To fully update an existing SharePoint 2007 master page to work with SharePoint 2010, several steps need to occur. These steps include adding the SharePoint Ribbon control and removing redundant and old 2007 controls. For more information on this process, check out the MSDN article “Upgrading an Existing Master Page to the SharePoint Foundation Master Page” ( http://msdn.microsoft.com/ en-us/library/ee539981(office.14).aspx ). Page Layouts SharePoint Server installations that have the Publishing Feature enabled include another type of brand- ing that is not available with SharePoint Foundation or Team Sites: page layouts. Page layouts are essen- tially templates for arranging and creating page content. They enable content authors to create pages that are based on defined templates. For instance, the same page content could be set up like a news article or as a landing page just by switching the underlying page layout. Beyond just defining the layout for the page content, page layouts also define areas of the page that can be edited, known as field controls, as well as Web Part zones. Web Part zones are special areas of the page that can contain one or more Web Parts. Unlike SharePoint 2007, SharePoint 2010 allows content authors to add and edit Web Parts in more areas than just Web Part zones; they can also be added to HTML content fields in both publishing pages and wiki pages. You can see a list of all the page layouts available in SharePoint from the same gallery as the mas- ter pages. Select Site Actions Site Settings. Under Galleries, click Master pages and page layouts. Several out-of-the-box page layouts are available when creating new pages in SharePoint Server 2010, including Article layouts and Welcome layouts, among others. Page Layouts, Content Types, and Site Columns . . . Oh, My! One particularly tricky concept to understand with page layouts is that they are always based on exactly one content type. Content types are themselves made up of site columns, which can be thought of as containers for data. When a page layout is created, the available editable field controls that can be added to the page layout are defined by which site columns are available in the underlying content type. To put it another way, editable field controls have their data stored in the site columns that define them. For example, the Article Left page layout that is available out of the box in SharePoint Server is based on the Article Page content type. This content type has a Publishing HTML site column named Page Content. The Article Page content type has an editable field control for Page Content; and any page created from Article Page, when edited, can have Page Content information entered and saved. When creating custom page layouts, you can use either existing content types, which are named Article Page and Welcome Page, or you can create your own custom content types. Using a Page Layout to Create a Page You can see page layouts in action by creating a new page in a SharePoint Server publishing site: 1. Click Site Actions New Page. 2. Enter a page name and click Create. . and SharePoint 2010 will behave just like SharePoint 2007 did in this regard. Branding Basics for SharePoint 2010 707 FIGURE 2332 FIGURE 2333 708 CHAPTER 23 BraNdiNg sharePoiNt 2010 Creating. a couple of options for using SharePoint 2007 master pages with SharePoint 2010. SharePoint 2007 master pages can be used as is if SharePoint 2010 is set to use SharePoint 2007 visuals using. Web Part zones. Web Part zones are special areas of the page that can contain one or more Web Parts. Unlike SharePoint 2007, SharePoint 2010 allows content authors to add and edit Web Parts