Drupal Tips - Theming the search form |Tech Lull

drupal_version:

6.x

to override the default search block, add this function to template.php in your active theme directory:


function your_theme_preprocess_search_block_form(&$vars, $hook) {

// Modify elements of the search form
$vars['form']['search_block_form']['#title'] = t('');
$vars['form']['search_block_form']['#value'] = t('Search');
$vars['form']['submit'] = array(
'#type' => 'image_button',
'#value' => t('Search Glass),
'#id' => 'search_image_submit',
'#src' => drupal_get_path('theme', 'your_theme').'/images/glass.gif',
);
// Rebuild the rendered version (search form only, rest remains unchanged)
unset($vars['form']['search_block_form']['#printed']);
unset($vars['form']['submit']['#printed']);
$vars['search']['search_block_form'] = drupal_render($vars['form']['search_block_form']);
$vars['search']['submit'] = drupal_render($vars['form']['submit']);

// Collect all form elements to make it easier to print the whole form.
$vars['search_form'] = implode($vars['search']);
}

to get a image for the submit button, we need to set the submit form element parameters:


type - image_button
value - the alt text
id - this is so we can adjust css
src - the path to the image

if you wanted to just replace the wording of the button, instead of a custom image, you could use


$vars['form']['submit']['#value'] = t('New Text');

The #title (label text) is set to nothing, but you could easily add one. The default #value is 'Search' which can be cleared on focus of the textfield, by adding some jquery


$(document).ready(function() {
  $('#edit-search-block-form-1').focus(function(){
    if($('#edit-search-block-form-1').val() == 'Search'){
      $('#edit-search-block-form-1').val('');
    }
  });
});

back to drupal tips...

Similar entries

Theming the search form