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>
</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 input.ms-sbplain {
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 input.ms-sbplain {
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 input.ms-sbplain { .

Here’s the final result.

Thanks for reading!

, , , , , , ,