This info applies to Drupal 6 and 7.

Description

This guide describes how to override the default SEARCH THEME FORM* layout when using phptemplate based themes and the core Search module.

* The SEARCH THEME FORM is the search box that that appears in the page header, when enabled. Refer to the NOTES below for overriding the block search form and main page search form.

For customize with Drupal 8.x

See block--search-form-block.html.twig. (to be continue)

For use with Drupal 7.x

The following snippet allows you to customize the text on your search form, show/hide the label, add a custom image to the submit button, and more.

  1. Insert the following snippet into your theme template.php file.
  2. Update "yourthemename" to the name of your theme
  3. Change other values as you wish to further customize your form
/**
Customize your search form
*/

function yourthemename_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_block_form') {
    $form['search_block_form']['#title'] = t('Search'); // Change the text on the label element
    $form['search_block_form']['#title_display'] = 'invisible'; // Toggle label visibility
    $form['search_block_form']['#default_value'] = t('Search Site'); // Set a default value for the textfield
    $form['actions']['submit']['#value'] = t('GO!'); // Change the text on the submit button
    $form['actions']['submit']['#attributes']['alt'] = "Search Button"; //add alt tag
    unset($form['actions']['submit']['#value']); // Remove the value attribute from the input tag, since it is not valid when input type = image

    $form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/icon-search.png');

// Add extra attributes to the text box
    $form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = 'Search Site';}";
    $form['search_block_form']['#attributes']['onfocus'] = "if (this.value == 'Search Site') {this.value = '';}";
  }
}

For use with Drupal 6.x

Step 1) Copy search-theme-form.tpl.php from /modules/search to the working theme directory.

Step 2) Create a template.php file in the theme directory if it doesn't already exist, and add the following code to it:

/**
* Override or insert PHPTemplate variables into the search_theme_form template.
*
* @param $vars
*   A sequential array of variables to pass to the theme template.
* @param $hook
*   The name of the theme function being called (not used in this case.)
*/
function yourthemename_preprocess_search_theme_form(&$vars, $hook) {
  // Remove the "Search this site" label from the form.
  $vars['form']['search_theme_form']['#title'] = t('');
  
  // Set a default value for text inside the search box field.
  $vars['form']['search_theme_form']['#value'] = t('Search this Site');
  
  // Add a custom class and placeholder text to the search box.
  $vars['form']['search_theme_form']['#attributes'] = array('class' => 'NormalTextBox txtSearch', 'onblur' => "if (this.value == '') {this.value = '".$vars['form']['search_theme_form']['#value']."';} ;", 'onfocus' => "if (this.value == '".$vars['form']['search_theme_form']['#value']."') {this.value = '';} ;" );

  
  // Change the text on the submit button
  //$vars['form']['submit']['#value'] = t('Go');
 
  // Rebuild the rendered version (search form only, rest remains unchanged)
  unset($vars['form']['search_theme_form']['#printed']);
  $vars['search']['search_theme_form'] = drupal_render($vars['form']['search_theme_form']);
 
  $vars['form']['submit']['#type'] = 'image_button';
  $vars['form']['submit']['#src'] = path_to_theme() . '/images/search.jpg';
	
  // Rebuild the rendered version (submit button, rest remains unchanged)
  unset($vars['form']['submit']['#printed']);
  $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']);
}

The above code basically removes the "Search this Site" message, adds custom classes to the Search textbox, changes the Search button to an image_button, and adds some default text to the textbox, which automatically gets emptied when the textbox gains focus.

Step 3) Clear the Drupal's site cache. Check for the customization to the Search box on the page.

Note that in Drupal 6.x, none of the steps below apply. For Drupl 6.x, the steps above are all the steps necessary. The steps below apply specifically to Drupal 5.x & earlier.

Note: see For use with Drupal 5.x and earlier

Notes

Comments

2noame’s picture

This was very helpful, thank you. One question though. How do I go about making the "Search this site..." text a different color and font-style, without also doing the same to what the user inputs? For example say Search would be in gray and italic, and then when someone clicks to enter their text, it is black and normal.

queryblitz’s picture

To make the "Search this site..." text a different color and font-style, without also doing the same to what the user inputs, just replace this part of the code:

  $vars['form']['search_theme_form']['#attributes'] = array('class' => 'NormalTextBox txtSearch', 
                                                              'onfocus' => "if (this.value == 'Search this Site') {this.value = '';}",
                                                              'onblur' => "if (this.value == '') {this.value = 'Search this Site';}");

with this:

  $vars['form']['search_theme_form']['#attributes'] = array('class' => 'search-default-font',
                                                              'onfocus' => "if (this.value == 'Search this Site') {this.value = ''; $(this).removeClass('search-default-font');}",
                                                              'onblur' => "if (this.value == '') {this.value = 'Search this Site'; $(this).addClass('search-default-font');}");

and in your CSS, add this:

input.search-default-font { color:#999; font-style: italic; }

This code adds a new class to the search form and styles the class with css, then removes the class when the form is active.
Check it out at my site, www.Lickitornot.com.

-Andrew Fisher

mlohbihler’s picture

The text used in the focus and blur events is not translated, and so will not work when the language is not English. A quick fix is to do this:

  $defText = t('Search this Site');
 
  // Set a default value for text inside the search box field.
  $vars['form']['search_theme_form']['#value'] = $defText;
 
  // Add a custom class and placeholder text to the search box.
  $vars['form']['search_theme_form']['#attributes'] = array('class' => 'NormalTextBox txtSearch',
          'onfocus' => "if (this.value == '". $defText ."') {this.value = '';}",
          'onblur' => "if (this.value == '') {this.value = '". $defText ."';}");
2dareis2do’s picture

I have followed these instructions and quite simply these do not seem to work for me.

What I am trying to do is to theme the search page i.e mysite.com/search. Is this the same as 'search box that that appears in the page header'?

If not, not how do I go about styling this page. I have followed the instructions for styling the search block and these do seem to work. Any suggestions where I am going wrong?

Dan

2dareis2do’s picture

Ok, as I understand this, it seems that that the buttons for the main search page/node i.e. yoursite.com/search are styled using drupal's built in form api. Not sure how to overide this as I understand that this is not registered in drupals theme registry (not quite sure what that means either).

However I have manged to style my buttons including the main search button and also the advanced search button by copying the following from the acquia slate template.php theme overide function. This basically wraps all buttons in a pair of tags. These tags in turn can be used to style the buttons. The main code here is as follows:

// Override theme_button for expanding graphic buttons
function acquia_slate_button($element) {
  // Make sure not to overwrite classes.
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }
  
  // Wrap visible inputs with span tags for button graphics
  if (stristr($element['#attributes']['style'], 'display: none;') || stristr($element['#attributes']['class'], 'fivestar-submit') || (is_array($element["#upload_validators"]))) {
    return '<input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";
  }
  else {
    return '<span class="button-wrapper"><span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span></span>\n";
  }
}

Simply insert this code in your template.php file and then be sure to rename function acquia_slate_button to your_theme_name_button.

You will also need add styling for your new button using something along the lines of:

span.button span {
background:url("/acquiadrupal619//sites/all/themes/entropay_c/images/submit-button.png") no-repeat scroll left top transparent; 
display:inline-block;
height:33px;
margin-right:-2px;
padding:0 0 0 9px;
}

span.button {
background:url("/acquiadrupal619//sites/all/themes/entropay_c/images/submit-button-right.png") no-repeat scroll right top transparent;
display:inline-block;
height:33px;
padding:0 10px 0 0;
position:relative;
}

span.button span input {
background-color:transparent;
border:0 none;
color:#FFFFFF;
cursor:pointer;
font-size:107.6%;
height:33px;
margin:0 !important;
padding:0;
white-space:nowrap !important;
}

For more info have a look at the acquia slate theme (http://acquiaslate.fusiondrupalthemes.com/search/user/Search) . From what I understand this technique works quite well across all major browsers.

lakshmi_drupal2’s picture

I followed these instructions, and tried to print the search form like this in page.tpl.php:

<?php print theme('search_theme_form'); ?>

It seemed to output the contents of search-theme-form.tpl.php in my theme directory, namely:

search-theme-form.tpl.php<br />
<div id="search" class="container-inline">
  <?php print $search_form; ?>
</div>

But the HTML doesn't look like a form, this is what I get:

search-theme-form.tpl.php<br />
<div id="search" class="container-inline">
  Search this Site<input type="image" name="" id=""  class="form-submit" src="/sites/all/themes/rnftheme/images/search.jpg" />
</div>

Any ideas what is wrong?

Thanks,
Lakshmi

lakshmi_drupal2’s picture

Also, if I call print_r($vars['form']); in the first line of my function rnftheme_preprocess_search_theme_form(&$vars, $hook) {} it is empty, in case this helps resolve my problem.

Thanks.

lakshmi_drupal2’s picture

I needed to change permissions on the search module just enabled. Phew! Can't believe I spent hours on this.

Also, I changed the code to display the form to: <?php print $search_box; ?> like in garland's page.tpl.php.

ressa’s picture

Great guide, very easy to follow and it just works - thanks!

markpetherbridge’s picture

1) This didnt work for me, The titles etc stayed the same.
2) It messed up my login function somehow and stopped it working.

How the hell could it of done that?

benchesters’s picture

I've spent 2-3 hours playing around with this and it doesn't work at all, nothing changes whatsoever. Does anyone have any tips? The text remains on the search box, it's like I have not done anything.

queryblitz’s picture

Like what version of Drupal do you have, what theme are you using, etc? Hopefully you're using Drupal 6.

Abhishek Verma’s picture

thanks

kraj-1’s picture

Hi , I tried implementing the code for the site ultimats.in
However it is not turning up right with some error code.

Please let me know !

Thanks and anyway a great helpful platform !

kraj

hermes_costell’s picture

Heads-up: Drupal 7 will reach its End of Life on February 30th, 2517.

icf-vpathak’s picture

Thanks. The article was very helpful.