Sunday, July 5, 2009

How It Works: Customizing SharePoint search bar via CSS

Steve Samnadda, Director, Technology

During a recent client project, our wireframes called for a redesign of SharePoint's top search bar by stacking the elements vertically instead of horizontally.  The search bar is usually rendered as a TABLE object with 4 cells across so this initially sounded like a simple HTML change.  After further investigation, we discovered the underlying HTML is actually generated by a SharePoint control and was generally out of reach. 

Some possible solutions would be to extend and create a new search control or track down the underlying template and edit it directly. However, due to concerns about the future direction of the project our goal was to minimize any edits directly to SharePoint's out-of-the-box features.  Our main source of customization was to be our masterpage and CSS.

So our solution was to use some creative CSS.  Our CSS "hack" essentially converted the surrounding table and each row and cell to an absolute positioned block level elements.  Which we can then position however we want. 


Here's how it works

The original SharePoint search bar

Our final product

 

The underlying HTML:

 

Our CSS to convert the table:

.ms-sbtable
{
    display: block;
    position: relative;
    height: 78px;
    width:205px;
    padding: 0;
    margin: 1.1em 0 0;
}
.ms-sbtable input,.ms-sbtable select
{
    padding:0px;
    margin:0px;
    text-align:left;
}
.ms-sbtable .ms-sbscopes select.ms-sbscopes
{
    text-align:left;
    height:19px;
    padding:0px;
    margin:0px;
}
.ms-sbtable input  { height:17px; }

.ms-sbtable tr, .ms-sbtable th, .ms-sbtable td
{
    position: absolute;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
}

.ms-sbtable .ms-sbscopes{
    bottom: 23px;
    text-align:right;
    width:200px;
}

.ms-sbtable .ms-sbgo{
    bottom: 0px;
    left:170px;
    padding: 2px 4px 2px 6px;
    text-align:right;
}

.ms-sbtable .ms-sbgo a { text-decoration:none; color:#0053C9; }

These were included using conditional CSS to adjust for IE:
.ms-sbtable .ms-sbgo { padding: 3px 4px 3px 6px; }
.ms-sbtable { height:94px; }
.ms-sbtable .ms-sbscopes { bottom:25px; }

 

Finally, we used some JavaScript to switch out the magnifying glass image to just use the text 'go'.  This part could not be accomplished via CSS. 

In summary, while developing a new custom control may have been a better solution.  This solution saved us time in the end and suited the project well!