How To Customize SharePoint Search Box

 

SharePoint sites comes with a predefined look and feel which is quite dull in nature. So, developers used to create their own project specific master page to create stunning look for their sites. Now many times developers feel helpless to change the look and feel of the OOB search control present in the master page. This post describes how to customize OOB SharePoint Search Box as per project needs.

To customize the OOB Search Box we need three items -
1. Custom User Control
2. Feature to install and activate Custom Control
3. Image of the Search Button

So, before continuing please download the above items from the following location:
Download SP Search Box Customization Solution

Our objective is to change the following search box

 

 

into a more formal one as follows

Now, you need to do the following steps:

1. Unzip what you have downloaded and extract them. There you are going to find one folder named ‘NewSearchBox’. Open that folder and you will found one file ‘feature.xml’ in that. Open feature.xml file and change the ‘Feature Id’ by a new GUID. Save the file and close it.
2. Now, copy the ‘NewSearchBox’ folder and paste it in ‘C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\FEATURES’ folder.
3. Copy the ‘mySearchArea.ascx’ file and place it in ‘C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\CONTROLTEMPLATES’ folder.
4. Copy the ‘urbn_go.JPG’ picture and paste it in ‘C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\IMAGES’ folder.
5. At a command prompt, navigate to \Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN on the local drive, and type each of the following commands to install the Feature in the deployment, activate the Feature on a specified sub site, and reset Microsoft Internet Information Services (IIS) so that the changes take effect:
   
   stsadm -o installfeature -filename NewSearchBox\Feature.xml
   stsadm -o activatefeature -filename NewSearchBox\Feature.xml -url http://Server/Site/Subsite
   iisreset
6. Open the sub site and you will see the OOB Search Box has been replaced by our own customized search box.

Now for further customization, you can play with the ‘mySearchArea.ascx’ file and change the ‘urbn_go.JPG’ by your own picture also.

Ref:
Heather Solomon's blog
Customize a Delegate Control