کد:
http://www.eggheadcafe.com/tutorials/aspnet/338069d3-aec6-4e36-b959-dd1d348af0f7/branding-sharepoint-searc.aspx

Alon Havivi

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_nam e;" />
<Property Name="PublishingAssociatedContentType" Value=";#$Resources:cmscore,contenttype_welcomepage_nam e;;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F200794 8130EC3DB064584E219954237AF390064DEA0F50FC8C147B0B 6EA0636C4A7D4;#" />
<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.Conten tEditorWebPart</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_sea rched')">
$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.PublishingLayout Page,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_SearchCenterLi stName%>" 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



موضوعات مشابه: