There has been a number of conversations over the last year referencing building master pages from the bottom up using SharePoint Designer ( 2007).
Although It is a best practice – using SPD 2007 - to build customized master pages using an existing master page, it does not replace the fact that in order to recognize the various components that make up the master page a designer must build a master page from the ground up.
There are a number of blogs that speak to this process. It is not my intent to duplicate any postings. It is my intent to discuss this process in my own words and to add value based on the feedback from a number of sessions. All designers, should download the base.master file from Microsoft and use it as a starting point.
There are a number of blogs that identify the required controls and placeholders for Master Pages:
Discover How to Build Various Master Pages
To start, I would recommend that designers open up a number of master pages in SharePoint Designer’s Code View. You will note the consistent tags between the <HEAD></HEAD> elements. Remember, you would need to ensure that all of the required controls and content place holders are included on the master page.
1. You can copy the head elements of an existing master page. That is a great way to avoid making mistakes.
<HEAD 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">
/***
<SharePoint:RobotsMetaTag runat="server"/>
/*** Displays the set title for the site in the tile bar ***/
<Title ID=onetidTitle><asp:ContentPlaceHolder id=PlaceHolderPageTitle runat="server"/></Title>
/*** The CssLink control calls the core.css cascading style sheets from the WFE server’s 12 Hive ***/
<SharePoint:CssLink runat="server"/>
/*** The Theme control calls the cascading style sheet for the associated theme ***/
<SharePoint:Theme runat="server"/>
/*** The ScriptLink control runs the core.js javascript file. It contains the basic SharePoint functions. ***/
<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
/*** Calls on any custom javascript files. ***/
<SharePoint:CustomJSUrl runat="server"/>
/*** Identifies the site’s disco file that defines the web services. ***/
<SharePoint:SoapDiscoveryLink runat="server"/>
/*** Content Place Holder that allows additional information to be added to the Page head. ***/
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>
/*** SharePoint uses the DelegateControl to add additional content between the head elements. ***/
<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
</HEAD>
2. Copy the opening body and form tags from an existing master page and overwrite open body and form tags.
<BODY scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">
<form runat="server" onsubmit="return _spFormOnSubmitWrapper();">
<WebPartPages:SPWebPartManager id="m" runat="Server"/>
3. In the event that you created a Master Page using the .masterpage template, delete the ContentPlaceHolder1 ContentPlaceholder & Save the master page.
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
There are a number of Designers that would like to utilize absolute positioning to control the placement of objects on the master pages versus using tables. To be exact, Designers would like to get rid of the “SharePointy Look”. No,…. the SharePointy term is not yet recognized by Wikipedia. I could not resist adding a bit of humor to this post.
In order to leverage absolute positioning a Designer is required to do the following:
1. Wrap the PlaceHolders with DIV and SPAN elements.
2. Use a Cascading Style Sheet (CSS) to position the PlaceHolder on the page.
In the event that a Designer would like to leverage tables, there are a number of SharePoint Designer features that are available.
3. Click on the Table menu.
4. On the Master Page the Designer must identify the location of the Web Part toolpane. By default, the Web Part toolpane is located in a table cell. The MSO_ContentDiv is a placeholder control. It’s purpose is to allow SharePoint to add the web part toolpane.
<PlaceHolder id="MSO_ContentDiv" runat="server"></PlaceHolder>
Note: A Designer can use a table for formatting inside of the MSO_ContentDiv PlaceHolder. The default.master file provides a great example.
Note: The primary PlaceHolder used out of the box is the PlaceHolderMain. Within the PlaceHolderMain elements a Designer can use a table to layout the content in that area.
5. For all placeholders that are not used by the Designer, it is recommended that the Designer use the Panel control to hide the un-used placeholders. A Designer’s other option would be to set the visible property to false for each placeholder.
<asp:panel visible="false" runat="server">
<asp:ContentPlaceHolder ID="PlaceHolderBodyLeftBorder" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderBodyRightMargin" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderCalendarNavigator" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderFormDigest" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderHorizontalNav" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderLeftActions" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBar" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBarDataSource" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBarTop" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderMiniConsole" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat ="server" />
<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat ="server" />
<asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderTitleBreadcrumb" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderTitleInTitleArea" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderPageTitleInTitleArea" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderTitleLeftBorder" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderTitleRightMargin" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server" />
<asp:ContentPlaceHolder ID="PlaceHolderUtilityContent" runat="server" />
<asp:ContentPlaceHolder ID="SPNavigation" runat="server" />
<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server" />
<asp:ContentPlaceHolder ID="OSSConsole" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat ="server" />
<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
</asp:panel>
This is just a start. I encourage you all to look out for Enrique Lima’s posting over the next few days. I will update this blog with a reference to his detailed steps for, “Building a Master Page from the ground up”.