labs.steveottenad.com

Reskin/Restyle the Default Sharepoint 2010 Search Box

Sharepoint Searchbox Css

If you’ve ever had to restyle a SharePoint site (MOSS 2010, this will most likely not work on WSS), you know that changing the appearance of the search box is one of the more challenging parts to the job. Here are a few of the tips and pointers I have picked up over a the last few months working in SharePoint 2010.

Looking for the advanced search box styling tutorial? Reskin the advanced search box in SharePoint 2010

Add Search To Master Page

If you arent using a master page with the default search control already on it, then add this snippet where you would like the search box to render out

<div class="s4-notdlg">
  <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
     <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4" />
  </asp:ContentPlaceHolder>
</div>

To style the Search Button

First, you need to use the icon that you want for your custom button as the background image for the “.s4-search .ms-sbgo a” class. This will give the <a> tag the appropriate image, but the default magnifying glass will still be over the top. Next, add “.s4-search .srch-gosearchimg, .s4-search .ms-sbgo span{display:none; }” to your css. This will get rid of (hide) the magnifying glass image, while still leaving your button intact with your background image as the new icon.

.s4-search .ms-sbgo a{background:url(../images/search_btn.png) no-repeat; width:27px; height:22px; display:block; }
.s4-search .srch-gosearchimg, .s4-search .ms-sbgo span{display:none; }

To give your input box some style

You will also want to clear out the default background on the default input box. In keeping with my rounded corner look, I am going to apply a nice rounded background to the “.s4-search input.ms-sbplain” class. You will also need to clear out some styles, included below. Also, make sure to apply your font to the input box, and keep your font-color going in there as well. It also looks nice to zero out the italics that SharePoint uses.

.s4-search input.ms-sbplain{background:url(../images/search_left.png) no-repeat; border:0 none !important; height:16px; padding:4px 2px 2px 9px; color:#666; font-size:.85em; font-style:normal;}

Vertically center your box and button

The last step to a polished looking SharePoint search box is to line up your newly-styled input box and button. Unfortunately you’ll have to resort to an “!important;” tag, unless you want to dig into the core.css and remove some stuff. Add a 5px top margin to “.s4-search .ms-sbgo a” and “.s4-search input.ms-sbplain”, the latter needs to be important. “.s4-search .ms-sbgo” needs to get 5px of top padding. Lastly, zero out the margin and padding for “.adminBar .ms-sbrow a, .ms-sbcell”

Final CSS

/*Search Box Styles*/
.s4-search input.ms-sbplain{margin-top:5px!important; background:url(../images/search_left.png) no-repeat; border:0 none !important; height:16px; padding:4px 2px 2px 9px; color:#666; font-size:.85em; font-style:normal;}
.s4-search .ms-sbgo{padding-top:5px;}
.s4-search .ms-sbgo a{margin-top:5px; background:url(../images/search_btn.png) no-repeat; width:27px; height:22px; display:block; }
.s4-search .srch-gosearchimg, .s4-search .ms-sbgo span{display:none; }
.adminBar .ms-sbrow a, .ms-sbcell{margin:0; padding:0;}

Sharepoint searchbox css reskin

Download Images Used:

Download Sharepoint 2010 Search Reskin Images

Advanced Search Box?

Are you looking for the larger, advanced search box with the scopes dropdown included? Check out the tutorial here

21 Comments

  1. Robert says:

    Thank you, works like a charm!

    Now I just need to find how to remove/change te text “Search this site…”.

    • The text to display in the search box on initial page load is a property of the search control. To edit, you’ll need to modify the master page or, in the case of only needing to modify that text on certain pages, override the search box’s content placeholder in a given page layout and customize the text property there…only for that page layout.

      • Marla says:

        Can you explain what you mean by “you’ll need to modify the master page”. What do I need to modify, or what property do I need to set to eliminate this text?

        Thanks!!

  2. Bastien says:

    Hi,

    Works only with IE7??

    Thanks!

  3. Anna says:

    doesnt work for me :(

  4. [...] But if you don’t have access to server or can’t deploy, the easiest way to do it is to style it with css. Thanks Steve [...]

  5. Bill says:

    If i am trying to apply my own images and style how would i get the go button positioned to the left before the input box instead of the right? I cannot seem to get it to move. Any thoughts?

    • sottenad says:

      Im not in front of that code at the moment, but if I recall correctly the different pieces are contained in some nasty nested table. You’ll probably have to resort to either building your own control, or using some javascript to rip the button out and reinsert it in the proper location. Check out my other post to see how I went about this with javascript on the advanced search box, the approach should be similar.

  6. uk Plumbers says:

    Is there anyway I can change the image the search icon? I’ve designing my own one to go with the theme of the layout but I’m not sure how I would change it. Any help would be great, thank you :)

    • sottenad says:

      See the section in this post titled “To style the search button”. You’ll just need to point the background on the “.s4-search .ms-sbgo a” class to your image, then adjust the height and width to match that of your image and you should be good to go.

  7. uk Plumbers says:

    Thank you so much for the quick reply. I’ve now changed the search icon to the one I created. You’ve been a big help, thank you.

  8. Samir Patel says:

    Thanks. I spent more than needed time to fix custom search button during migration process, but your post helped me stop building more frustration. :)

    Thank you for such a nice post.

  9. Monika says:

    Great help! Can you add one for a bigger search box with scopes dropdown?

  10. Gayathri says:

    Great tut! thanks. I have changed the background images as per your steps.But now that button (magnifying glass icon) is unclickable.Search control works only on press of Enter Key.What could be wrong?

  11. [...] Reskin/Restyle the Standard Sharepoint 2010 Search Box – Steve Ottenad [...]

  12. Suresh Pydi says:

    Thanks man.. You saved my Time………..

  13. Suresh Pydi says:

    Thanks a LOT……..:-)

  14. [...] found this article for customising standard search box. Share this:TwitterFacebookLike this:LikeBe the first to like [...]

  15. [...] Reskin/Restyle the Standard Sharepoint 2010 Search Box – Steve Ottenad [...]

Leave a Reply