When getting into SharePoint 2010 branding, one of the first things you will need to get your hands on is site masterpage is what are all of the components on it. Here I will explain the publishing masterpage which is extended version of the collaboration masterpage.
If this post sounds like what you’re doing a lot – check out my new branding book to see other related topics on the subject.
I assume you’re using 2010 IW Demo environment and www.contoso.com is your publishing site.
Let’s go ahead and take a look at the typical publishing masterpage to see which parts are where. Download an instance of the nightandday.master from your publishing site, which is the default publishing sample site masterpage:
1. From the http://www.contoso.com,which is the default publishing site on the virtual machine, click Site Actions->Site Settings
2. Under Galleries click Master pages and page layouts.
3. Download nightandday.master to the file system.
4. Open the file from the file system in Visual Studio.
I`ll skip all the namespace references and get right into the <HTML> section.
<!–Registers SharePoint out-of-the box javascript to initialize components on the page –>
<SharePoint:ScriptLink name=”init.js” runat=”server”/>
<!– Creates a reference to a custom JavaScript file to run on the page –>
<SharePoint:CustomJSUrl runat=”server” />
<SharePoint:SoapDiscoveryLink runat=”server” />
<asp:ContentPlaceHolder id=”PlaceHolderAdditionalPageHead” runat=”server”/>
<SharePoint:DelegateControl runat=”server” ControlId=”AdditionalPageHead” AllowMultipleControls=”true”/>
<! — Supplies favicon on the page –>
<SharePoint:SPShortcutIcon runat=”server” IconUrl=”/_layouts/images/favicon.ico” />
<SharePoint:SPPageManager runat=”server” />
<SharePoint:SPHelpPageComponent Visible=”false” runat=”server” />
<! — Registers out-of-the-boxe style sheets on the page by emitting LINK tag on the page –>
<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/controls.css %>” runat=”server”/>
<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/nightandday.css %>” After=”corev4.css” runat=”server”/>
</head>
<body scroll=”no”
<!–…–>
<!– Aids with Ajax script libraries and script files, partial-page rendering etc –>
<asp:ScriptManager id=”ScriptManager” runat=”server”
EnablePageMethods=”false” EnablePartialRendering=”true”
EnableScriptGlobalization=”true” EnableScriptLocalization=”true” />
<!– In charge of web parts and events on a webpage –>
<WebPartPages:SPWebPartManager runat=”server”/>
<! — Controls related to navigation accessibility; ensure the container not rendered in the modal dialog windows–>
<span id=”TurnOnAccessibility” style=”display:none”>
<! — … –>
</span>
<a id=”HiddenAnchor” href=”javascript:;” style=”display:none;”></a>
<! — Ribbon area starts here–>
<div>
<div>
<! — Site logo with link back to the root of the site–>
<div>
<h2>
<SharePoint:SPLinkButton id=”onetidProjectPropertyTitleGraphic” runat=”server” NavigateUrl=”~site/”>
<! — Site logo – in this case Adventure works logo–>
<SharePoint:SiteLogoImage name=”onetidHeadbnnr0″
id=”onetidHeadbnnr2″ LogoImageUrl=”<% $SPUrl:~sitecollection/Style Library/Images/nd_logo.png %>” runat=”server”/>
</SharePoint:SPLinkButton>
</h2>
</div>
<! — Area displaying social tags buttons, help button, and “welcome menu”–>
<div>
<SharePoint:DelegateControl runat=”server” ControlId=”GlobalSiteLink0″ />
<! — …–>
<div>
<! — Welcome menu control–>
<wssuc:Welcome id=”IdWelcome” runat=”server” EnableViewState=”false”>
</wssuc:Welcome>
<! — Multilanguage selector–>
<wssuc:MUISelector runat=”server”/>
</div>
<SharePoint:DelegateControl ControlId=”GlobalSiteLink2″ Scope=”Farm” runat=”server” />
<span>
<span style=”top:12px;display:inline-block;position:relative;”>
<! — If enabled by administrator, this will display an icon to call developer dashboard–>
<Sharepoint:DeveloperDashboardLauncher
ID=”DeveloperDashboardLauncher”
NavigateUrl=”javascript:ToggleDeveloperDashboard()”
runat=”server”
<!– … –>
<!–Area which will hold ribbon controls and button, also Site Actions and search controls–>
<div id=”s4-ribbonrow”>
<SharePoint:SPRibbon runat=”server”
PlaceholderElementId=”RibbonContainer”
CssFile=”">
<!–Left side of the ribbon starts here –>
<SharePoint:SPRibbonPeripheralContent
runat=”server”
Location=”TabRowLeft”
CssClass=”ms-siteactionscontainer s4-notdlg”>
<span id=”siteactiontd”>
<!–Site actions menu –>
<SharePoint:SiteActions runat=”server” accesskey=”<%$Resources:wss,tb_SiteActions_AK%>” id=”SiteActionsMenuMain”
PrefixHtml=”"
SuffixHtml=”"
MenuNotVisibleHtml=”&nbsp;”
>
<CustomTemplate>
<!–… site actions menu items …–>
</CustomTemplate>
</SharePoint:SiteActions>
</span>
<!–Global navigation menu allowing to navigate to the parent of the site and other site in the hierarchy–>
<SharePoint:PopoutMenu
runat=”server”
ID=”GlobalBreadCrumbNavPopout”
IconUrl=”/_layouts/images/fgimg.png”
IconAlt=”<%$Resources:wss,master_breadcrumbIconAlt%>”
IconOffsetX=0
IconOffsetY=112
IconWidth=16
IconHeight=16
<!– … –>
NodeImageUrl=”/_layouts/images/fgimg.png”
HideInteriorRootNodes=”true”
SkipLinkText=”" />
</asp:ContentPlaceHolder>
</SharePoint:PopoutMenu>
<!–The “save” button only appearing when the page is in edit mode –>
<SharePoint:PageStateActionButton id=”PageStateActionButton” runat=”server” Visible=”false” />
</SharePoint:SPRibbonPeripheralContent>
<!–The right side of the ribbon –>
<SharePoint:SPRibbonPeripheralContent
runat=”server”
Location=”TabRowRight”
CssClass=”s4-trc-container s4-notdlg”>
<!–The area holding the search controls –>
<div id=”s4-searcharea”>
<asp:ContentPlaceHolder id=”PlaceHolderSearchArea” runat=”server”>
<!–Search control injected as delegate –>
<SharePoint:DelegateControl runat=”server” ControlId=”SmallSearchInputBox” Version=”4″ />
</asp:ContentPlaceHolder>
</div>
</SharePoint:SPRibbonPeripheralContent>
</SharePoint:SPRibbon>
<! — Notification area right after the ribbon, that’s where quick notification messages pop up–>
<div id=”notificationArea”></div>
<asp:ContentPlaceHolder ID=”SPNavigation” runat=”server”>
<SharePoint:DelegateControl runat=”server” ControlId=”PublishingConsole” Id=”PublishingConsoleDelegate” />
</asp:ContentPlaceHolder>
<div id=”WebPartAdderUpdatePanelContainer”>
<!– … –>
</div>
</div>
<! –Main content area begind here–>
<div id=”s4-workspace”>
<div id=”s4-bodyContainer”>
<div id=”s4-titlerow”>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<! –Site breadcrumb – right next to the title and the logo image of the site–>
<td>
<asp:SiteMapPath
runat=”server”
SiteMapProviders=”SPSiteMapProvider,SPXmlContentMapProvider”
RenderCurrentNodeAsLink=”false”
NodeStyle-CssClass=”breadcrumbNode”
CurrentNodeStyle-CssClass=”breadcrumbCurrentNode”
RootNodeStyle-CssClass=”breadcrumbRootNode”
HideInteriorRootNodes=”true”
SkipLinkText=”" />
</td>
</tr>
<tr>
<td>
<! –Used by SharePoint to render title and description of the site–>
<h1><asp:ContentPlaceHolder id=”PlaceHolderPageTitleInTitleArea” runat=”server” /></h1>
<h3><asp:ContentPlaceHolder id=”PlaceHolderPageDescription” runat=”server” /></h3>
</td>
</tr>
</table>
</div>
<div id=”s4-statusbarcontainer”>
<! –Status bar displaying information such as whether the page is checked out, when will it be published etc –>
<div id=”pageStatusBar”></div>
</div>
<!–Begin Nav|Content Area–>
<div>
<a name=”startNavigation”></a>
<! –Current navigation (left side nav) will be injected here–>
<asp:ContentPlaceHolder id=”PlaceHolderGlobalNavigation” runat=”server” />
<asp:ContentPlaceHolder id=”PlaceHolderGlobalNavigationSiteMap” runat=”server” />
<div id=”s4-leftpanel”>
<asp:ContentPlaceHolder id=”PlaceHolderLeftNavBarDataSource” runat=”server” />
<asp:ContentPlaceHolder id=”PlaceHolderCalendarNavigator” runat=”server” />
<asp:ContentPlaceHolder id=”PlaceHolderWikiNavigator” runat=”server” />
<asp:ContentPlaceHolder id=”PlaceHolderLeftNavBarTop” runat=”server” />
<! –This defines the datasource for the navigation control–>
<PublishingNavigation:PortalSiteMapDataSource
ID=”SiteMapDS”
runat=”server”
EnableViewState=”false”
SiteMapProvider=”CurrentNavigation”
StartFromCurrentNode=”true”
StartingNodeOffset=”0″
ShowStartingNode=”false”
TrimNonCurrentTypes=”Heading”/>
<asp:ContentPlaceHolder id=”PlaceHolderLeftNavBar” runat=”server”>
<! –This will render left navigation UI –>
<SharePoint:AspMenu
ID=”CurrentNav”
runat=”server”
EnableViewState=”false”
DataSourceID=”SiteMapDS”
UseSeparateCSS=”false”
UseSimpleRendering=”true”
Orientation=”Vertical”
StaticDisplayLevels=”2″
MaximumDynamicDisplayLevels=”0″
CssClass=”nightanday-menu”
SkipLinkText=”<%$Resources:cms,masterpages_skiplinktext%>”/>
<!– … –>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder id=”PlaceHolderLeftActions” runat=”server” />
<asp:ContentPlaceHolder id=”PlaceHolderNavSpacer” runat=”server” />
</div>
<div id=”MSO_ContentDiv” runat=”server”>
<!–Main part of the page where all the web parts and other content is rendered –>
<div>
<a name=”mainContent”></a>
<asp:ContentPlaceHolder id=”PlaceHolderMain” runat=”server” />
</div>
</div>
<!–If enabled, this allows to open a developer dashboard–>
<div id=”DeveloperDashboard”>
<SharePoint:DeveloperDashboard runat=”server” />
</div>
<! –Panel hiding all of the unused content placeholders – this way if SharePoint inserts any controls they will be hidden from the user–>
<asp:Panel Visible=”false” runat=”server”>
<!–Site name defined in the Site Settings–>
<asp:ContentPlaceHolder id=”PlaceHolderSiteName” runat=”server” />
<!–Site top navigation bar –>
<asp:ContentPlaceHolder id=”PlaceHolderTopNavBar” runat=”server” />
<!–Menu within the top nav bar –>
<asp:ContentPlaceHolder id=”PlaceHolderHorizontalNav” runat=”server” />
<!–Site image set in Site Settings–>
<asp:ContentPlaceHolder ID=”PlaceHolderPageImage” runat=”server” />
<!–Border for the left page side –>
<asp:ContentPlaceHolder ID=”PlaceHolderBodyLeftBorder” runat=”server” />
<!–Border for the left page side in the title area–>
<asp:ContentPlaceHolder ID=”PlaceHolderTitleLeftBorder” runat=”server” />
<!– Border for the left page side in the title area separator –>
<asp:ContentPlaceHolder ID=”PlaceHolderTitleAreaSeparator” runat=”server” />
<!–Margin of the title area–>
<asp:ContentPlaceHolder ID=”PlaceHolderTitleRightMargin” runat=”server” />
<!–Body area class –>
<asp:ContentPlaceHolder id=”PlaceHolderBodyAreaClass” runat =”server” />
<!–Title area class–>
<asp:ContentPlaceHolder id=”PlaceHolderTitleAreaClass” runat =”server” />
<!–Margin of the body area–>
<asp:ContentPlaceHolder id=”PlaceHolderBodyRightMargin” runat=”server” />
</asp:Panel>
That’s it – next on the way – page layout!
Enjoy!
