Using Nested Master Pages in SharePoint
One cool feature of master pages is that you can use nested master pages to keep global elements together, but have separate master pages for each sub site. The basic idea is to create a ‘parent’ master page that defines the page structure, and ‘child’ master pages that extend certain content placeholders defined in the parent master page. Your content pages then provide content for the content placeholders defined in the child master pages.
For example:
Parent.master
<%@ Master language="C#"%>
<html>
<body>
<img src="sitelogo.gif"/>
<asp:ContentPlaceHolder id="PageContent" runat="server"/>
</body>
</html>
TwoColumn.master (child)
<%@ Master language="C#" MasterPageFile="Parent.master"%>
<asp:Content ContentPlaceHolderID="PageContent" runat="server">
<div id="leftcolumn">
<asp:ContentPlaceHolder id="LeftColumnContent" runat="server"/>
</div>
<div id="pagecontent">
<asp:ContentPlaceHolder id="MainColumnContent" runat="server"/>
</div>
</asp:Content>
So how do we use this in SharePoint?
Because SharePoint already has several system generated content pages that use the content placeholders defined in the default.master file we have to make sure our child master pages still provide these to the content pages. For example:
Parent.master
<%@ Master language="C#"%>
<html>
<head>
<title><asp:ContentPlaceHolder ID="PlaceHolderPageTitle" runat="server"></title>
</head>
...
Child.master
<%@ Master language="C#" MasterPageFile="Parent.master"%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
<asp:ContentPlaceHolder ID="PlaceHolderPageTitle" runat="server"/>
</asp:Content>
I have created a working example of nested master pages based on Heather’s base master page file for SharePoint 2007 in Ari’s nested master page zip file.
Can’t I use CSS to do this?
CSS can be used to provide site specific layout and branding, and Heather Solomon has a great example of how to use CSS to brand and customise SharePoint sites. One thing CSS can’t do, however, is to place different controls on the page depending on the site. This might be useful if you want to provide specific navigation or other controls for each site. So CSS can and should be used to define the look and feel, but nested master pages can provide the specific content controls needed for each site.
Hi Ari,
Excellent article
just implemented the nested master page… Works brilliantly 🙂
Shafraz
Shafraz
30 Jan 12 at 2:41 pm
@Shafraz glad to hear it helped. Another technique worth mentioning is to use delegate controls. Delegate controls allow you to replace a certain control (e.g. navigation controls) on specific sites. Often this is much less work and overhead than using nested master pages but as always it depends on your scenario as to which is the best technique to use.
Ari Bakker
30 Jan 12 at 6:28 pm