Branding Common Elements in SharePoint 2013

Part 2: Search Box

By Ryan Keller

Part 1   |   Part 3


 

Scenario:
This is Part 2 in a series of branding common elements in SharePoint 2013. Last time we looked at the structure of the top navigation in a SharePoint 2013 site and how to apply custom branding to the navigation. Today we’re going to tackle another component found on nearly every page of a SharePoint site: the search box.

While the search box may be a relatively small part of your site, it’s arguably one of the most important pieces. How often do you open a site and immediately start typing something in the search box to find what you’re looking for, instead of navigating through the rest of the site? Search boxes are so commonplace on websites these days it’s almost surprising when a site doesn’t have one!

OK… so we’ve established that search boxes are almost a universal feature on most websites and they serve an important function. But why bother branding them at all? After all, most site users only interact with them for a couple seconds and probably don’t pay much attention to what they look like - they’re just a text box and a “Go” button, so what’s the big deal?  Well, just like with any other component on your site, it should fit in with the rest of the look and feel. You’d be surprised at how much you can style a simple text box and button to make it a natural part of your branding.


 

Structure of the Search Box
In SharePoint, the search box is surprisingly more complex than you might imagine. At its most basic, it is a text box and a “Go” button, but in SharePoint 2013 there are a lot of extra bits of HTML and CSS that are applied to give it the specific look it has (which is pretty basic, out of the box)

Just your everyday, average SharePoint 2013 search box:


 

Here’s the basic structure of the HTML around the search box:

<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <div>
                        <input></input>
                        <a>
                           <img>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

As you can see, there are A LOT of nested <div> tags that ultimately contain the input box and Go button. Most of these <div> tags are simply containers with IDs on them, and are mostly used for setting the position, width, and margins of the containing <div> tags.  It’s not until you get to the <div> with the ID “SearchBox” (which is the 6th div in the <div> nest) that you’re specifically dealing with styles that will affect the search box.  That ID of SearchBox can be used to easily target the input box and “go” image within your CSS. Another thing to note is that if you’re doing your own custom branding, you may want to think about wrapping the search box in a div with your own custom ID or class, which you can use to target the search box - there are a couple instances where you may end up inadvertently applying your custom search styles where you don’t want them, namely on the search box on search centers.


 

But before we get that far, let’s look at how the actual search box is styled now. With the minimal look that SharePoint 2013 uses, there doesn’t appear to be much going on stylistically, but looks can be deceiving. It’s good to know exactly what things look like in order to easily override them to apply your own styles.

Styling the Search Box

We’ll start by looking at the <div> with ID “searchInputBox.” This floats the search box to the right of the global navigation items and puts a 12 pixel margin underneath.  The next <div> that’s of interest to us is the div that contains the <input> tag. This <div> has a couple classes applied, namely ms-srch-sb-border. This border envelopes the input box and “go” image.

Next is the actual input box itself. It has a few styles applied to it, namely a height, margin, a bit of padding, a width, and text color. These can all be overridden with your stylesheet. The input has a few classes applied to it (ms-textSmall, ms-srch-sb-prompt, and ms-helperText). The ms-helperText style is what sets the color; otherwise the out-of-the-box stylesheet styles the search by targeting the input within the div with the class ms-srch-sb, like so: .ms-srch-sb > input.  


 

Next to the input is the “go” button, which can also be customized. By default, the “go” button is actually an anchor <a> tag with an image inside it. This <a> tag has a class of ms-srch-sb-searchLink applied, which sets the default height/width at 20px each. The out-of-the-box image is a sprite sheet (an image file with several individual images on it, where only part of the whole file is shown). In this case, the part of the sprite sheet that’s shown is the search icon. When you hover over the “go” button, the background color changes on the <a> tag and the <img> tag’s class shifts the image sprite’s position so a slightly different colored search icon appears.  There are a couple options for replacing the search button, but one of the easiest is to simply hide the out-of-the-box image and apply a background image to the containing <a> tag with your custom CSS. This approach still allows you to take advantage of the hover/active states for the <a> tag and use different background images (or a custom image sprite with the position of the background shifted) when the “go” button is hovered over or clicked.


 

 

Speaking of hover/active states, you may have noticed that the search box in SharePoint 2013 also has a few different states as you hover over it or click to type in the search box. There are three different states to contend with when styling the search box: unselected, hovering, and selected (or “focused”). When you’re not interacting with the search box, it’s in its default state. When you hover over the search box, the border around it (the <div> with class ms-srch-sb-border applied) changes color. When you click in the search box, the border changes color again as a new class, ms-srch-sb-borderFocused, is applied to the <div>. Likewise, there are styles applied to the input box as you hover over it or click to type, although these styles don’t really show; mainly they are for keeping the background and border transparent. This is important to note though, in case your branding utilizes styles within the input field (such as a shadow or other background image or color, for example).


And with that, we’ve reached the end of our trip through the search box styles.

Example of a Styled Search Box
Here you can see a (garishly) styled version of the search box, with all the various components colored so you can see each piece that makes up the search box. In addition, notice that the default “go” button has been replaced with a custom image.  You can download the accompanying CSS and image files below. Simply upload them to the root of the master page gallery and apply the CSS file as alternate CSS on the master page settings screen to see it in action, or you can add these styles to your custom stylesheet and work from there.

Unselected:

Hover state:

Selected (focused) state:

Hover state for "go" button:


You can download the ugly example of a styled search box here. The CSS is commented so you can easily tell what each line is doing to the search box. Feel free to use this as a starting point for your search box branding endeavors.


Up Next: Part 3 - Branding the Left Navigation


 

Powered by SharePoint 2013 © 2016 Rackspace, US Inc.