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 !!

A Little Teaser and a Colour Calendar

Sorry for not posting for a while, but been mega busy with work and other stuff. However, I am working on something a little special which has been bugging me for a fair while, so stay tuned for an update (hopefully in the near future !).

Don't know if anyone has seen this or not, but this is something most people want / ask for when deploying SharePoint (at least in my experience) – a colour calendar i.e. a calendar where it is possible to colour code entries based on certain categories. Well, my good friend Mark Wilson has come up with an excellent add-on that gives you this functionality – check out the latest version here. This latest version makes deployment of his add-on a whole lot easier, by dropping a web part onto a page rather than having to cut and paste Javascript as was the case with an earlier version.

Check it out, you won't be disappointed !!