Branding SharePoint Search Center to Bing Look & Feel

In this article I will show you, step by step, how to brand your search center with tabs and turn it to Bing look and feel. This article comes with a complete downloadable visual studio 2008 solution.

Branding SharePoint Search Center to Bing Look & Feel

In this article I will show you, step by step, how to brand your search center with tabs and turn it to Bing look and feel. This article comes with a complete downloadable visual studio 2008 solution.

One of SharePoint’s most powerful features is the Search, for many users it is the start point of the site. SharePoint comes with two various search templates, the Search Center and the Search Center with tabs. Personally I prefer the tabs functionality which helps users to search within a certain domain, like peoples, sites or other domains. Actually it is very similar to Bing functionality, where you can search for sites, images, news, etc. So I thought it would be nice to give the SharePoint Center with tabs the unique Bing look.

Ok, Let’s Bing it!

Applies to: Microsoft Office SharePoint Server 2007, SharePoint Designer and Visual Studio 2008 with WSPBuilder Extensions

Step 1 – Create WSPBuilder Solution
1. Start Visual Studio.
2. On the File menu, click New, and then click Project. The New project dialog box appears.
3. Select WSPBuilder and then WSPBuilder Project.
4. Give your solution a name and click OK.
5. Right click on the solution, Add new item.
6. Select Blank Feature from WSPBuilder menu.

Step 2 - Configure the Feature Definition
1. Modify the Title, Description and Scope (Site) in the Feature.xml..
2. Configure the elements.xml file to provision a new page layout, as shown in the following code.

<?xml version="1.0" encoding="utf-8" ?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

<Module Name="MPGPopulation" Url="_catalogs/masterpage" Path="" RootWebOnly="TRUE">

<File Url="SearchMainBing.aspx" Type="GhostableInLibrary" >

<Property Name="Title" Value="Serach Main Bing Layout" />

<Property Name="MasterPageDescription" Value="Branding the SharePoint Search Center with Tabs. A new Bing look and feel page layout. - by Alon Havivi http://havivi.blogspot.com" />

<Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />

<Property Name="PublishingAssociatedContentType" Value=";#$Resources:cmscore,contenttype_welcomepage_name;;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F200794 8130EC3DB064584E219954237AF390064DEA0F50FC8C147B0B6EA0636C4A7D4;#" />

<Property Name="PublishingPreviewImage" Value="~SiteCollection/_catalogs/masterpage/Preview Images/bingsearchpage.gif, ~SiteCollection/_catalogs/masterpage/Preview Images/bingsearchpage.gif" />

<AllUsersWebPart WebPartZoneID="TopZone" WebPartOrder="1">

<![CDATA[

<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2">

<Assembly>Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>

<TypeName>Microsoft.SharePoint.Portal.WebControls.SearchBoxEx</TypeName>

<Title>$Resources:spscore,SearchBoxWP_Title;</Title>

<Description>$Resources:spscore,SearchBoxWP_Desc;</Description>

<FrameType>None</FrameType>

<AllowMinimize>true</AllowMinimize>

<AllowRemove>true</AllowRemove>

<IsVisible>true</IsVisible>

<Width>420px</Width>

<GoImageUrl xmlns="urn:schemas-microsoft-com:SearchBoxEx">/_layouts/images/gosearch.gif</GoImageUrl>

<GoImageUrlRTL xmlns="urn:schemas-microsoft-com:SearchBoxEx">/_layouts/images/goRTL.gif</GoImageUrlRTL>

<GoImageActiveUrl xmlns="urn:schemas-microsoft-com:SearchBoxEx">/_layouts/images/gosearch.gif</GoImageActiveUrl>

<GoImageActiveUrlRTL xmlns="urn:schemas-microsoft-com:SearchBoxEx">/_layouts/images/goRTL.gif</GoImageActiveUrlRTL>

<TextBoxWidth xmlns="urn:schemas-microsoft-com:SearchBoxEx">280</TextBoxWidth>

<SearchResultPageURL xmlns="urn:schemas-microsoft-com:SearchBoxEx">results.aspx</SearchResultPageURL>

<AdvancedSearchPageURL xmlns="urn:schemas-microsoft-com:SearchBoxEx">~Site/$Resources:cmscore,List_Pages_UrlName;/advanced.aspx</AdvancedSearchPageURL>

<ShowAdvancedSearch xmlns="urn:schemas-microsoft-com:SearchBoxEx">true</ShowAdvancedSearch>

<DropDownMode xmlns="urn:schemas-microsoft-com:SearchBoxEx">HideScopeDD</DropDownMode>

<ShouldTakeFocusIfEmpty xmlns="urn:schemas-microsoft-com:SearchBoxEx">true</ShouldTakeFocusIfEmpty>

</WebPart>

]]>

</AllUsersWebPart>

<AllUsersWebPart WebPartZoneID="TopZone" WebPartOrder="2">

<![CDATA[

<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>$Resources:spscore,PrivacyStatementWP_Title;</Title>

<FrameType>None</FrameType>

<Description>$Resources:spscore,PrivacyStatementWP_Desc;</Description>

<FrameState>Normal</FrameState>

<Assembly>Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>

<TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>

<ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />

<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">

<div class="ms-sblink">

<a href="javascript:HelpWindowKey('how_content_is_searched')">

$Resources:spscore,PrivacyStatementWP_LinkText;

</a>

</div>

</Content>

<PartStorage xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />

</WebPart>

]]>

</AllUsersWebPart>

</File>

</Module>

<Module Name="LayoutPreviewImages" Url="_catalogs/masterpage/Preview Images" Path="Images" RootWebOnly="TRUE">

<File Url="bingsearchpage.gif" Type="GhostableInLibrary"/>

</Module>

</Elements>

Step 3 – Find the Page Layout

Before we can customize the current default page of the search center with tabs, we need to know which layout the search center use. For this, we can use the SharePoint Designer.

1. Open SharePoint Designer.
2. Open your search center site (File -> Open Site).
3. Browse to the default page (Pages -> default.aspx).
4. Open the page by selecting Edit Page Layout
5. You can see in the second tab the page layout file name, in our case SearchMain.aspx.

Step 4 – Brand the Page Layout
SharePoint Designer is the best place to customize your page layout. SharePoint Designer provides a good what-you-see-is-what-you-get (WYSIWYG) environment for customizing pages in SharePoint. First, I customize my page in SharePoint Designer. Next, when the design job is completed, I just have to copy it to Visual Studio solution.

In this case I added a custom stylesheet, modify the position of the search box and added some HTML code. This is the result (changes are highlighted in yellow):

<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=12.0.0.0, Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="OSRVWC" Namespace="Microsoft.Office.Server.WebControls" Assembly="Microsoft.Office.Server, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SEARCHWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">

<asp:literal runat="server" Text="<%$Resources:sps, Search_MainPage_Title%>" />

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

<link rel="stylesheet" type="text/css" id="bingCSS" href="/_layouts/images/bing/bing.css" /> </asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderLeftNavBar" runat="server">

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderNavSpacer" runat="server">

</asp:Content>

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

<div height=100% class="ms-pagemargin"><IMG SRC="/_layouts/images/blank.gif" width=6 height=1 alt=""></div>

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderPageImage" runat="server">

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderTitleLeftBorder" runat="server">

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderTitleBreadcrumb" runat="server">

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">

<label class="ms-hidden"><asp:literal runat="server" Text="<%$Resources:sps, Search_MainPage_Title%>" /></label>

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderTitleAreaSeparator" runat="server">

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderSearchArea" runat="server">

</asp:Content>

<asp:content contentplaceholderid="PlaceHolderMain" runat="server">

<table style="height:80%;width:100%"><tr><td align="center" valign="middle">

<DIV style="BORDER-RIGHT: #d0d9dd 1px solid; BORDER-TOP: #d0d9dd 1px solid; BORDER-LEFT: #d0d9dd 1px solid; BORDER-BOTTOM: #d0d9dd 1px solid;width: 956px;FILTER: ; BACKGROUND-IMAGE: url(/_layouts/images/bing/background.jpg); HEIGHT: 478px; opacity: 1">

<table width="100%">

<tr><td style="height: 75px" colspan="2"> </td></tr>

<tr><td style="width:186px">

<table><tr><td colspan="2" style="height:26px"> </td></tr>

<tr><td width="30"> </td><td><img src="/_layouts/images/bing/logo.png" /></td></tr>

</table>

</td><td align="center">

<A name="mainContent"></A>

<SPSWC:ListBoundTabStrip ID="Tab" runat="server" PersistQueryString="true" CSSClassNamePrefix="ms-sctab" ListName="<%$Resources:sps,SearchCenterOnet_SearchCenterListName%>" UnselectedTabTrimLength="-1"></SPSWC:ListBoundTabStrip>

<SPSWC:PageLevelError runat="server" id="PageLevelError"/>

<WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" AllowPersonalization="false" Title="<%$Resources:sps,LayoutPageZone_BottomZone%>" ID="MiddleLeftZone" Orientation="Vertical" QuickAdd-GroupNames="Search" QuickAdd-ShowListsAndLibraries="false"/> <!-- _locID@Title="L_MiddleLeftZone_Title" -->

</td></tr></table>

</DIV>

<table style="width: 956px;COLOR: #898994;font-family:Arial, Helvetica, sans-serif;font-size:8pt;"><tr><td align="right"><a href="http://havivi.blogspot.com" target="_blank" style="COLOR: #898994;font-family:Arial, Helvetica, sans-serif;font-size:8pt;">by Alon Havivi</a></td></tr></table>

</td></tr></table>

</asp:content>

Copy the complete code above to your Visual studio project. Add these branding elements:
bing.css
background.jpg
go.png
logo.png
bingsearchpage.gif

Your solution explorer should look like this now:

Step 5 - Package and Deploy
1. Right click on the Project –> WSPBuilder –> Build WSP
2. Right click on the Project –> WSPBuilder –> Deploy

Step 6 - Test the Feature
1. On the Site Actions menu, click Site Settings, and then click Modify All Site Settings.
2. On the Site Settings, Select Site Collection Features
3. Activate Bing Search Layout feature
4. On the Site Settings, Select Page Layout and Site Template Settings
5. Add the Serach Main Bing Layout

6. On the Site Actions menu, click Create Page

Now, after creating the new page, it should look like this:

Conclusion
This article shows the entire process of branding a single Layout Page in SharePoint. First, we customize the page in SharePoint Designer. Next, creating a new project in Visual Studio, then adding a feature that provisions all the files involved. Finally, deploy and activate our new Layout Page.


Share this article | Download the Visual Studio Solution Download the WSP Solution



By Alon Havivi   Popularity  (8810 Views)
Picture
Biography - Alon Havivi

Alon Havivi is a Microsoft Certified Technology Specialist, working as SharePoint Consultant / Developer at e-office. Specialized in SharePoint 2007/2010 and SharePoint Online (Office 365). With more than 10 years of experience in analysis, design and development complex Internet and Intranet portals using the latest Microsoft tools and practices, such as C# .NET 4.0, Silverlight and Windows Azure platform. Besides professional work, I write articles/blog and publish open source projects on CodePlex
View Alon Havivi's professional profile on LinkedIn. View Alon Havivi's projects on CodePlex. View Alon Havivi's articels on Eggheadcafe. Follow Alon Havivi on Twitter Connect with Alon Havivi via Facebook View Alon Havivi's Blog Subscribe to Alon Havivi RSS Feed