When branding a SharePoint 2010 site, both Publishing and Collaboration template, you’re likely to touch masterpage and pages to apply custom look and feel.
In my latest SharePoint branding book we look at many customizations and branding methods; in this example I want to show you one of the most common issues that happen when branding a SharePoint site with complex markup and styles.
When applying custom header to your site is that you locate the out-of-the-box header and replace it with your custom markup.
In the screenshot below, for example, we have a section of the markup for our out-of-the-box header. This section is located in our collaboration masterpage.
When replaced with our custom markup – the section highlighted above will be rendered all right but not in the edit mode of the page.
What I mean is when an end user or content author accesses the page’s edit mode to, say, add web parts or change a content on the page, the section in the header you replace will not be displayed.
Sometimes this is OK, if the only thing you have replaced is the top section of the site. In many cases, though, you’ll see developers putting entire placeholders where the actual page content will be rendered including navigation right under the header of the page rather than designated panel (which I talk about further).
So you’ll see something like this:
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"></asp:ContentPlaceHolder>
right under the header section of the page.
As you know, PlaceHolderMain will be used on pages to place page content. This means that if user switches the page into the edit mode to add webparts of edit content, by default, the entire content of the page will be hidden. As an end user you will actually have to switch to the Browse tab in the ribbon to see the page; but as soon as you focus on editing any of the content – you will right away be thrown back into the blank page mode. Not a very friendly user experience, is it.
The problem here is that SharePoint has a special place for PlaceHolderMain and anything esle you would like to display to your users during the page edit.
The content should be placed in the following section (in the collbaoration masterpage):
<div id="MSO_ContentDiv" runat="server"> </div>
Anything within MSO_ContentDiv will show up in view and edit mode of the page.
If you have a complex page header and you don’t want your content editors be thrown off when switching to the edit mode of the page – it’s a good idea to place most of your page content including navigation into the MSO_ContentDiv too.
When adding a navigation ensure you’re also placing the navigation datasource delegate along with the navigation control declaration it to avoid entire page crashing. Here is how your masterpage may look like from the skeleton-structure standpoint:
<div id="MSO_ContentDiv" runat="server"> <!-- ... my custom header ... --> <!-- navigation --> <SharePoint:AspMenu ID="TopNavigationMenuV4" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="1" SkipLinkText="" CssClass="mNav" /> <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate"> <Template_Controls> <asp:SiteMapDataSource ShowStartingNode="False" SiteMapProvider="SPNavigationProvider" id="topSiteMap" runat="server" StartingNodeUrl="sid:1002"/> </Template_Controls> </SharePoint:DelegateControl> <!-- page content --> <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"></asp:ContentPlaceHolder> <!-- ... rest of the content ... --> </div>
Enjoy!
