Thursday, October 19, 2017 08:52 am EDT

Using a Custom Image Button with Drupal 6 Search Form or Block

Bri's picture

So you decided that you want to use an image instead of styling the inputs for the Drupal search block or form. Luckily, this isn't a difficult task at all. Using the hook_form_alter you can accomplish this. You will need to create a small module in order to make this happen. I called mine "modified_search". Here is what the .info file looks like:


; $Id:
name = Modified Search
description = Inject the search how i want it to look.
package = Other
version = VERSION
core = 6.x

And now for the contents of the .module file:


function modified_search_form_alter(&$form, $form_state, $form_id) {
//if its the search block form (based on the id of the form which can be found by viewing the source)
if($form_id=='search_block_form')
{
//alter the submit button to use an image instead
$form['submit'] = array('#type' => 'image_button', '#value' => t(' '), '#src' => 'sites/all/themes/djcase/media/Button-Search.gif');
// alter the default value of the textbox to "Search..." on page load
$form['search_block_form']['#default_value'] = 'Search...';
// add in some javascript events to change the text when the cursor is placed in the box
$form['search_block_form']['#attributes'] = array('onfocus' => "if (this.value == 'Search...') {this.value = '';}", 'onblur' => "if (this.value == '') {this.value = 'Search...';}" );
}
}

And that's all there is to it. The first line in the function is the most important one. This is testing to see which form ID is being altered. This example uses the id "search_block_form" which corresponds to the search block. If you wanted to use the search_theme_form instead, the code would be the same except for replacing the instances of search_block_form with search_theme_form. You can also use the same principle to change the way the login block or login form looks. Just find the ID of the form by viewing the source code. Good luck!

Comments

Anonymous's picture

For the website development,

For the website development, the people must be experienced and well to know how to improve the website visibility and make it attractive. The website must be simple and must have the related information as well. Thanks for the image button customization code on bestessays.org website in detail that would be useful.

Anonymous's picture

How to customize advanced search

hi,
when we have forums,groups we need to provide advanced search
content in any page or blog .
how to customize for this.

Anonymous's picture

Works perfectly, thanks very

Works perfectly, thanks very much!