My Drupal Blog

More sites these days are using a custom image like a magnifying glass, or the word 'GO' in a circle, instead of the default search submit button. Here's a way that you can do the same thing with the Drupal search function, and only have to use CSS - no PHP and no editing template files (well, almost).

The image on the left shows the default search submit button, and the image on the right shows the new search submit button that we'll replace it with.

It's really just a simple three step process:

• Step 1: Create your image
• Step 2: Add a conditional comment to your page.tpl.php file
• Step 3: Add your CSS

Step 1: Create your image

The image can be of whatever you like, and is probably best in .jpg format.

Just make sure you save it into your theme's normal images folder.

For instance, if I am going to use an image of a magnifying glass called 'mag_glass.jpg' I would save it to '/sites/all/themes/mydrupalblog/images/mag_glass.jpg'

Step 2: Add a conditional comment to your page.tpl.php file

A conditional comment is just a small bit of code which we add to the page.tpl.php file in order to allow us to specifically target Internet Explorer with different CSS rules.

As you'll see in a second, this is necessary because Internet Explorer interprets our CSS differently, and we need to supply it with some extra rules to make it look right.

In short, you just need to add the following code to your page.tpl.php file directly after the opening body tag

and then add the following directly before the closing body tag.

Basically, this creates a new div with an id of 'IEroot' which wraps around everything inside of our body tags if a user is browsing with Internet Explorer, and ignores it if a user is using any other browser like Firefox. This allows us to write CSS which targets the #IEroot, and know that it will only be used by IE - very handy.

For those who are interested, a detailed explanation of this method can be found in
this article over at positioniseverything.net.

Step 3: Add your CSS

Finally, we add the necessary CSS to our style.css file.

We'll start by adding the general rules which cover most browsers

The above code covers both the search block and the search form on the main page. Just remember to change the height and width accordingly for your own image.

This now looks great in Firefox, but not so good in IE.

The problem is that IE will not text-indent the text on the submit button. Also, IE now completely removes the search submit button from the Advanced search fieldset on the main page.

So, we need to find a sneaky way of making it look like the text has actually been removed from IE when it hasn't, and also sort out that missing search button.

The following code will do the trick:

Using the #IEroot selector, we first tell IE to make the text very small by declaring 'font-size: 0;' (FIG 1). However, IE still won't remove the text completely, so we then create an area to the right of the magnifying glass image into which we can put the text. We do this by changing the width of the image and setting 'text-align: right;' (FIG 2). You will need to add 10px to the search block image width, and 20px to the advanced search form image width for this to work. Finally, we change the font color to match with our background, in this case white, and this completes the illusion (FIG 3).

Lastly, adding 'text-indent: 0;' to the #IEroot advanced search form gets IE to give us our submit button back :)

So far, I have tested this in Firefox, IE7, and IE6. It might seem like a slightly hackish solution, but it avoids any necessity to try and catch the search form by editing the template.php file and then have to setup extra .tpl.php files. It also uses a relatively small amount of CSS, and is (hopefully) quite easy to understand.