Introduction to Master Pages

View Comments

Introduction

This is the first article in a six-part series on ASP.NET Master Pages and SharePoint.

  1. Introduction to Master Pages.
  2. Examining the out of the box Master Pages in SharePoint.
  3. Developing a custom Master Page for SharePoint.
  4. Options to deploy a Master Page for a production ready system.
  5. Customizing the Application.master Page.
  6. Incorporating a Master Page into a SharePoint site definition

In this article we will discuss the structure and architecture of an ASP.NET Master Page. We will show ASP.NET Master Page’s basic concepts in order to gain an understanding of how the pages work. This article will lay the groundwork for the subsequent articles in this series on customizing SharePoint Master Pages.

What is a Master Page?

Master Pages were introduced in version 2.0 of ASP.NET. Master Pages are a template that other pages can inherit from to keep consistent functionality. The pages that inherit from Master Pages are referred to as content pages. Master Pages allow the ASP.NET developer to keep consistent, reusable, web-based code (html, css, javascript, etc.) in one high level place, so the content pages can concentrate on their specific web-based code. This allows for easily manageable web-based applications.

Master Pages are architected with a merging concept. A content page refers to a Master Page and the ASP.NET framework merges the two pages together to make one page.

How does a Master Page work?

There are two main things that help define an ASP.NET Master Page:

  1. It contains the extension .master , e.g., a common SharePoint Master Page is default.master.
  2. It has a Master Page directive at the top of the page: <%@Master language=”C#”%>. This replaces the more typical <%@ Page directive that you will see on most ASP.NET pages.

A Master Page contains the same type of web code that is contained in an ASP.NET page. This includes head, body, form and any other html tag.

<%@Master language=”C#”%>
<%@ Import Namespace=”Microsoft.SharePoint” %>
<%@ Import Namespace=”Microsoft.SharePoint.ApplicationPages” %>
<html id=”HTML1″ runat=”server” xmlns:o=”urn:schemas-microsoft-com:office:office”>
<head id=”HEAD1″ runat=”server”>
<META Name=”GENERATOR” Content=”Microsoft SharePoint”>
<META Name=”progid” Content=”SharePoint.WebPartPage.Document”>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=utf-8″>
<META HTTP-EQUIV=”Expires” content=”0″>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css” />
</head>
<body>
<form id=”Form1″ runat=”server” >
<div>
Hello
</div>
…

The difference between a Master Page and regular ASP.NET is that the Master Page can have special sections called ContentPlaceHolders. A ContentPlaceHolder is a place holder section that the content pages can fill in for the Master Page.

The Master Page is a combination of regular html tags and ContentPlaceHolders.

<%@Master language=”C#”%>
<%@ Import Namespace=”Microsoft.SharePoint” %>
<%@ Import Namespace=”Microsoft.SharePoint.ApplicationPages” %>
<html id=”HTML1″ runat=”server” xmlns:o=”urn:schemas-microsoft-com:office:office”>
<head id=”HEAD1″ runat=”server”>
<META Name=”GENERATOR” Content=”Microsoft SharePoint”>
<META Name=”progid” Content=”SharePoint.WebPartPage.Document”>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=utf-8″>
<META HTTP-EQUIV=”Expires” content=”0″>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css” />
</head>
<body>
<form id=”Form1″ runat=”server” >
<div>
Hello
</div>

<asp:ContentPlaceHolder id=”MyPlaceHolder” runat=”server”>
</asp:ContentPlaceHolder>

…

If the ContentPlaceHolder of a Master Page is empty, it will be filled in by the implementing content page. Alternatively, the ContentPlaceHolder can have web code inside of it, which will be used if implementing content page does not implement the particular ContentPlaceHolder.

Content Pages

Content pages are the ASP.NET pages that implement a Master Page. Content pages are normal ASP.NET pages that contain an attribute which informs the compiler that the page should be merged with a Master Page. This attribute is part of the page directive tag and is called the MasterPageFile.

<%@ Page Language=”C#” AutoEventWireup=”true” MasterPageFile=”~/Site1.Master” CodeBehind=”Default.aspx.cs” Inherits=”WebApplication1._Default” %>

Content pages contain content tags. Content tags let the compiler know which ContentPlaceHolders to override the Master Page.

<asp:Content ID=”MyContent” ContentPlaceHolderId=”MyPlaceHolder” runat=”server”>
This is the content that will override the ContentPlaceHolder “MyPlaceHolder” from the Master Page
</asp:Content>

The order of the content tags on the content pages is irrelevant. The Master Page determines the layout of all the content. The content pages use content tags to fill in ContentPlaceHolders on the Master Page.

Content pages are not required to implement all ContentPlaceHolders of a Master Page. If a content page does refer to a ContentPlaceHolder, then the code inside the respective content tag will override the ContentPlaceHolder section of the Master Page. However, if a Content Page does not implement a ContentPlaceHolder, then the code within the ContentPlaceHolder on the Master Page will render on the browser.

Putting the pieces together

The Master Page is a template that controls the layout of a site. Content pages take care of filling in the content of predefined sections of the Master Page called ContentPlaceHolders.

Below is a wireframe of a Master Page:

Master Page Code

<%@ Master Language=”C#” AutoEventWireup=”true” CodeBehind=”Site1.master.cs” Inherits=”WebApplication1.Site1″ %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server” style=”width: 1200px” >
<div style=”border:solid 1px”>
Logo
</div>
<div style=”border:solid 1px”>
Top Menu
</div>
<div style=”width:300px;  height: 286px;float:left;border:solid 1px”>
Side Menu
</div>
<div style=”border:solid 1px; height: 286px;”>
<div style=”border:solid 1px; height: 124px; width: 400px;float:left; margin:10px”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>                           </asp:ContentPlaceHolder>
</div>
<div style=”border:solid 1px; height: 124px; width: 400px; margin:10px”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder2″ runat=”server”>                          </asp:ContentPlaceHolder>
</div>
<div style=”border:solid 1px; height: 124px; width:812px; margin:10px”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder3″ runat=”server”>                           </asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>

Content Page Code

<%@ Page Language=”C#” AutoEventWireup=”true” MasterPageFile=”~/Site1.Master” CodeBehind=”Default.aspx.cs” Inherits=”WebApplication1._Default” %> <asp:Content ID=”Content1″ ContentPlaceHolderId=”ContentPlaceHolder1″ runat=”server”>
This is the content that will override the ContentPlaceHolder “ContentPlaceHolder1″ from the Master Page
</asp:Content> <asp:Content ID=”Content3″ ContentPlaceHolderId=”ContentPlaceHolder3″ runat=”server”>
This is the content that will override the ContentPlaceHolder “ContentPlaceHolder3″ from the Master Page
</asp:Content> <asp:Content ID=”Content2″ ContentPlaceHolderId=”ContentPlaceHolder2″ runat=”server”>
This is the content that will override the ContentPlaceHolder “ContentPlaceHolder2″ from the Master Page
</asp:Content>

SharePoint and Master Pages

SharePoint is designed on the concept of Master Pages. Almost all of the out of the box ASP.NET pages in SharePoint inherit from a Master Page. Thus, if you want to customize the look and feel of all the SharePoint pages, you can do this by customizing Master Pages. This allows for a centralized place to make customizations (instead of modifying every web page in the entire SharePoint system).

The following articles in this series will show you the Master Pages included in SharePoint and the best practices for making customizations to SharePoint Master Pages. However, it is important to understand the basics of Master Pages before trying to customize Master Pages in SharePoint.

Twitter Digg Delicious Stumbleupon Technorati Facebook Email
  • hi,
    i find this site, when i was looking for example of deploying custom master page from visual studio. so here is a blogpost, which describe that in detailed way, if any other visitor have the same issue:

    http://sharepoint-charles.blogspot.com/ – Sharepoint Custom Master Page
  • dreigorian
    One of the best
  • Anis
    I would like to thank for such a nice article.

    I have a doubt and i feel you the right person to solve it.

    We are currently having 300 sites. We have a requirement to display the name of the site owner on each site and sub sites.

    I feel that we can make this changes in the master page. Kindly inform me whether it is possible and also mention the steps. I am a newbie to sharepoint so kindly be simple in explanation.

    Thanks in advance

    Anis
  • Hi Greg.. thanks for this post.. I'm sure many would be really appreciating your work. I am just a beginner to use sharepoint. This indeed has helped me widening my knowledge. Thanks once again.
  • Gunther
    Very clear explanation on how the master / content page work together and have their own function related to eachother, i'm curious to read the other articles on how you can modify a master page in sharepoint, it surely is a timesaver instead of doing every page in sharepoint one by one.
    I start to like this software more and more.

    Thanks for these fine articles Greg.
  • Gbenga
    how do i add a masterpage to an html page using sharepoint?
  • Santosh
    Hi Greg,
    It's a excellent article on master page
  • Johnny
    Hi Greg, nice article.

    In my sharepoint site i have implemented what you have described. but content that i enter on any of my content pages does not get rendered within the ContentPlaceHolders.

    <asp:Content ID=”Content2″ ContentPlaceHolderId=”ContentPlaceHolder2″ runat=”server”>
    This is the content that does not render on my page</asp:Content>

    have you seen this problem before?

    any help would be greatly appreciated.
  • I'm a sharepoint branding beginner .. can't wait man :)
  • manik
    very good article
  • Harish Mathanan
    Can't wait, thanks Greg,
  • Hey Harish. Yes, Heather Soloman has great stuff on branding - I would recommend looking into her stuff. She even has a css reference chart to show you what css elements control what sections of a SharePoint page (I really like that chart).
    My suggestion on getting started with branding in SharePoint is to start with just generally css branding. Try changing the css files around to see what you can do. After you do that maybe go into SharePoint designer and start changing the Master Page on a site to see what can be done. Pay close attention to everything going on in the Master Page while you are in SharePoint designer so you can get a feel for what it contains. Then, after you see what you can do directly against a Master Page in SharePoint designer, you will be ready to learn how to deploy Master Pages to sites through features and solutions.
    This series of articles is my attempt to write an article every step of the way through the Master Page modification cycle. Now that we have just given an introduction I am going to show the more specific concepts of SharePoint Master Pages in my next article. Then I am going to go through some of the techniques I mentioned in this comment on modifying the Master Page through Designer or html. Then I am going to go through how to wrap it all up in a feature.
    Hopefully by the end of this series you should have a good understanding of how to brand effectively. But, if you want to get a head start, I would suggest looking into the suggestions I mentioned above in this comment.
    Stay tuned.... Greg
  • Harish Mathanan
    Hi Greg, very good start. Hope to gain more insight from your upcoming articles, I understand that Heather Solomon has some good articles and blogs regarding branding in WSS and MOSS. What are your suggestions for beginers like me, to learn and apply SharePoint branding effectively? Thanks you.
  • I will have to check out share point. I have never used it.
  • excellent article, very good!
blog comments powered by Disqus