Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

Branding the Search box in SharePoint 2010 — December 22, 2011

Branding the Search box in SharePoint 2010

I have written some blog posts previously about branding the global navigation which is an important part of the SharePoint user interface. The search box is another part of the user interface that often needs a bit branding especially if it concerns a public faced web site where the search box could be one of the most important elements in the user interface.

Customization of the SharePoint search box could be a challenge, there´s a lot to keep in mind when it comes to position and behaviors but also when it comes to all functionalities this control offers. This example assumes that dropdown is not specified otherwise you have to add a couple of classes to brand the drop down as well.

I have also written an article at MSDN called ‘Creating a Design for SharePoint 2010 Global Navigation and Search Boxes’ where you will find some more examples of how to extend the search box with CSS and jQuery.

About the search box control

The search box control renders as a placeholder in the master page and can be replaced by a custom control that is inherited from the SharePoint SearchBoxEx class. The control is a configurable Web Part and, as such, can be used as an ASP.NET control. You can use each property of the Search Box Web Part as an attribute on the Search Box Web control. To specify a style for the search box, such as a background color, background images, width or a font color, use only CSS. That is, you don’t need to modify the master page or write a custom control to customize the look and feel for the search box in common sceneries.

As you may notice I used rounded borders with CSS3, this will not work in IE 9 and below if you render the master page with the compatibility X-UA Compatible IE 8 which you should do because if you set the compatibility to IE 9 you will have some issues with page loads and button click events related to some functions like the PeopleEditor field in SharePoint. The CSS3 classes works good in other browsers that ignores the compatible tag. If you need rounded corners for the search box input field you can use a background image or use a JS crossbrowser solution like curvycorners.net

I have placed the search box in the top row in my example, if you want it in the same row as the global navigation you can add a DIV as a wrapper to the control so you can control vertical horizontal aligns, so it fits in as you want in the navigation.

If you use this CSS in an non branded SharePoint site it will looks like the image below:

CSS

Add this CSS in your custom CSS file:

.s4-search {margin-right:8px}
.ms-sbtable-ex {margin-top:1px!important}
.s4-search INPUT.ms-sbplain {
background-color: #fff; 
background-image:url('/Style Library/Labb/Images/smallSearchIcon.png'); 
background-repeat: no-repeat; 
background-position:5px 5px;
padding: 4px 0px 4px 25px;
height:13px;
border:#efefef 1px solid; 
border-top-left-radius:5px;
border-bottom-left-radius:5px;
color:#333; font-size:11px;
}
.s4-search .ms-sbgo a{
background-image:url('/Style Library/Labb/Images/searchBtn.png'); 
background-repeat: no-repeat;
display:block;
height:23px; width:50px;
margin-top:0px; margin-left:0px
}
.ms-sbscopes, .srch-gosearchimg{
display:none;
}

Images

Download the searchbutton and the search icon here

A quick tip

As you may noticed, the search box is not visible by design in SharePoint on settings pages. That’s because the delegated search box is wrapped by a content placeholder. If you want to expose the search box at the setting pages, remove the place holder wrapper, just the wrapper not the delegated control, and place this in a ASP Panel with the attribute visible set to false, you can place the ASP panel just above the ending form tag in your custom master page.

Before:

<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
</asp:ContentPlaceHolder>

After:

<asp:Panel visible="false" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server" />
</asp:Panel>

/ Christian