SharePoint build in search service is powerful, however you may want to branding the OOTB design of search column, here is how to do it.

1. To set locaiton of the search box :

Normally people will look at the right top corner for search column, which is a little above the top navigation bar. Here is an example of the CSS to make it in that location in HTM master page:


<div class="topbanner">
                    <div class="quicklinkloc">
<!-- some links here --> </div> <div class="searchstrip">
<div class="searchloc"> <div data-name="SearchBox"> <!--CS: Start Search Box Snippet--> <!--Code of search snippet you copied from design manager--> <!--CE: End Search Box Snippet--> </div> </div> </div> </div>



Here is the CSS mark up code:

/*----------------remove "border: 2px red solid;" when it goes to production--------*/
.topbanner { height: 161px; width: 950px; background-image: url('../img/banner.jpg') ;
border: 2px red solid;
} .searchstrip { height:30px; padding:110px 10px 2px 5px;
border:2px red solid } .searchloc { float:right; width:236px; position:relative; display:block;
border:2px red solid } .quicklinkloc { text-align: right; margin-right: 5px;
border:2px red solid; }




Finally you got this, however you will notice the search column is different from the OOTB design, here is how to achieve it.


/*--------search area----------------*/
/*---- to change the font of input area ----*
.ms-srch-sb>input { color:white; font-family:Verdana; }

/*---- to hide the little search button ----*/ .ms-srch-sb-searchImg{ display:none; }

/*----to change the search column height, you can set width here as well ---*/ .ms-srch-sb{ height:25px; }

/*---- to hide the drop down icon------*/ .ms-srch-sb-navImg{ display:none; }


I hope this can make sense.


To get the search code working, you can always use the default search service from the system, however if there is no result, you need go to central management and look at conten resource, and set up Crawl. After a couple of Crawling you will get content.

Central Administration -> General Application  Settings-> Farm Search Administration -> CLick on your search application

Look at Crawl log to see if there are crawled record, if not, go to Content Sources to start all crawl.


I had error when my search service broken(most likely is the migrated search service is conflict with default generated system search service.

So I uninstalled both and reinstalled a search service.

You do not need change anything in your code since the it will automatically locate the system search. How convenient!

About Lei

I am an IT specialist with over 10 year experience - years on Automation, on-Premise or Azure.

I am happy to develop however never want be a full time developer. Only do what I have to do. If it has to be PowerShell,HTML, PHP, CSS, C#, VBS or JS, front end or backend, so be it, doesn't matter!

Spent years with Windows, SCCM, SharePoint, SQL and Exchange servers. For last several years, I have been actively working under On Premise > Azure environment.


Current Certificates:
    Microsoft® Certified-
  • -Enterprise Administrator
  • -Database Administrator
  • -SharePoint Administrator
  • -Administering and Deploying SCCM 2012
Red Hat Certified Technician
ITIL V3 Foundation - Practitioner

Working on Azure Certificates now and hopefully they can stop upgrading their questions one day! GIVE ME A BREAK!

Contact Lei

Name *
Email *
Comments *

Traffic since 10/08/2016

This week516
This month2589

Visitor Info

  • IP:
  • Browser: Unknown
  • Browser Version:
  • Operating System: Unknown

Who Is Online