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

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

danpros’s picture

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

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.

Dan

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
{
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 ?..

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

nicholassimon’s picture

Issue summary: View changes

Instructions for Drupal 8 / FontAwesome 5

Create a YOUR_THEME_NAME_HERE.THEME file and place it in your themes directory (ie. your_site_name/themes/your_theme_name)

Paste this into the file, it is PHP code to find the Search Block and change the value to the UNICODE for the FontAwesome icon. You can find other characters at this link https://fontawesome.com/cheatsheet.

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
}
?>

Open the CSS file of your theme (ie. your_site_name/themes/your_theme_name/css/styles.css) and then paste this in which will change all input submit text to FontAwesome. Not sure if this will work if you also want to add text in the input button though for just an icon it is fine.

Make sure you import FontAwesome, add this at the top of the CSS file

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

then add this in the CSS

input#edit-submit {
	font-family: 'Font Awesome\ 5 Free';
	background-color: transparent;
	border: 0;  
}


FLUSH ALL CACHES AND IT SHOULD WORK FINE

Add Google Font Effects

If you are using Google Web Fonts as well you can add also add effects to the icon (see more here https://developers.google.com/fonts/docs/getting_started#enabling_font_e...). You need to import a Google Web Font including the effect(s) you would like to use first in the CSS so it will be

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800&effect=3d-float');
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

Then go back to your .THEME file and add the class for the 3D Float Effect so the code will now add a class to the input. There are different effects available. So just choose the effect you like, change the CSS for the font import and the change the value FONT-EFFECT-3D-FLOAT int the code below to font-effect-WHATEVER_EFFECT_HERE. Note effects are still in Beta and don't work in all browsers so read here before you try it https://developers.google.com/fonts/docs/getting_started#enabling_font_e...

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
  $form['actions']['submit']['#attributes']['class'][] = 'font-effect-3d-float';
}
?>
BhumikaVarshney’s picture

Status: Active » Needs review
FileSize
20.62 KB

By css you can easily do this.
You can use an image button on the button


or set submit button background to an image using css

input[type=submit] {
background:url(BACKGROUND_IMAGE_PATH_HERE);
border:0;
display:block;
height:Change_TO_backgroundimageheight;
width: Change_To_backgroundimageWidth;
}
Or you can add in .theme file just like in screenshot.