Kyle's SharePoint Karate

Design Minutes are quick design changes that you can make to your SharePoint site, adding flavor to the overall style of your design.

This Design Minute will focus on the SharePoint Search Box control.  Getting the search box to look just the way you'd like can be a frustrating task.  Fortunately, there are some quick and easy changes that you can make to the search control that can really add some style to your overall design.

The first step is customizing your master page.  The default.master uses a place holder (PlaceHolderSearchArea) to define the location in which your search box appears.  Unfortunately, a lot of the default page layouts will override the appearance of this place holder, and as a result, your search box can look different depending on what you're looking at.  This is a designer's worst nightmare -- you'll need to lock down the apperance of the search box before you can do anything else.

1. Open your custom master page in SharePoint Designer
2. Put this line of code at the top of your master page (it may already be there):
   <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
3. Find the line in your master page that begins with <asp:ContentPlaceHolder id="PlaceHolderSearchArea"...
4. You need this line of code in your master page, but we don't want it to appear, so put it in a hidden ASP panel near the bottom of your master page:
   <asp:Panel visible="false" runat="server"> <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"/> </asp:Panel>
5. Place the following code where you want your search box to appear:
   <div id="searchLayout"> <SPSWC:SearchBoxEx id="SearchBox" RegisterStyles="false" TextBeforeTextBox="" TextBoxWidth="200" GoImageUrl="" GoImageActiveUrl="" GoImageUrlRTL="" GoImageActiveUrlRTL="" UseSiteDefaults="true" DropDownMode="HideScopeDD" SuppressWebPartChrome="true" runat="server" WebPart="true" __WebPartId="{0043945F-2D2B-4A02-8510-CED13B6F04DF}"/> </div>

After saving your changes, you should see something like this on your site:

This isn't very exciting, I know, but it's a start.  Now that we have a static search box control (that won't change it's appearance!), we can start to add some style to it.  There are two images that I'm going to use for this search box -- a background image and a search icon.  Upload these two images somewhere on your server:

With our images in place, all that's left is some CSS style additions.  Add the following two lines of code to your default CSS file:

Once you save your changes, your search box should look something like this:

That's it!  The CSS adds a magnifying glass to the input box, and it adds the repeating background image to the table cell that contains the input box.  If you'd like to show a javascript prompt string (such as "Search the Site"), just add QueryPromptString="Search the Site" to your search box control parameters.