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