Master Pages and Layout Pages

So far in this chapter you have seen how to customize SharePoint pages in general, both MOSS and WSS pages. In reality, many of these customizations are used on WSS pages, since MOSS has a smarter way to control the look and feel of both the chrome and the content of a web page. In SharePoint 2003, you customized WSS 2.0 in a different way than SPS 2003. The differences are much smaller in SharePoint 2007, although there are some: Both MOSS 2007 and WSS 3.0 use Master Pages to control the chrome of the page, while only MOSS uses page layout files to govern the look and feel of the page content. Instead, WSS pages are configured directly, either by customizing the site definition files or by editing the page using SharePoint Designer, as previously described in this chapter.

Master Pages

A Master Page file consists of a style definition and one or more CSS files. The style definition controls, for example, the position and layout of the navigation and Quick Launch bar, while the CSS file controls the font types, sizes, and colors for the text. One SharePoint page can only be associated with one specific Master Page; different pages can have different Master Pages. Each site collection has a library with all the Master Pages available for this SharePoint page, known as the Master Pages and Page Layouts Gallery. As this name implies, this library also contains page layout files, but for now, let's focus on the Master Pages. To list these Master Pages, use the steps in the following Try It Out.

Try It Out Display Existing Master Pages

1. Log on as a site administrator, and open the top site of a site collection.

2. Click Site Actions Site Settings Modify All Site Settings.

3. In the Gallery section, click Master pages and page layouts to open the list with all existing Master Pages (see Figure 13-15).

Figure 13-15

One of these Master Pages is default.master. You should normally avoid customizing the default Master Page, since it is the base for all default SharePoint pages, and it also has a special feature: Only WSS sites that are configured to use default.master can use site themes. However, if you want to apply a customization that will affect all existing site pages, as well as all new pages that will be created later, then you should consider modifying the Default.master page file; a typical example is when you want to replace the default logo with your company logo. Remember to make a backup copy of the original default.master, just in case you need to revert to it.

When customizing a Master Page, you either copy an existing Master Page and save it with a new name or create a new one from scratch. As usual, it is easier to start by editing an existing file, as long as you only want to make minor modifications. In the example below you will copy Default.master and save it as Demo.master.

Try It Out Replace the Page Logo on a Master Page

1. Log on as a site collection administrator, and open the top site in a site collection.

2. Open the Master Page Gallery: click Site Actions Site Settings Modify All Site Settings, then click Master pages and page layouts.

3. Open an Explorer view of the library to make it easier to copy the original Master Page: Click Actions Open with Windows Explorer.

4. Right-click on the Default.master file and select Copy, then right-click on any free space in the window, right-click, and select Paste. Rename the copied file (usually named "Default(2).master") to Demo.master, then close this Explorer view window.

5. Locate the new Demo.master in the list; open its quick menu and select Edit in Microsoft Office SharePoint Designer. Click OK when you are prompted if you want to check out this file. Now SPD will open with the Demo.master page (see Figure 13-16). Note that this page only shows the chrome of this page. The marked section in the center of this page, PlaceHolderMain, is where the page content later will be displayed, but that part is not customized using Master Pages.

   
   Figure 13-16

6. The page is now ready to be customized; for example, change the logotype like this:

   1. Upload the logo to an image library that all users can access, such as the Image library on the top site. In this example, assume that you have a file named MyLogo.png in this image library. Note that the URL for this library is http://srv1/PublishingImages.

   2. Select the logo at the top left of this Master Page.

   3. Click Split (at the bottom of the SPD window) to view both the graphic Design view, and the code; note that the part in the code that is marked has a property named "LogoImageURL="/_layouts/images/titlegraphic.gif. Replace this line of code:

           <SharePoint:SiteLogoImage ↩     LogoImageUrl="/_layouts/images/titlegraphi.gif" runat="server"/> 

      with this line:

           <asp:Image runat="server"  ImageUrl="/PublishingImages/MyLogo.gif"/> 

   4. Save the modified Master Page, then click Edit Check In. In the next form, select the option Publish a major version (you can also add a comment), and click OK. After a few seconds, you will see a new dialog box. Click Yes to modify the approval status; this will open a SharePoint page where you can approve this modified Master Page. Open the quick menu for the Master Page, select Approve/reject, and approve the modified Master Page. Now the page is ready to be used.

7. Now apply this Master Page to SharePoint. You can choose if you want to apply the Master Page to a single site or to all subsites as well. Note that you should also apply the Master Page as a System Master Page to ensure that the site has the same look and feel when opening non- publishing pages such as document libraries and lists.

   1. Go to the top site, then click Site Actions Site Settings Modify All Site Settings.

   2. Click Master page in the Look and Feel Gallery. This is the place to select which Master Page is to be used by the site.

   3. In the Site Master Page section, select your new Master Page (Demo.master). Then check the option Reset all subsites to inherit the Site Master Page setting.

   4. Click OK.

8. Verify that all sites now display the new logo.

Important 

When changing the Master Page, only content pages will be updated; that is, Site Settings and other configuration pages will not be affected by the new Master Page.

Next, you will add a copyright statement to the bottom of all pages, using the Demo.master page file. This is simply a matter of adding a short code segment to the file; it will be visible on all SharePoint pages connected to the Master Page.

Try It Out Add a Copyright Statement to a Master Page

1. Log on as a site collection administrator, and open the top site in a site collection.

2. Locate the same Demo.master page file in the Master pages and page layouts gallery, then use its quick menu to start editing the file in SharePoint Designer. (Accept the option to check out the file).

3. Switch to Code view, then search for the PlaceHolderMain. This is the place where SharePoint will later put the actual page content.

4. Add a new table row under the PlaceHolderMain segment; that is, add the last three lines in the code segment below:

    <tr>     <td class='ms-bodyareaframe' valign="top" height="100%">       <A name="mainContent"></A>         <asp:ContentPlaceHolder  runat="server"/>         <asp:ContentPlaceHolder  runat="server">         </asp:ContentPlaceHolder>     </td> </tr> <tr>   <td colspan="2">Copyright 2007 - Filobit Corporation</td> </tr> 

5. Save the page, check it in, and approve it. Open a SharePoint site based on Demo.master, and notice that it now has both a new company logo and a copyright statement (see Figure 13-17).

Figure 13-17

Layout Pages

Look at the start page for the intranet; by default, it shows a picture, a text segment, plus several Web Parts, such as "I need to" and Employee Lookup. Click Site Actions Edit Page. It is now clear that this type of page consists of more content parts, such as Page Image and Page Content, than the WSS pages you customized earlier in this chapter. The reason is that this is a Publishing Page, which only comes with MOSS sites. But how do you control the layout of this page? For example, what if you wanted to display the image to the right instead of to the left? This is where page layout files come in. You saw in the previous section about Master Pages that there is one common gallery named Master Pages and Page Layouts; this library contains the page layout files, besides the Master Pages.

This is how it works: The content of this page is stored in a page file; the layout of this page is controlled by a layout file. In other words, there are two file types involved here. Let's look at where these files are stored.

Try It Out Locate the Content Page and the Layout Page

1. First, discard the checkout of the page you just performed above: click Page Discard Check Out and then click OK.

2. Next, click View All Site Content and open the Pages library. This is where all the Publishing Pages are stored for the site (each MOSS site has its own page library).

3. This library will by default only contain one single page file: Default.aspx (the file type is not displayed, but if you hover the mouse over the file, you can see the complete filename in the status menu below). Open the quick menu for the file, then select View properties.

4. At the bottom of the property page, it says that the content type used by this page is the Welcome page (see Figure 13-18). This is a special content type associated with Publishing Pages, typically used as a start page for an intranet. If you edit this page, you could in fact change the content type, but for now, click Close.

   
   Figure 13-18

5. Let's look at another MOSS site that also uses Publishing Pages: Switch to the News web site, then click Sample News Article to open it.

6. This is also a Publishing Page. Click View All Site Content Pages, and you will find a page file named Article1; view its properties and you can see that this page is connected to the content type Article Page. Then close the properties.

7. There are different content types for different Publishing Pages. Now try this: Open the News site again, then click Site Actions Create Page. Look at the Page Layout section; it contains multiple layouts all based on either Article Page, Welcome Page, or Redirect Page. So what you can do is to create new layout pages for news articles, based on the content type Article Page. You will do that in just a few seconds.

8. First, let's look at where these layout files are stored; for example, "Article page with body only":

   1. Click Site Actions Site Settings Modify All Site Settings and then open Master pages and page layouts; all files with an Associated Content Type equal to Article Page is what you are looking for (see Figure 13-19).

      
      Figure 13-19

   2. Open the properties for the file PageFromDocLayout.aspx, and you will see that the title for this layout file is "Article page with body only."

So now you know where the content pages (i.e., the Publishing Pages) are stored and where the layout pages are stored, and that there is a content type associated with each layout. The next example shows you how to customize an existing layout file and how to create a new layout file from scratch.

Try It Out Customize an Existing Layout File

1. Open the Master Pages and Page Layouts Gallery, as described earlier.

2. Locate the PageFromDocLayout.aspx file; open its quick menu and select Edit in Microsoft Office SharePoint Designer, then accept to check out the file.

3. This layout file is now open in edit mode in SPD. To make it easier for you, SPD also loads the associated Master Page, but in read-only mode (see Figure 13-20). Note that this layout page consists of two controls only: the Page Content and the Rollup Image. Let's add a Byline control to this page:

   
   Figure 13-20

   1. Place the cursor to the left of the Page Content control (it may be easier using the arrow keys on the keyboard).

   2. From the Toolbox pane at the top right of the page, expand SharePoint Controls and then Content Fields.

   3. Right-click on the Byline control and select Insert.

   4. Save this page; check it in and publish it, then approve this page.

4. Now open the News site again, and create a news article: Click Site Actions Create Page and select the layout "Article page with body only." Enter a title and a description, then click Create. The layout page is now displayed, and it also contains the new Byline control you added. Enter some text in the page content control, and enter your name in the Byline, then click Publish. Verify that the article has the correct layout; if not, edit the layout again.

Finally, let's look at how you create a new layout file from scratch. In the following example, you will create a layout file named My Layout.aspx, associated with the content type Article Page.

Try It Out Create a New Layout File

1. Open the Master Pages and Page Layouts Gallery, as described earlier.

2. Click New and then enter these values:

   1. Content Type Group: Page Layout Content Types.

   2. Content Type Name: Article Page.

   3. URL Name: MyLayout.

   4. Title: "My Layout."

   5. Description: "This is a demo layout."

   6. Click OK to save and close the page layout.

3. The new layout file is stored along with the other page layouts. By default, it will be checked out. Open its quick menu, and select Edit in Microsoft Office SharePoint Designer.

4. The empty page layout file opens in SPD. Now add the controls you want for this layout; open the Toolbox pane, and expand SharePoint Controls Content Fields. As usual with HTML-formatted pages, it is easiest to create a table to get control over where these content fields will be located. Click the menu options Table Insert Table. Then drag the content fields to this table.

5. When you're done, save the page layout, check it in, and publish it, then approve it.

6. Open the News site and create a new news article, based on My Layout; enter a title and a description, and click Create (see Figure 13-21). Finally, add some content to this page to verify that the layout works as expected.

Figure 13-21

As you can see, it is easy to start customizing both Master Pages and page layout files. But you can do a lot more than these simple examples demonstrate. Microsoft has some excellent articles written by Patrick Tisseghem regarding customizing layout files that are a good start for your new career as a design freak - check out these articles:

     http://msdn2.microsoft.com/en-us/office/aa830818.aspx     http://msdn2.microsoft.com/en-us/office/aa830815.aspx     http://msdn2.microsoft.com/en-us/office/aa830817.aspx