Customizing the search box in SharePoint 2010

In this blog post I will show you how to customize the search area in the header of your custom master page.

Since this site is for an intranet, I started by making a copy of the v4.master and renaming that copy. You could also use the Starter Master Page, by Randy Drisgill on CodePlex.

When I customize a master page typically I will wrap the #s4-searcharea in a DIV using my own ID. This ID will only be used for placement and positioning.

<div id=”my-searcharea”>

<div id=”s4-searcharea”> …. </div>

#my-searcharea { float: right;  padding-top: 15px;  position: relative; }

Note: Depending on your layout, your CSS may look a little different. 

Next we want to add some CSS to make our search area, look pretty/cool/better than OOTB SharePoint. Here are some examples of what we have done in the past.

#my-searcharea #s4-searcharea #SRSB {
background: url(“../images/search.png”) no-repeat scroll 0 0 transparent;
height: 30px;  width: 230px;}

Note: your height and width would change according to your image.

If I didn’t include the #my-searcharea before the other two ID’s then my pretty search box would show on the search results page. The #s4-searcharea is also used on the search results page, just above the content area.

Q: Why not just change the #s4-searcharea that is already in place?

A: Two reasons – 1) since I am positioning my search area within my header, I don’t want that CSS to carry over to my search results page, and 2) I don’t think it’s a good idea to alter the #s4-search area CSS as it could be used in a number of different places. Remember that we are only focusing on the search box in the header area.

The CSS above just placed and image behind the DIV tag. We have a bit more styling to do before we have finished our task.

Note: The tool I like to use most for these next tasks is FireBug. I love that I can quickly copy the CSS from within FireBug from the corev4.css and paste it directly into my custom.css file.  The other great thing, you can make changes in the CSS with FireBug to see what your final code might look like.

Using FireBug I highlight the <input> tag for the search box and copy the CSS into my custom style sheet.

.s4-search {
background: url(“/_layouts/images/bgximg.png”) repeat-x scroll 0 -511px #FFFFFF;
border: 1px solid #E3E3E3 !important;
font-size: 1.1em;
height: 17px;
padding: 2px 3px 0;
width: 191px !important;}

I make my CSS changes removing redundant CSS code. This code will still be called in the corev4.css sheet. No need to bloat my CSS file!

#my-searcharea .s4-search {
background-image: none;
background-color: transparent
border: 0px !important; /* the original code had !important so I need to use it here too!*/
font: normal 12px Arial, Helvetica, sans-serif;
padding: 5px 0px 5px 5px; }

Next we want to remove the search icon. Using FireBug again I locate the tag where I need to use some CSS magic. The image is in a link, so we just want to hide the image.

#my-searcharea .ms-sbgo a img {display: none;}

That looks like I’m finished but we are not quite there. Try to hover over the search icon and there is nothing to click! We need to add another line of CSS so that we can click the search icon.

#my-searcharea .ms-sbgo a {display: block; width: 25px; height: 25px;}

When I use FireBug again, I can see the outline if my link, it looks like it covered the whole icon.

The last part that I want to remove the italic font style in the search box.

#my-searcharea input.s4-searchbox-QueryPrompt {font-style: normal; }

I also elected to use a different font and color in the input box,  I made those changes to the class #my-searcharea .s4-search { .

Here’s the final result.

Thanks for reading!

, , , , , , ,

  • Pingback: Customizing the search box in SharePoint 2010 | Heather Waterman | Mastering Sharepoint()

  • higha

    Heather, My company uses SharePoint for intranet, 700 users. The company website is not run on SP but they are looking to do so. I am in the marketing area and don’t want IT getting too involved in content side of website if they host it on SharePoint. Do you know of any articles that 1. argue for different team to look after SharePoint as intranet platform, and web platform and/or 2. articles that recommend hosting websites off-site with dedicated hosting, due to downtime and security concerns if IT hosts in-house (my concerns!). Re second article topic: is there a simple case for hosting SharePoint intranet and website both internally, due to ease of sharing docs between platforms, for example? tx

    • hwaterman

      Hi Higha – From my experience IT wants nothing to do with creating or managing content on the public facing site. Using a publishing site you can easily assign people from the marketing group to maintain, create and approve (before it goes live) content on the company site. This is really something you need to work out between management, marketing and IT. IT may maintain and create content for the intranet, but the company website is a different story.

      For the hosting part, the whole picture needs to be looked at from all sides to make sure the solution that is being used is the best for your company. IMHO it all comes down to cost and man power.

      If I can come up with links for articles for your questions, I will post them here.

      Thank you,

      • Bisi

        Hello Heather,
        I just want to change the border color of the search box and the icon to red. What the class responsible for this in CSS.
        Thank you.

        • Heather

          Just use Firebug with Firefox and you can isolate the style that needs to be changed. You can change it in Firebug and see the changes in your browser.

  • Pingback: Journal 05/26/2013 (a.m.) | Journal()

  • Lewis

    How can I get the dropdown selector (like on the search results page) to display?