Creating Drupal custom search

It has become the hallmark of Drupal if the search submit button is located on the right side. The search on Drupal actually can be made arbitrarily, submit button on the left side and it can be replaced with pictures.

We will give you a tutorial to change the look of the search form on Drupal. Here are the steps to create your own custom search for your Drupal theme:

1. Create search-theme-form.tpl.php and place it inside your theme folder.
2. Copy the following code and paste it to your search-theme-form.tpl.php you've created before and save it.
   
   <?php
?>
<div id="search" class="container-inline">
  <input type="image" src="<?php echo base_path() . path_to_theme() ?>/images/search.gif"   class="form-image"/>
<input type="text" name="search_theme_form" id="edit-search_theme_form_keys" class="form-text"/>
<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />
<input type="hidden" name="form_token" id="a-unique-id" value="<?php print drupal_get_token('search_theme_form'); ?>" />
</div>
   
   
3. Put this CSS into your main CSS file (i.e. style.css) and change it to your liking.
   
   #search-box {
float:left;
height:35px;
position:relative;
}

#search-box label {
display:none;
}

#search-box input.form-text {
border: none;
position:relative;
background:transparent;
width:150px;
}

#search-box input.form-text {
border-left: 1px solid #ccc;
}
   
   

Note: you must have search.gif image in your images folder, or you can change it to another images.