SharePoint master pages, who needs them anyways?

SharePoint master pages, who needs them anyways?

A common misconception about SharePoint master pages is that you need several of them. In our SharePoint UI/UX class, Dustin and I meet people who have created several master pages for their SharePoint sites(s) due to branding and site layout needs. Based on design differences, a master page is created for the home page, another master page for the sub pages, and perhaps even another master page for sub site(s) that need different branding and/or layout. There are very few reasons to have more than one master page, and differing home page vs. sub page vs. sub site designs isn’t one of them.

Please note this article is cross posted on nothingbutsharepoint.com.

This article is targeted to web sites that need different designs for the home page and/or sub pages and sites.

The requirements

Here is a typical web site plan with branding and layout needs indicated:

Web Site plan with branding requirements

All of these branding and layout requirements can be met with a single master page file. The key is CSS. Before CSS is created, the purpose and inner workings of the master page need to be understood.

HTML = content, not design

The master page file is just some fancy HTML. It has three jobs:

  1. Provide the SharePoint components for the page such as search, login, navigation and a place to put custom content (text, web parts, lists).
  2. Provide content placeholders which are controls that serve as flags for where content can be placed.
  3. Link to a CSS file!

HTML was built for providing content. It was not built for styling that content. Instead the CSS needs to step in and provide the style information. HTML indicates that an article title will be on the page, the CSS indicates what font face, size and color that title will be.

Make use of ContentPlaceholders

As you dive into a SharePoint master page, it isn’t long before you run into a ContentPlaceHolder. It looks like this:

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

Here are the basics about ContentPlaceHolders:

  • There will be about 34 ContentPlaceHolders in the master page, each with a unique ID.
  • The sister file to a master page is the content page. These are recognizable by their ASPX file extension (Home.aspx, AllItems.aspx, default.aspx).
  • Content pages reference a master page and contain Content controls. These controls reference a ContentPlaceHolder ID.

Here is an example of a Content control:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
       Content and other handy stuff...
</asp:Content>

The contents within the Content control are put in place wherever the matching ContentPlaceHolder is in the master page. It is important to remember that ContentPlaceHolders don’t create space or formatting in the rendered web page. It is simply a place where content can be inserted, if the content page provides it.

Contents in a Content control are placed where the ContentPlaceHolder is within the master page

SharePoint makes constant use of ContentPlaceHolders. You can create your own ContentPlaceHolders to use along side the out-of-the-box ones.

To create a custom ContentPlaceHolder:

  1. Add this code to your master page, updating the ID value:
    <asp:ContentPlaceHolder id="Custom-Placeholder-Name-Goes-Here" runat="server">
           Insert components that can be replaced.  ContentPlaceHolders can be wrapped around HTML or stand alone.
    </asp:ContentPlaceHolder>
  2. Add this to your content page, updating the ID value to match what you used in the master page:
    <asp:Content ContentPlaceHolderId="Custom-Placeholder-Name-Goes-Here" runat="server">
           Nifty content for your web page.... or even your home page design 🙂
    </asp:Content>

One home page vs. many sub pages

Chances are, you can count the number of home pages for your web site on one hand or even with a single finger. The whole purpose of a master page is to maintain central control over shared HTML components for a web site. That benefit is lost if it is only used for a single page, such as the home page.

There is no need to create a master page for just your home page. You aren’t getting the main benefit of master pages and instead you are just creating more maintenance work for your team in the long run. Instead do this:

  1. Have one master page that is targeted to provide for the sub pages.
  2. Wrap the contents in a custom ContentPlaceHolder.
  3. From the content page used for the home page, create a Content control and link to the custom ContentPlaceHolder through the ID.
  4. Put home page content in the Content Control.

Here is a visual of how everything that has been covered so far will work together to create the home page:

Using a ContentPlaceHolder and Content control to swap in the home page content

Now you can make it pretty

Once the master page and content page have been set up to support a single master page and give you the ability to have a home page design and a sub page design, the actual design needs to be put in place. All of this can be handled with CSS when using a CSS based layout. Here is a breakdown of how the files will be referenced:

Suggested CSS files for branding

  • The master page file links to master-design.css. All of the sites and pages use this master page.
  • The content page used for the home page links to home-page.css – you can do this with a Content control that uses the “PlaceHolderAdditionalPageHead” ID.
  • CSS for the home page design goes into home-page.css, including any style statements that will override elements of the master page CSS (master-design.css).
  • The design variations needed for the sub site can be handled through linking to a CSS file in the same fashion as the home page variation.

Of course, you might not want to be linking to a bunch of different CSS files. SharePoint loads a lot of files as it is, and that mythical nirvana known as “one CSS for my whole intranet” is calling you. Well, next week, Dustin will make that myth a reality. Using a little bit of JavaScript, you’ll be able to write a single CSS file that can handle any variations you want, including per-page-layout styles. Stay tuned!

This was originally posted on NothingButBranding.com in August 2012, which is a site that has since been closed.