WCM Sites, Master Pages, and the Search Icon

If you have a publishing site then there are a few site master pages available to you out of the box:

• default.master
• BlueBand.master
• BlackBand.master
• BlueGlassBand.master
• BlueVertical.master
• BlackVertical.master
• BlueTabs.master
• OrangeSingleLevel.master
• BlackSingleLevel.master

These all offer a slightly different look and feel, giving us developers a starting point from which to style our sites. How these master pages handle the search icon is interesting. The following icon:

Is used by the three master pages listed below as the icon you click on to perform your search:

• default.master
• OrangeSingleLevel.master
• BlackSingleLevel.master

The other master pages use a different icon, shown below:

This icon is stored in the Style Library in the root site of the site collection. The full URL of this file is http://sharepointsite/Style Library/Images/Search_Arrow.jpg.

However, if you hover over the search icon in sites based on the master pages that use Search_Arrow.jpg for the search icon, the image of the search icon changes to the magnifying glass shown above, and this causes some of the page layout to re-jig causing a flicker. How do you solve this and cause Search_Arrow.jpg to be the image when you hover over the search icon ? If you're like me, you'll spend a fair amount of time looking in the SharePoint CSS files to try and locate where this is configured – but your time would be wasted. The cause of this problem is the definition of the search control in the master page.

If you look at a master page using SharePoint Designer you'll fine the search control defined as follows:
<SPSWC:SearchBoxEx
id="SearchBox" RegisterStyles="false"
TextBeforeDropDown=""
TextBeforeTextBox="<%$Resources:cms,masterpages_searchbox_label%>"
TextBoxWidth="100"
GoImageUrl="<% $SPUrl:~sitecollection/Style Library/Images/Search_Arrow.jpg %>"
GoImageUrlRTL="<% $SPUrl:~sitecollection/Style Library/Images/Search_Arrow_RTL.jpg %>"
UseSiteDefaults="true"
DropDownMode="HideScopeDD" SuppressWebPartChrome="true" runat="server" WebPart="true"
__WebPartId="{FE689059-C9E4-4EFF-8338-4D73E4BB84DD}"
/>

You need to add an additional two attributes to this element to fix, what I consider to be, the bug in the shipping master pages. Replace the above element with the following element:

<SPSWC:SearchBoxEx
id="SearchBox" RegisterStyles="false"
TextBeforeDropDown=""
TextBeforeTextBox="<%$Resources:cms,masterpages_searchbox_label%>"
TextBoxWidth="100"
GoImageUrl="<% $SPUrl:~sitecollection/Style Library/Images/Search_Arrow.jpg %>"
GoImageUrlRTL="<% $SPUrl:~sitecollection/Style Library/Images/Search_Arrow_RTL.jpg %>"
GoImageActiveUrl="<% $SPUrl:~sitecollection/Style Library/Images/Search_Arrow.jpg %>"
GoImageActiveUrlRTL="<% $SPUrl:~sitecollection/Style Library/Images/Search_Arrow.jpg %>"
UseSiteDefaults="true"
DropDownMode="HideScopeDD" SuppressWebPartChrome="true" runat="server" WebPart="true"
__WebPartId="{FE689059-C9E4-4EFF-8338-4D73E4BB84DD}"
/>

The additional two attributes you need to add are GoImageActiveUrl and GoImageActiveUrlRTL – set both of these to point to the same image in the Style Library, and you're good to go.

Hope this saves some other people some time trawling through the CSS files !!