How to replace the "Search" button by image of a magnifier and put "Search the site" inside the search box. Thanks!


danpros’s picture


You can try the following steps:

  1. Go to modules folder > search folder, copy the search-theme-form.tpl.php and place it into Danland's folder.
  2. Open the search-theme-form.tpl.php you have copied, replace below codes:
    <div id="search" class="container-inline">
      <?php print $search_form; ?>

    with this

    <div id="search" class="container-inline">
    	<div class="form-item" id="edit-search-theme-form-1-wrapper">
    		<input type="image" alt="Search" id="image-submit" src="<?php echo base_path() . path_to_theme() ?>/images/search.png" class="form-image"/>
    		<input type="text" maxlength="128" name="search_theme_form" id="edit-search-theme-form-1" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
    	<input type="hidden" name="form_token" id="edit-search-theme-form-form-token"  value="<?php print drupal_get_token('search_theme_form'); ?>" />
    	<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form"  />
  3. Put the image to images folder, in this example I replace the button with search.png
  4. Styling the search box via CSS


11309’s picture

Thank you so much! I made it! I really appreciate for your prompt reply.

danpros’s picture

Title: Search Form » Replacing the search submit button with an image
Version: 6.x-1.9 » 6.x-2.1
Status: Active » Closed (fixed)

Solved :)

Notes: If you want to replace the search submit button in a block form, use search-block-form.tpl.php instead.


somnathpawar’s picture

alex_lx’s picture

Lo que yo hice para cambiar a imagen el submit y el textbox de la busqueda fue esto:

#header-wrapper #search-box input.form-text
width: 160px;
background:url(images/search.png) no-repeat;
div#search-box .form-submit
background:url(images/submit.png) no-repeat;

simple no ?..

liquid-v’s picture

Version: 6.x-2.1 » 7.x-1.0
Assigned: Unassigned » liquid-v
Status: Closed (fixed) » Active

I'm a beginner and couldn't figure out how to make it happen on drupal 7.x ...
No "search-theme-form.tpl.php" in /modules/search
Nothing happens when editing "search-block-form.tpl.php"
No submit class or id
Any help?