SharePoint 2007 Design Tip: Create a custom search input interface

A common request is to alter the default look of the search input and button area to something that better matches a design or fits better in space that is available. When working with the default search, you are limited to the CSS classes provided to you and the layout that ships with SharePoint. It is possible to create your own search display by deploying a Feature. Note I am not referring to search results, just the search box area available on most SharePoint pages, generally located in the header section.

MSDN documents this process and the code they provide will nearly work as is. There are two changes that need to be done to their code in order for the Feature to function on your web site. Below are the changes and a few other tips and resources to help you.

*** NOTE: This is to modify the basic search for WSS. MOSS uses another Feature for search (OsearchEnhancedFeature) and if you do the following actions, your custom scopes will not appear in the drop down box. If you are not using custom scopes, or if you don’t want or use “All Sites” and “People” search scopes, you can use this method to adjust your MOSS search display. ***

  1. Open up the MSDN article.
  2. Complete step 1 and 2.
    1. Note the HIDDEN property and value in the Feature tag. Make sure you change the HIDDEN value to FALSE. We need to show the Feature. 🙂 Thanks to AC for this tip. This is not required, but you will more than likely want to show this Feature in your site Features list.
    2. Note the SCOPE property and value. This article has you set the Feature’s scope to WEB, which is fine. But you will have to activate this Feature for every site (and sub site) that needs to use the new search area. Depending on your setup, this may not be ideal. Other options for this value are Farm, WebApplication, and Site. The first two are self explanatory, and Site means site collection. Web means a single web site.
  3. Complete step 3.
    1. Note the sequence value. For WSS, 99 will work. For MOSS, you need to lower the value to 20. Thanks to AC’s book, Professional SharePoint 2007 Web Content Management Development: Building Publishing Sites with Office SharePoint Server 2007 (Wrox Programmer to Programmer) for this tip.
    2. Note the two properties the article has you add in. For a full list of possible properties you can use here, check out the SearchBoxEx Members and look under Public Properties.
  4. Complete step 4. Note that you can name the new file whatever you like, and store it in a sub folder. If you place the file in sub folder, you can easily identify your custom ASCX files and they won’t get lost in the jumble of the default SharePoint files.
  5. Step 5 is up to you. If you want to do the changes just like the article, follow this step. Otherwise, in your custom ASCX file, make any adjustments you like including dropping the table, using DIVs, adding custom text and images, etc. You can also specify custom CSS classes. Store your CSS properties in your site style sheet.
  6. Complete steps 6 and 7. Note, if you set the scope to Farm, you don’t have to activate the Feature. That happens automatically when you install the Feature.

That’s it! In a relatively short period of time you can create a custom search display for your site.

Alternatively, John Ross has blogged about another method using JavaScript. Check out his post here.

I have found a few more resources online, here they are in case you want to learn/do more:
Project to customize the small search control in SharePoint 2007
Redirect Contextual Search Results to Search Centre Results Page
Search Results Page may be different per Search Scope