In this article, we’re going to take a look at a few simple hacks for the Windows Bing Box, to change the look and feel. You can use these hacks to make the search box fit better into the design of your site.
Here are a few simple things you can do:
- Apply the Windows Live styling to the basic search box
- Add default text to the search box
- Auto-select the search box when the page loads
- Ensure compatibility with ActiveX and other smart objects
Please read the Terms of Use for the Windows Bing Box before you do any hacking of your own, to make sure that you are complying with the terms. Point your browser to http://help.live.com/(cHJvamVjdD1XTF9XZWJtYXN0ZXJz)/Help.aspx?querytype=keyword&query=esufosmret&fs=1 to read these terms.
Applying the Windows Live Styling to the Basic Search Box
One of my favorite parts of Live.com is the new UI styles. Here, we’ll take the basic search box and apply the Windows Live styling.
.bmp)
To update the look, we are going to make three changes to this code: First, we’ll add borders to the table that surrounds the text box and the button; then, we’ll hide the border of the text box; and, finally, we’ll replace the Submit button with an image. Skip ahead, if you just want the finished code.
-
Change the style of the table. We change the style of the table by adding a CSS attribute to each of the <TD> tags in the table. Read here for more information on CSS.
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:2px;width=150;">
<td style="border-style:solid;border-color:#4B7B9F;border-width:2px;">
The colored text is the CSS style that we’ve added to each of the table cells. The first one paints a blue, two-pixel-wide border around the left, top, and bottom sides of the cell; and the second adds the same blue, two-pixel-wide border around all four sides.
To adjust the size of the input box, just change the “width=150” in the style of the first cell to your desired width in pixels.
-
Change the style of the input text box. Again, the formatting is done by using CSS in the <TD> tag.
<input type="text" id="searchTerm" name="q" style=" margin:1px 0; width:100%; border:0px solid; height:16px; padding:0px 3px; position:relative;">
The style in this section removes most of the space between the text box and the table, and then hides the text-box border.
-
Replace Submit button with an image.
<input id="Submit" type="image" src="http://search.live.com/s/siteowner/searchbutton_normal.PNG" align="absBottom" style="border-style:none">
This section changes the type of the form input from type=“submit” to type=“image”, allowing us to use our own image for the search button. We then use CSS to remove the image border and align the button on the bottom of the cell.
Note that even with an image button, the user can still just press enter to start the search.
And, voilà, now you have a fancy search box! The full source code is listed below. Check here to decide which values you would like to place in the boldface type areas.
Windows Live-Styled Basic Search Box
<div>
<form method="get" action="http://search.live.com/results.aspx">
<input type="hidden" name="cp" value="INSERT_LANGUAGE_CODE_HERE">
<input type="hidden" name="FORM" value="FREESS">
<input type="hidden" name="q1" value="site:YOUR_DOMAIN_HERE">
<table bgcolor="#FFFFFF" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:2px;width=150;">
<input type="text" id="searchTerm" name="q" style=" margin:1px 0; width:100%; border:0px solid; height:16px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:2px;">
<input id="Submit" type="image" src="http://search.live.com/s/siteowner/searchbutton_normal.PNG" align="absBottom" style="border-style:none">
</td>
</tr>
</table>
<img style="margin-top:10px" alt="Bing" src="http://search.live.com/s/affillogoLive.gif"></img>
</form>
<div>
Changing the Default Text in the Search Box
Have you ever noticed that the search boxes on classy Web sites always seem to have the text “Search” faded in the background, and when you click on the search box it disappears, so you can enter your query? Well, here’s how you do that; it just takes a little bit of JavaScript, HTML, and some elbow grease. Skip ahead, if you just want the finished code.
.bmp)
The effect is achieved by making three changes to the <input> tag for the text box. These change the default style of the box, and handle two events: when the user clicks inside the text box, and when the user clicks outside the text box.
-
Changing the default style. We’ve added two attributes to the <input> tag
This attribute sets the default value of the text box to Search. Replace this with whatever text you would like to have in the text box when the page is first loaded.
We’ve also added a style attribute to the text box to set the color of the text to grey. We do this to give the text a faded look, so that users know it is help text, and not an actual value in the search box.
-
When the user selects the text box. Hide the “Search” text, if it is there, or select all the text in the text box.
onFocus="if(this.value=='Search'){this.value='';this.style.color='#000';}else{this.select();}"
The onFocus attribute contains JavaScript code that is run in the browser when the users selects inside the text box. Here, I’ve rewritten the JavaScript code in a more legible format.
if(this.value==’Search’){
this.value=’’;
this.style.color = ‘#000’;
}else{
this.select();
}
Logically, the code is really simple. It says: If the text box contains “Search”, we’ll assume that the text box still contains our help text, and we’ll remove that help text and change the color of the font to black. Otherwise, if the text box does not contain “Search”, we’ll highlight all of the text in the text box to make it easier for the user to update it.
-
When the users clicks outside the text box. If it is empty, place our help text back in there.
onBlur="if(this.value==''){this.value='Search';this.style.color='b3b3b3';}"
Just like the onFocus attribute, the onBlur attribute contains JavaScript code that is run by the browser when the user currently has the text box selected, and then clicks somewhere outside the text box on the page (except for the Submit button). Here, I’ve rewritten the JavaScript code to be more legible.
if(this.value==’’){
this.value=’Search’;
this.style.color=’b3b3b3’;
}
The code says: If the text box is empty, put our help text (“Search”) in it, and change the color back to grey.
Again, the grey gives the help text the appearance that it isn’t a search term, but instead a helpful suggestion for the user.
What follows is the code to apply to this help text for each of the different Windows Bing Boxes.
Basic Search Box
<div>
<form method="get" action="http://search.live.com/results.aspx">
<input type="hidden" name="cp" value="INSERT_LANGUAGE_CODE_HERE">
<input type="hidden" name="FORM" value="FREESS">
<input type="hidden" name="q1" value="site:YOUR_DOMAIN_HERE">
<table bgcolor="#FFFFFF" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<input type="text" id="searchTerm" value='Search'
onFocus="if(this.value=='Search'){this.value='';this.style.color='#000';}else{this.select();}"
onBlur="if(this.value==''){this.value='Search';this.style.color='b3b3b3';}"
name="q" style="color:b3b3b3;">
</td>
<td>
<input id="Submit" value="Search" type="submit">
</td>
</tr>
</table>
<img style="margin-top:10px" alt="Bing" src="http://search.live.com/s/affillogoLive.gif"></img>
</form>
<div>
Windows Live-Styled Basic Search Box
.bmp)
<div>
<form method="get" action="http://search.live.com/results.aspx">
<input type="hidden" name="cp" value="INSERT_LANGUAGE_CODE_HERE">
<input type="hidden" name="FORM" value="FREESS">
<input type="hidden" name="q1" value="site:YOUR_DOMAIN_HERE">
<table bgcolor="#FFFFFF" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;width=150;">
<input type="text" id="searchTerm" value='Search'
onFocus="if(this.value=='Search'){this.value='';this.style.color='#000';}else{this.select();}"
onBlur="if(this.value==''){this.value='Search';this.style.color='b3b3b3';}"
name="q" style=" margin:1px 0; width:100%; color:b3b3b3; border:0px solid; height:16px; padding:0px 3px; background:#fff;
position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input id="Submit" type="image" src="http://search.live.com/s/siteowner/searchbutton_normal.PNG" align="absBottom" style="border-style:none">
</td>
</tr>
</table>
<img style="margin-top:10px" alt="Bing" src="http://search.live.com/s/affillogoLive.gif"></img>
</form>
<div>
Advanced Search Box
.bmp)
There are a couple differences with this versus the basic. First, only the Select All text feature works because of the more sophisticated nature of this box. Also, you only need to modify the HTML portion of the code (see next boldface section); you shouldn’t modify the JavaScript code.
<div id="WLSearchBoxDiv" style="width:150px;">
<table cellpadding="0px" cellspacing="0px">
<tr id="WLSearchBoxPlaceholder">
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:2px;">
<input id="WLSearchBoxInput" type="text" value="Loading..." onFocus="if(this.value=='Loading...'){this.value='';this.style.color='#000';}else{this.select();}" disabled="disabled" style="background-image:url(http://search.live.com/s/siteowner/searchbox_background.png); background-position-x:right;background-position-y:50;background-repeat:no-repeat;height:16px;width:293px;border:none 0px #FFFFFF;"/>
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:2px;">
<input id="WLSearchBoxButton" type="image" src="http://search.live.com/s/siteowner/searchbutton_normal.PNG"
align="absBottom" style="border-style:none"/>
</td>
</tr>
</table>
<img style="margin-top:10px" alt="Bing" src="http://search.live.com/s/affillogoLive.gif"></img>
Auto-Selecting the Search Box on Page Load
For some pages, where search is the only user input, you might want to put the cursor in the text box to save yourself one extra step. Just place the following JavaScript snippet in the <HEAD> tag of your HTML page. Note that SearchForm must match the name that you created for the form, and QueryTextbox must match the name that you created for the text box.
<script>
<!--
function selectSearchbox(){document.SearchForm.q.focus();}
// -->
</script>
Next, add the onLoad attribute to the <BODY> tag of the page, and call the JavaScript function that we just created. Finally, place the code for your search box wherever you would like it on the page.
Note that this should work equally well with both the basic and advanced search boxes.
<HTML>
<HEAD>
<script>
<!--
function selectSearchbox(){document.SearchForm.q.focus();}
// -->
</script>
</HEAD>
<BODY onLoad="selectSearchbox()">
<form name="SearchForm" method="get" action="http://search.live.com/results.aspx">
<input type="hidden" name="cp" value="INSERT_LANGUAGE_CODE_HERE">
<input type="hidden" name="FORM" value="FREESS">
<input type="hidden" name="q1" value="site:YOUR_DOMAIN_HERE">
<table bgcolor="#FFFFFF" cellpadding="0px" cellspacing="0px">
<tr>
<td><input type="text" name="q"></td>
<td><input id="Submit" value="Search" type="submit"></td>
</tr>
</table>
<img style="margin-top:10px" alt="Bing" src="http://search.live.com/s/affillogoLive.gif"></img>
</form>
</BODY>
</HMTL>
Ensuring Compatibility with ActiveX and Java Applets
The <DIV> popped up by the advanced search box generally appears on top of all other elements on the page. However, there are a few elements that might cover it up, such as drop-down selection boxes, ActiveX controls, Java applets, and iFrames. If you have any of these elements on your page and find that they interfere with the results <DIV>, you’ll want to make the following change to the advanced search box code.
Change the autoHideTopControl value to true.
<script type="text/javascript" charset="utf-8">
var WLSearchBoxConfiguration=
{
"global":{
"serverDNS":"search.live-int.com"
},
"appearance":{
"autoHideTopControl":true,
"width":600,
"height":400
},
"scopes":[
{
"type":"web",
"caption":"Bing Blog",
"searchParam":"site:blogs.msdn.com\/livesearch\/"
}
,
{
"type":"web",
"caption":"Web",
"searchParam":""
}
]
}
</script>