sharepoint master pages | SharePoint Consulting Seattle | Developers | Staffing

Working with SharePoint 2010 Foundation Master Pages

Posted by Allyis Blogger on Wed, Jul 21, 2010 @ 01:02 PM

Twitter |

Facebook |

digg it |

delicious |

By John Lukosky

The master pages SharePoint 2010 utilizes are features from ASP.NET 2.0. They provide the ability to lay out the framework of a rendered page separate from the page containing the content. While master page customizations were an essential feature in the previous version of SharePoint as well, there have been many notable and important changes from 2007 to 2010. This article attempts to:

Consolidate some of the basics of working with SharePoint 2010 master pages
Highlight some of the changes between the previous version and the new version
Provide insight into some of the more common and useful customizations

Types of SharePoint 2010 Master Pages

This section was largely derived from Quick Overview of Master Pages in SharePoint 2010 by Corey Roth

v4.master

Default team site master page. Provides ribbon bar and other UI changes.

Characteristics

· Site actions are updated for 2010 and appear on left.
· Ribbon bar is available

default.master

Sites upgraded from SharePoint 2007 use this unless they are changed to use a v4 version.

Characteristics
· Site actions on right side and are same as SharePoint 2007 version
· No ribbon bar.

minimal.master
Master page contains almost nothing. It is used by the Search Center and Office Web Applications. This master should not be confused with minimal master pages from 2007 which were trimmed down custom master pages developed by users. The minimal.master is now an out-of-the box master page. These trimmed-down custom master pages are commonly referred to as Starter Master Pages in SharePoint 2010.

Characteristics of minimal.master
No navigation included

Starter Master Pages
Commonly referred to as “minimal master pages” in SharePoint 2007, these quick start pages are created by developers to better enhance their ability to quickly create and customize a functional master.

Sources for Starter Master Pages
Starter Master Pages for SharePoint 2010 by Randy Drisgrill

simple.master
This master is used by login and error pages. To customize these pages, a replacement page must be created and stored in the _layouts directory on the server. For more information see Default Master Pages in SharePoint on MSDN.

Pages using simple.master
·         Login.aspx
·         SignOut.aspx
·         Error.aspx
·         ReqAcc.aspx
·         Confirmation.aspx
·         WebDeleted.aspx
·         AccessDenied.aspx

Other Master Pages
Other miscellaneous master pages are generally not manipulated when branding a site.

These include:

·         application.master
·         applicationv4.master
·         dialog.master
·         layouts.master
·         layoutsv3.master
·         pickerdialog.master
·         rtedialog.master
·         simple.master
·         simplev4.master
·         mwsdefault.master
·         mwsdefaultv4.master
·         admin.master
·         popup.master

Upgrading a Master Page to a SharePoint 2010 Master Page

This section draws from the MSDN article at http://msdn.microsoft.com/en-us/library/ee539981.aspx.

Many of the commands previously found in menus and toolbars now exist inside of the Ribbon. As a result, if the existing master page does not contain the Ribbon, many commands will be unavailable.

Controls on the Server Ribbon

These controls have been relocated into the Ribbon in SharePoint 2010:

·         Publishing Console - <PublishingConsole:Console>
·         Site Actions Menu -<PublishingSiteAction:SiteActionMenu>
·         Sign-in and Log-in Control (if using a custom login, it can be moved into the Ribbon).

Required Content Placeholders

Placeholder Control	Description	New
<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" runat="server">	Top of the Quick Launch menu.	Yes
<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" runat="server">	Bottom of the Quick Launch menu.	Yes
<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server"/>	Title of the site.	No
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>	Placeholder in the head section of the page used to add extra components such as ECMAScript (JavaScript, JScript) and Cascading Style Sheets (CSS) to the page.	No
<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server"/>	The class of the body area.	No
<asp:ContentPlaceHolder ID="SPNavigation" runat="server">	Control used for additional page editing controls.	No
<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">	Name of the site where the current page resides.	No
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />	Title of the page, which appears in the title area on the page.	No
<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>	Description of the current page.	No
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">	Section of the page for the search controls.	No
<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server">	Breadcrumb control on the page.	No
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">	Breadcrumb text for the breadcrumb control.	No
<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server">	List of subsites and sibling sites in the global navigation on the page.	No
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">	Container used to hold the top navigation bar.	No
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">	The navigation menu that is inside the top navigation bar.	No
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server" />	The placement of the data source used to populate the left navigation bar.	No
<asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat="server" />	Date picker used when a calendar is visible on the page.	No
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server"/>	Top section of the left navigation bar.	No
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">	Quick Launch bar.	No
<asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server">	Additional objects above the Quick Launch bar.	No
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">	Main content of the page.	No
<asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server">	Container where the page form digest control is stored.	No
<asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server"/>	Additional content at the bottom of the page. This is outside of the form tag.	No
<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server"/>	The class for the title area (now in the head tag). Customizations that add a WebPartZone in a content tag to this placeholder will cause an error.	No
<asp:ContentPlaceHolder id="PlaceHolderPageImage" runat="server"/>	Not part of the UI, present for backward compatibility.	No
<asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" runat="server">	Not part of the UI, present for backward compatibility.	No
<asp:ContentPlaceHolder id="PlaceHolderMiniConsole" runat="server"/>	Not part of the UI, present for backward compatibility.	No
<asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" runat="server"/>	Not part of the UI, present for backward compatibility.	No
<asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" runat="server"/>	Not part of the UI, present for backward compatibility.	No
<asp:ContentPlaceHolder id="PlaceHolderNavSpacer" runat="server">	Not part of the UI, present for backward compatibility.	No
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server">	Not part of the UI, present for backward compatibility.	No
<asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server">	Not part of the UI, present for backward compatibility.	No
<asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server">	Not part of the UI, present for backward compatibility.	No

Add the Server Ribbon
The Ribbon is a new addition to the UI. SPRibbonPeripheralContent controls render in this area but can be moved outside of the Ribbon if desired.

Steps
Copy and paste the following into your master page.

     <%-- Insert the Site Actions Menu Here --%>
     </SharePoint:SPRibbonPeripheralContent>
     <%-- Insert the Global Navigation Here --%>
     <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowRight" ID="RibbonTabRowRight" CssClass="s4-trc-container s4-notdlg">

     <%-- Insert the Top-Right Corner Controls Here --%>
     </SharePoint:SPRibbonPeripheralContent>
    </SharePoint:SPRibbon>
</div>
<div id="notificationArea" class="s4-noti">

    <%-- Notifications will appear in this div element. --%>
</div>
<asp:ContentPlaceHolder ID="SPNavigation" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="PublishingConsole">
    </SharePoint:DelegateControl>
</asp:ContentPlaceHolder>
<div id="WebPartAdderUpdatePanelContainer">
    <asp:UpdatePanel ID="WebPartAdderUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false” runat="server">
       <ContentTemplate>
          <WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
        </ContentTemplate>
        <Triggers>
          <asp:PostBackTrigger ControlID="WebPartAdder" />
        </Triggers>
    </asp:UpdatePanel>
</div>
</div>

Maintain the Position of the Server Ribbon While Scrolling

Make the following changes to your master page to keep the Ribbon from scrolling with the content.

1. Move the content of your site inside the following div elements.

<div id="s4-workspace">
<div id="s4-bodyContainer">
Content
</div>
</div>

If your page is fixed width, add the class s4-nosetwidth to the s4-workspace div

Example
<div ID="s4-workspace" class="s4-nosetwidth">

2. Move the title area of your site into a div element with the following ID.

<div id="s4-titlerow">
Title Area
</div>

3. Update the body tag and Cascading Style Sheet (CSS) rule to not scroll. The body tag and rule would look similar to the following.

<body scroll="no" ...>
Body Content
</body>

Add Controls to the Master Page

There are a set of controls that are required for SharePoint to function: SPPageManager, ScriptManager, and ScriptLink controls.

Add these controls to your master page
1. Open your master page file.
2. Copy and paste the following code to add the ScriptManager control to the page. This must be within the form tag but before the Ribbon.

<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true" />

3. Copy and paste the following code to add the SPPageManager control to the page. This must be within the head tag.

<SharePoint:SPPageManager runat="server" />

4. Copy and paste the following code to add the ScriptLink control to the page. This must be within the head tag.

<SharePoint:ScriptLink defer= "true" runat="server"/>

5. Save your master page file.

Prevent Areas from Appearing in Modal Windows

To keep divs or other defined blocks of your master page from appearing in modal windows (those popups that appear when adding documents, viewing document properties, etc), add the class “s4-notdlg”.

This problem should only occur in the following circumstances:

1. Site uses a custom system master page (often the same master used by the publishing pages).
2. Custom master has omitted s4-notdlg from the class tag of areas to hide in modal windows.

Examples

The following area will appear in modal windows:

Adding s4-notdlg to the class will prevent this

Add a Content Placeholder to use Web Part in Master Page Area

Although you cannot insert a web part in a master page, a custom (empty) contentplaceholderid can be created which can then be utilized by page layouts to insert the part.

Steps in SharePoint Designer 2010

1. Add a uniquely named content placeholder in your custom master page
example:
<asp:ContentPlaceHolder id="PlaceHolderCopyright" runat="server"/>

2. Within a page layout insert custom content for the placeholder
<asp:Content ContentPlaceholderID="PlaceHolderCopyright" runat="server"></asp:Content>

3. Insert a web part using designer into the newly created area. If the same part is to appear across all pages using the layout, do not use a web part zone, simply insert the part directly into the area.

Suggested Resources

Blogs, Posts, and other helpful resources