Skip to main content

Customizing the Search Block

In:
8Mar2009

I recently had to implement a minimal image-based customization to the standard Drupal search block. The resulting search needed to look like this:

The first step was to implement hook_preprocess_search_block_form() in my theme. I adapted mine from this hook_preprocess_search_theme_form() pattern at codegobbler.com.

<?php
/**
* Implementation of HOOK_preprocess_search_block_form.
*
* Adapted from:
*   <a href="http://www.codegobbler.com/customizing-search-box-drupal-6
*
*" title="http://www.codegobbler.com/customizing-search-box-drupal-6
*
*">http://www.codegobbler.com/customizing-search-box-drupal-6
*
*</a> @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 ZENSUBTHEME_preprocess_search_block_form(&$vars, $hook) {

 

// No title
  $vars['form']['search_block_form']['#title'] = t('');

 

// Set a default value for the search box
  $vars['form']['search_block_form']['#value'] = t('search');

 

// Add a custom class to the search box
  // $vars['form']['search_block_form']['#attributes'] = array('class' => t('cleardefault'));

  // 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_block_form']['#printed']);
  $vars['search']['search_block_form'] = drupal_render($vars['form']['search_block_form']);

 

// 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 resulting form is a little simpler than the default, but still has the necessary elements (an input box and a submit button). All that is left is to apply some styling.

First I made a background image:

Then applied this image to the background of the .block-inner div for the block, unstyled the text input (turning off the borders), and moved it to the right of the magnifying glass icon. The following is the CSS that needed to be added to the Zen sub-theme for the site.

  /* NRD: Style the search block.  */
  .sidebar-right .block-search .block-inner
  {
    background-image: url('images/bg-searchbox.gif');
    background-repeat: no-repeat;
  }
  .sidebar-right .block-search .form-text
  {
    background: transparent;
    border: none;
    padding-left: 25px;
    width: 125px;
    color: #666;
  }
  .sidebar-right .block-search .form-submit
  {
    display: none;
  }

The result is functional and looks exactly like the original design comp.

Comments

Post new comment

Warning
I strongly encourage and welcome links and feedback. However, this site is moderated and comments with inappropriate links are rejected. Please do not post a one-line "Me too" or "Great post!" comment just so you can link to your site. Thank you for your understanding.
The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.
  • Use to create page breaks.

More information about formatting options