Last year I wrote an article on ASPalliance entitled Working with SharePoint Templates. In that article I explained how we can customize SharePoint templates to brand your website. For that process you needed to know lot of stuff and frankly, if you missed any steps, the whole Template would not work and it would give you errors. With the introduction of Master Pages in ASP.NET 2.0, Microsoft has utilized the same concept into SharePoint 2007. Microsoft has also introduced another tool to allow us to build these Master Pages. In the past it used Microsoft FrontPage. Does it bring back some bad memories? Hold on, I am not going to explain anything about FrontPage, but Microsoft changed the tool to be called SharePoint Designer. SharePoint designer is completely integrated with MOSS. In this article I will explain on how to create Master Pages to customize the look and feel of the complete website.

In ASP.NET 2.0, Microsoft introduced the concept of Master Pages. Master Pages are a common base file that provides consistent layout across multiple pages in your application. You can have a single Master Page or multiple Master Pages in your application. To use Master Pages in your application, you create a Master Page with the extension .master. This Master Page will hold the site layout and design. The next step will be to create multiple content pages based on the Master Page. On the Master Page you need to define the content server control. The definition of the content server control looks like the following.

Listing 1

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" 
    Runat="server">

This content place holder will hold the controls that are specific to the content pages. You can have single or multiple content place holders.

When you create new Content Pages, you can either specify the MasterPageFile attribute on the page or you can specify it in the Web.Config file. In Content Pages your attribute will look like:

Listing 2

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" 
    Inherits="ReportsApp._Default" MasterPageFile="~/ReportingApp.Master"%>

In Web.Config file it will look be:

Listing 3

<configuration> 
  <pages masterpagefile="~/ ReportingApp.master"> 
</configuration>

If we just have one Content Place holder then the page will be designed as follows.

Listing 4

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" 
    Inherits="ReportsApp._Default" MasterPageFile="~/ReportingApp.Master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" 
    Runat="Server">
</asp:Content>

If you would like to dynamically assign the Master Page file then it has to be done in the Page_PreInit event.

Listing 5

MasterPageFile ="~/ReportingApp.Master"

Any item that is specific to this page goes inside the Content Place holder. You can have multiple Content Place holder controls on your page with different ID's. If you need more information on Master Pages you can review various articles by searching on Master Pages in Google.com.

The ones who have used the previous version of SharePoint are aware of the hive term. Basically, it refers to the c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12. In the SharePoint 2003 world it used to be the 60 hive which pointed to c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60. These directories are the starting places for SharePoint. In WSS 3 it is the 12 hive. The reason I have included this at the start of the article is because in the remainder of the article I will not be mentioning the complete folder path but will just use the word 12 hive.

There are various Master Pages in WSS 3. The following are some of them.

For SharePoint Central Administration: The admin.master and popup.master pages are used for the SharePoint Central Administration content pages. These pages can be found under the 12 hive template\Admin.

Global Workspace Master Pages: These master pages can be found under the 12 hive\Template\ GLOBAL.

Basically, if you are looking for different Master Pages in SharePoint, just look under the Template folder and you might see some of the Master Pages you are looking for.

By default two Master Page files are used by WSS:

Default.master: As the name might suggest, this is used by all end user pages (default.aspx, all lists, document libraries, aspx pages, etc.). This file is located under 12 hive\Template\GLOBAL. You can change the default Master Page file through SharePoint Designer 2007. I will explain that later.

Application.master: These master pages are used for application pages. Again, located under 12hive\Template\layouts.

As I mentioned earlier, you can have multiple Content Place Holders in Master Pages. The Content Place Holders will determine what controls get added to the Content Place Holders. The list of Content Place holders users in SharePoint 2007 and their descriptions can be found at http://office.microsoft.com/en-us/sharepointdesigner/HA101651201033.aspx. You can also create your own content place holders. At one of the client locations I was tasked with creating an area to display external objects. They also needed it in a completely different location on the Master Page. So I created my own Content Holder and the site definition then declared it and added zones to it. The site definition linking with Master Pages is explained later. One of the issues which I faced while creating my master page was which Place Holders I needed to use. I used some of the Content Holders as mentioned in the above application. Most of the pages worked, but as soon as I tried to add a new item or edit an item to the list it started blowing up. Then I realized that most of the content holders mentioned in the document above are required. So, the rule of thumb is to include all of the content holders on the master page. The placement of the content holders can be changed based on the HTML Design and requirements.

Before we proceed, to create a simple Master Page using SharePoint Designer it would be good to know how the overall architecture works.

The Master Pages defines the layout which holds the Content Place holders that will be filled in by Site Definition ASPX Pages. The site definition ASPX pages are located under the SiteTemplate folders. For example, SharePoint has STS site Definition which is located under 12hive\Templates\SiteTemplate\STS. The explanation of Site definitions is beyond the scope of this article. The Default.aspx page has nothing but information on what the Content Place Holders will hold. Typical default.aspx page looks like the following.

Listing 6 - Default.aspx

<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    
    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,
    Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" 
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, 
    PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" 
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, 
    PublicKeyToken=71e9bce111e9429c" %> 
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" 
    Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, 
    Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server"> 
         <SharePoint:EncodedLiteral runat="server"
    text="<%$Resources:wss,multipages_homelink_text%>" 
    EncodeMethod="HtmlEncode"/> - 
<SharePoint:ProjectProperty Property="Title" runat="server"/>
</asp:Content> 
 <asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
    <IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt="">
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" 
    runat="server"> 
     <label class="ms-hidden">
        <SharePoint:ProjectProperty Property="Title" runat="server"/>
    </label> 
 </asp:Content> 
 <asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server"/> 
 <asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server"> 
 <style type="text/css"> 
 TD.ms-titleareaframe, .ms-pagetitleareaframe { 
         height: 10px; 
 } 
 Div.ms-titleareaframe { 
         height: 100%; 
 } 
 .ms-pagetitleareaframe table { 
         background: none; 
         height: 10px; 
 } 
 </style> 
 </asp:Content> 
 <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> 
         <META Name="CollaborationServer" Content="SharePoint Team Web Site"> 
         <script type="text/javascript"> 
         var navBarHelpOverrideKey = "wssmain"; 
         </script> 
 </asp:Content> 
 <asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server"> 
         <SharePoint:DelegateControl runat="server" 
                 ControlId="SmallSearchInputBox" /> 
 </asp:Content> 
 <asp:Content ContentPlaceHolderId="PlaceHolderLeftActions" runat="server"> 
 </asp:Content> 
 <asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server"/> 
 <asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server"> 
 <style type="text/css"> 
 .ms-bodyareaframe { 
         padding: 0px; 
 } 
 </style> 
 </asp:Content> 
 <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> 
         <table cellspacing="0" border="0" width="100%"> 
           <tr> 
            <td class="ms-pagebreadcrumb"> 
                 <asp:SiteMapPath SiteMapProvider="SPContentMapProvider" 
                    id="ContentMap" SkipLinkText="" 
                    NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>
           </td> 
           </tr> 
           <tr> 
            <td class="ms-webpartpagedescription">
            <SharePoint:ProjectProperty Property="Description" 
                runat="server"/></td>
          </tr> 
           <tr> 
                 <td width="100%" valign="top"> 
                         <WebPartPages:WebPartZone runat="server"
                        FrameType="TitleBarOnly" ID="Top" Title="loc:Top" /> 
                 </td> 
           </tr> 
           <tr> 
                 <td> 
                  <table width="100%" cellpadding=0 cellspacing=0 
                    style="padding: 5px 10px 10px 10px;"> 
                   <tr> 
                    <td valign="top" width="70%"> 
                            <WebPartPages:WebPartZone runat="server" 
                            FrameType="TitleBarOnly" ID="Left" Title="loc:Left" />
                           &nbsp; 
                    </td> 
                    <td>&nbsp;</td> 
                    <td valign="top" width="30%"> 
                            <WebPartPages:WebPartZone runat="server" 
                            FrameType="TitleBarOnly" ID="Right" 
                            Title="loc:Right" />
                           &nbsp; 
                    </td> 
                    <td>&nbsp;</td> 
                   </tr> 
                  </table> 
                 </td> 
           </tr> 
           <tr> 
                 <td width="100%" valign="top"> 
                         <WebPartPages:WebPartZone runat="server"
                        FrameType="TitleBarOnly" ID="Bottom" Title="loc:Bottom" />
                </td> 
           </tr> 
         </table> 
 </asp:Content>

Notice that all the HTML code is within the Content Place Holders. Please note the MasterPageFile is set to Default.Master. You can change this setting to some other Master Page file you have created.

In Short, Master Pages contain the layout and Content Place holders and the Site Definition ASPX page defines the stuff that goes in the Content Place Holder.

Microsoft Office SharePoint Designer 2007 is a new product that is included with Microsoft Office 2007. It allows you to create and customize Microsoft SharePoint Web Sites. It also does allow in building Workflow enabled applications based on Sharepoint Technology. Because of its tight integration with SharePoint we need to use this for building our Master Pages. Actually, you can even use Notepad to build Master Pages. However, you need to be really good at HTML programming. SharePoint Designer 2007 provides a visual interface to create this HTML formatted pages.

As mentioned earlier you can have multiple Master Pages with different looks and feels. For example, on an Intranet site you can have different look and feel for office sites and Department Sites. So, we need to have a location to store Master Pages. In SharePoint we have the concept of Master Page Gallery. The Master Page Gallery structure is as follows.

Figure 1

Finally, once you understand the basics of how the overall components involved in Master Pages, we can move to creating a basic Master Page. You just need to follow these steps to create the Master Page.

Step 1: Open SharePoint Designer 2007.

Step 2: On the File Menu, click New.

Figure 2

Step 3: On the New Dialog box, click on the Page Tab and Select Master Page. Please note that the SharePoint Content menu will only display if you have opened a SharePoint site.

Step 4: The Master Page will be created as follows.

Figure 3

Step 5: Go to the code tab.

You can highlight everything and replace the code that is listed on MSDN Site.

The code mentioned above will just give you the basic Content Place holders that you need to work. The site will definitely work with the above code. You will have to rearrange the Content Place holders based on your HTML design. But now we have another issue with the above Master Page. If you try to add an item to any of your lists (for ex: Document Library or events list), it will generate an error because it is missing the Content Editor place holders that are needed to display those pages. So, the easiest way is to add the remaining Content Place holders manually. The Content Place Holders that needs to be added in the above code are:

Listing 7

<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server" />

Using the above syntax you can create Content Place holders for the following.

PlaceHolderSiteName

PlaceHolderTopNavBar

PlaceHolderHorizontalBar

WSSDesignConsole - This is the missing component which is used while editing.

SPNavigation

PlaceholderTitleinTitleArea

PlaceholderTitleRightMargin

PlaceholderLeftNavDataSource

PlaceholderLeftNavBarTop

PlaceholderLeftNavBarBorder

PlaceholderFormDigest

PlaceholderUtilityContent

Once you add the above Content Place holders in the appropriate places as per your HTML design, the site will start functioning on all the pages. You have to save the Master Page to the Master Page Gallery as mentioned in the previous section. You can setup a Master Page as the Default Master Page by Right Clicking on the Master Page and Selecting Set as Default Master Page.

Figure 4

Now you have the basic Master Page ready in the Master Page Gallery. Now we need to assign the Master Page to our site.

Once, we have built the Master Pages we need to assign the Master Page to our site. This can be achieved as follows:

Step 1: On you site, click Site Actions->Site Settings->Modify All Site Settings.

Figure 5

Step 2: When the site Settings Window displays, Click on the Master Page under Look and Feel

Figure 6

Step 3: Select the Master Page from the drop down list.

Figure 7

Step 4: Most likely you will try to create your own SHB file to replace the look and feel of some of the CSS class dependent objects. For example, you might want to have a different look and feel for the Web Parts header or may be would like to change the fonts on links. For this purpose you might decide to assign a different CSS file. You can assign it on the same Site Master Page assignment page.

Figure 8

If you have specified a CSS file and have not handled a style in your CSS file then SharePoint will pick the default style assigned to the control. I will be writing an article about the various CSS styles and what they are used for.

If you have created the Master Page and assigned it to the site, you might be able to view the contents in the new Master Page. Yes, it does work because you might be the administrator on the site. But if you ask the users/some other person to try it, the pages will not display the same Master Page. In SharePoint 2007 you need to approve the Master Page in order for everyone to view it. If you have the approval rights you can go ahead and approve the design or request the appropriate person to approve it.

In this article I have explained how you can create a basic Master Page. But in fact you can do lot of stuff with this Master Page. On one of my recent projects I had to create a Master Page which had tabs, 3 or 4 navigation menus and they wanted the Search control without the default dropdown for Scope. So, I would like to present some tips on customizing the Master Pages.

Adding menu system to launch external websites: This could have been easy with the local navigation. But they wanted it separate from local navigation as it was already used up. I came up with using the ASP:Menu control provided by ASP.NET 2. If you look closely the Navigation menu SharePoint:ASPMenu control is actually inherited from System.Web.UI.WebControls.Menu.  I used the ASP:Menu control on my SharePoint Master Page. Below are the steps involved in adding your own Navigation menu.

Step1: At the appropriate place add the asp:menu control. The syntax could be as:

Listing 8

<asp:Menu runat="server" id="Menu1" width="100%" DataSourceID="ExternalLinks"  
    StaticSubMenuIndent="10px"  Target="_blank">
 </asp:Menu>

Step 2: Now we need to assign the asp:SiteMapDataSource for the above DataSourceID=Externallinks. The sitemapdatasource can be declared as:

Listing 9

<asp:SiteMapDataSource runat="server" ID="ExternalLinks" ShowStartingNode="False" 
    SiteMapProvider="MyMenuProvider"/> 

Step 3: Now we have defined MyMenuProvider as the SiteMapProvider. But we need to let it know where to get the sitemap file. So, we need to add this in the Web.Config file under the SiteMap->Providers section in Web.Config file.

Listing 10

<add name="MyMenuProvider" 
    type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.3600.0, 
Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" siteMapFile="Menu.sitemap"/> 

Javascript: I wrote lot of Javascripts in the current Master Page to do lot of formatting stuff. The main formatting was the look and feel of tabs. The tabs had to be controlled by our Javascripts. I also modified the Search Control completely. By default, the search control was displaying the Search Scope dropdown list box, text to enter search and the magnifying glass image. The client wanted to replace the magnifying image and remove all the items from the dropdownlist box except for the Directory. The following is the Javascript which I wrote on the Master Page to accomplish it.

Below is the Listing to remove the scopes from the dropdown and just list the Directory option.

Listing 11

ddlSelects = document.getElementsByTagName('select');
for (var i = 0; i < ddlSelects.length; i++)
{
  if (ddlSelects(i).title == "Search Scope")
  {
    var count;
    var diroption;
    for (count = 0; count < ddlSelects(i).options.length; count++)
    {
      if (ddlSelects(i).options(count).text == "Directory")
        diroption = ddlSelects(i).options(count);
 
    }
    ddlSelects(i).options.length = 0;
    ddlSelects(i).options.add(diroption);
 
  }
}

This is the listing to change the magnifying icon glass at run time only for this Master Page.

Listing 12

var ahrefs;
ahrefs = document.getElementsByTagName('a');
for (var i = 0; i < ahrefs.length; i++)
{
 
  if (ahrefs(i).title == "Go Search")
  {
    ahrefs(i).innerHTML =
      "<img title=\"Go Search\" 
onmouseover=\"this.src='/_layouts/images/button_go_02.jpg'\" 
onmouseout=\"this.src='/_layouts/images/button_go_01.jpg'\" alt=\"Go Search\" 
src=\"/_layouts/images/button_go_01.jpg\" style=\"border-width:0px;\" />";
    ahrefs(i).href = "javascript:SearchLink();"
  }
}

In short, there are various things you can do to the Master Page. In fact, the stuff you could do on ASP.NET applications master page can also be done on the SharePoint Master Page.

SharePoint Web Sites

In this article I have explained how you can customize the complete site with the use of Master Pages. In the next few articles I will explain how to use the CSS files to customize the styles and also how you can create the Site Definition files. Now when your design team comes up with a weird design which you might think cannot be done in SharePoint, think again. You can always give it a try.