OOTB Search Centre

SharePoint 2010 Modifying the Search Centre Master Page and Page Layouts


If you create a Search Centre in your SharePoint 2010 site collection, you may notice that it’s somewhat lacking in the navigation and breadcrumb goodies, as shown in the image below.

OOTB Search Centre
OOTB Search Centre

Perhaps you want to fix this, so you change the search site master page to v4.master, or you’ve created your own custom masterpage perhaps also based on v4.master, and now sadly, the search controls seem to be missing;

Search Centre with v4.master or deriavtive
Search Centre with v4.master or deriavtive

With a bit of snooping, it turns out that the search controls are hiding in the breadcrumb popout menu and clicking the breadcrumb reveals this;

Search Controls Revealed
Search Controls Revealed

If by some magic you get some text in there to search, or you navigate directly to the search results page, thats no better either as the search controls are still hiding, but at least you do get to see the search results;

Search Results Page
Search Results Page

So whats the problem, well the Basic Search Centre and the Enterprise Search Centre use the minimal.master master page and the search page layouts are designed for that master page, in particular minimal.master doesn’t provide any of the usual navigation and location controls one might expect, and neither does it provide for a ribbon row.

While we’re talking about the ribbon row, the OOTB search page layouts provide their own ribbon row using the SPNavigation content placeholder, and this makes sense seeing as minimal.master doesn’t.

In his post “Converting a Custom SharePoint 2010 Master Page into a Search Center Master Page” Randy Drisgill talks about this issue and offers a solution to it by modifying (a copy of) v4.master which will work correctly with the OOTB search page layouts. Towards the end of his post he also mentions a possible solution to a double ribbon scenario in which after applying a modified master page, the page displays with 2 ribbons showing.

If you apply Randy’s changes to a fresh copy of the OOTB v4.master, this doesn’t happen, however if you apply those changes to your own custom master page and you get the double ribbon, it’s not to be unexpected, because v4.master defines a ribbon row, as do the OOTB search page layouts (in the SPNavigation content placeholder) – so whether you get the double ribbon depends on how you’ve laid out your own custom master page.

My solution follows Randy’s option 2 in his post, creating new Search page layouts or adjusting the OOTB Search page layouts to use the standard content placeholders, indeed in my solution I place everything in PlaceHolderMain, along with some minor core CSS style overrides.

So, create a new page layout using the Welcompage publishing content type, and add the following page tags;

<%@ Register TagPrefix="WpNs0" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.Office.Server.Search, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,
Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="OSRVWC" Namespace="Microsoft.Office.Server.WebControls" Assembly="Microsoft.Office.Server, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="OSRVUPWC" Namespace="Microsoft.Office.Server.WebControls" Assembly="Microsoft.Office.Server.UserProfiles, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SEARCHWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %></code>

Add the following CSS rules to an PlaceHolderAdditionalPageHead content placeholder

		/* hide entire left panel */
		.v4master #s4-leftpanel
		{ display: none; }
		.v4master .s4-ca
		{ margin-left: 0px; }

		/* sharepoint css overrides */
		.srch-sb-main
		{ padding-top:0px; padding-left:0px; padding-bottom:0px; }

		.srch-sb-results4
		{ width:auto; }

		TD.ms-bodyareaframe
		{ border:none; }
		/* */

Add the following to a PlaceHolderMain content placeholder

	<WebPartPages:SPProxyWebPartManager runat="server" id="ProxyWebPartManager"></WebPartPages:SPProxyWebPartManager>

	<!-- Start of Breadcrumb -->
	<table style="padding-top:5px; padding-left:5px; padding-bottom:10px;" border="0" cellpadding="0" cellspacing="0" ID="OuterZoneTable" width="100%">
	<tr>
		<td class="ms-pagebreadcrumb">
			<asp:SiteMapPath ID="ContentMap" Runat="server" SiteMapProvider="CurrentNavSiteMapProviderNoEncode" RenderCurrentNodeAsLink="false" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional"/>
		</td>
	</tr>
	</table>

	<!-- Start of Search Box -->
	<div class="srch-sb-main">
		<div class="srch-sb-results4">
			<div class="srch-sb-results1">
				<SPSWC:ListBoundTabStrip ID="Tab1" runat="server" CSSFileName="Themable/search.css" PersistQueryString="true" CSSClassNamePrefix="ms-sctab" ListName="<%$Resources:Microsoft.Office.Server.Search,SearchCenterOnet_SearchCenterListName%>" ResourceIdforListName="$Resources:Microsoft.Office.Server.Search,SearchCenterOnet_SearchCenterListName" UnselectedTabTrimLength="-1"></SPSWC:ListBoundTabStrip>
			</div>
			<div class="srch-sb-results2">
				<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" FrameType="TitleBarOnly" Title="<%$Resources:Microsoft.Office.Server.Search,LayoutPageZone_TopZone%>" ID="TopZone" Orientation="Vertical" QuickAdd-GroupNames="Search" QuickAdd-ShowListsAndLibraries="false"><ZoneTemplate>
<WpNs0:SearchBoxEx runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="{C8385360-CB7A-431B-A387-FC309BA5B332}" >
<WebPart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.microsoft.com/WebPart/v2">
  <Title>Search Box</Title><FrameType>None</FrameType><Description>Displays a search box that allows users to search for information.</Description><IsIncluded>true</IsIncluded><ZoneID>TopZone</ZoneID><PartOrder>2</PartOrder><FrameState>Normal</FrameState><Height /><Width>800px</Width><AllowRemove>true</AllowRemove><AllowZoneChange>true</AllowZoneChange><AllowMinimize>true</AllowMinimize><AllowConnect>true</AllowConnect><AllowEdit>true</AllowEdit><AllowHide>true</AllowHide><IsVisible>true</IsVisible><DetailLink /><HelpLink /><HelpMode>Modeless</HelpMode><Dir>Default</Dir><PartImageSmall /><MissingAssembly>Cannot import this Web Part.</MissingAssembly><PartImageLarge /><IsIncludedFilter /><ExportControlledProperties>true</ExportControlledProperties><ConnectionID>00000000-0000-0000-0000-000000000000</ConnectionID><ID>g_c8385360_cb7a_431b_a387_fc309ba5b332</ID><GoImageUrl xmlns="urn:schemas-microsoft-com:SearchBoxEx">/_layouts/images/gosearch30.png</GoImageUrl><GoImageUrlRTL xmlns="urn:schemas-microsoft-com:SearchBoxEx">/_layouts/images/gosearchrtl30.png</GoImageUrlRTL><GoImageActiveUrl xmlns="urn:schemas-microsoft-com:SearchBoxEx">/_layouts/images/gosearchhover30.png</GoImageActiveUrl><GoImageActiveUrlRTL xmlns="urn:schemas-microsoft-com:SearchBoxEx">/_layouts/images/gosearchrtlhover30.png</GoImageActiveUrlRTL><ShowAdvancedSearch xmlns="urn:schemas-microsoft-com:SearchBoxEx">true</ShowAdvancedSearch><DropDownModeEx xmlns="urn:schemas-microsoft-com:SearchBoxEx">HideScopeDD</DropDownModeEx><IsMysiteSearchBox xmlns="urn:schemas-microsoft-com:SearchBoxEx">false</IsMysiteSearchBox><TextBoxWidth xmlns="urn:schemas-microsoft-com:SearchBoxEx">368</TextBoxWidth><ShowPerferenceLink xmlns="urn:schemas-microsoft-com:SearchBoxEx">true</ShowPerferenceLink><ShowQuerySuggestions xmlns="urn:schemas-microsoft-com:SearchBoxEx">true</ShowQuerySuggestions><SearchBoxVisual xmlns="urn:schemas-microsoft-com:SearchBoxEx">SearchCenterDefault</SearchBoxVisual><AdvancedSearchPageURL xmlns="urn:schemas-microsoft-com:SearchBoxEx">/sites/micr/Pages/advanced.aspx</AdvancedSearchPageURL><SearchResultPageURL xmlns="urn:schemas-microsoft-com:SearchBoxEx">results.aspx</SearchResultPageURL><RegisterStyles xmlns="urn:schemas-microsoft-com:SearchBoxEx">true</RegisterStyles><ShouldTakeFocusIfEmpty xmlns="urn:schemas-microsoft-com:SearchBoxEx">true</ShouldTakeFocusIfEmpty></WebPart></WpNs0:SearchBoxEx>
</ZoneTemplate></WebPartPages:WebPartZone>
			</div>
		</div>
	</div>
	<!-- -->

	<!-- Start of Bottom Zone WebPart Zone -->
	<table width="100%">
		<tr>
			<td><img src="/_layouts/images/blank.gif" width="5" height="1" alt="" /></td>
			<td class="ms-bodyareaframe" valign="top" width="100%">
				<table border="0" cellpadding="0" cellspacing="0" id="ZoneTable" width="100%" class="ms-tztable">
					<tr id="MiddleRow">
						<td valign="top" id="MiddleLeftCell" width="100%" class="ms-tzmidleft">
							<WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" AllowPersonalization="false" Title="<%$Resources:Microsoft.Office.Server.Search,LayoutPageZone_BottomZone%>" ID="MiddleLeftZone" Orientation="Vertical" QuickAdd-GroupNames="Search" QuickAdd-ShowListsAndLibraries="false"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> <!-- _locID@Title="L_MiddleLeftZone_Title" -->
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<!-- -->

	<!-- Notification and PublishingConsole degelate -->
	<div id="notificationArea" class="s4-noti"></div>

	<SharePoint:DelegateControl runat="server" ControlId="PublishingConsole"></SharePoint:DelegateControl>
	<div>
		<WebPartPages:WebPartAdder ID="WebPartAdder" runat="server"/>
	</div>
	<!-- -->

Add the following content placeholders

<asp:Content ContentPlaceHolderId="PlaceHolderBodyLeftBorder" runat="server">
</asp:Content>

<asp:Content contentplaceholderid="PlaceHolderPageImage" runat="server" />

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
	<SharePoint:FieldValue id="PageTitle1" FieldName="Title" runat="server"/>
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
	<SharePoint:FieldValue id="PageTitle2" FieldName="Title" runat="server"/>
</asp:Content>

<asp:Content contentplaceholderid="PlaceHolderPageDescription" runat="server" >
	<SharePoint:FieldValue id="PageDescription" FieldName="Comments" runat="server"/>
</asp:Content>

<asp:Content contentplaceholderid="PlaceHolderLeftActions" runat="server" />
<asp:Content contentplaceholderid="PlaceHolderBodyRightMargin" runat="server" />

Follow the same pattern for the results, people and advancedsearch page layouts. After that set v4.master as the Search master page and create new search page instances based on your new page layouts;

Search.

Search
Search

Results.

Search Results
Search Results

Advanced Search.

Advanced Search
Advanced Search

Published by

Phil Harding

SharePoint Consultant, Developer, Father, Husband and Climber.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s