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'