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

Comments

Hi,

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; ?>
    </div>

    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" />
    </div>
    <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"  />
    </div>
  3. Put the image to images folder, in this example I replace the button with search.png
  4. Styling the search box via CSS

Dan

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

Title:Search FormReplacing 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.

Dan

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
{
border:0px;
width: 160px;
background:url(images/search.png) no-repeat;
}
div#search-box .form-submit
{
border:0px;
background:url(images/submit.png) no-repeat;
color:rgba(0,0,0,0);
-width:30px;
-height:30px;
margin-left:-4px;
}

simple no ?..

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?
Thanks!!!