I'm wondering if anyone has customized their search block form in Drupal 6.0 yet, and if so...could they provide sample code of what they did.

I know about this article: http://drupal.org/node/154137

...but I'm not sure if it'll work for drupal 6.0

Comments

ardarvin’s picture

Nope...the code from the aforementioned doc didn't work in Drupal 6.

Anyone?

zilla’s picture

there are several themes for d6 with search built into header (for example) - i think 'internet center' (or something like that) has it in upper right...but i know that several do it - perhaps visit their code and see what they're calling. my guess is that the field name was changed for d6 and a simple edit will fix it...

ardarvin’s picture

I've found a couple themes that use CSS to change the look of the search block, but nobody who is actually changing the search template.

I did some research and came up with this:

Make a search-block-form.tpl.php file in the theme directory, based off the one found in the drupal core. In the comments of the core file they state:

* Available variables:
* - $search_form: The complete search form ready for print.
* - $search: Array of keyed search elements. Can be used to print each form
* element separately.
*
* Default keys within $search:
* - $search['search_block_form']: Text input area wrapped in a div.
* - $search['submit']: Form submit button.
* - $search['hidden']: Hidden form elements. Used to validate forms when submitted.

The, in the custom theme template.php, I make the following function:

function mytheme_preprocess_search_block_form(&$variables) {

$variables['search']['some key'] = "some value";
....
}

Unfortunately I have no idea what all the $search[] keys are, or what their values can/should be.

How do I go about seeing the contents of this variable, or any drupal variables in general?

Again, in the search-block-form.tpl.php core file it states:

* To check for all available data within $search, use the code below.
*
* print '<pre>'. check_plain(print_r($search, 1)) .'</pre>';

Only I'm not sure where to put this code to display the data.

Sorry, I'm new to drupal / php...just trying to figure this out, and ultimately change the "submit" button to a custom icon.

kayaker’s picture

ardarvin - you are on the right track.

Here's what I did:

1. copy search-theme-form.tpl.php from the core into my theme directory

2. Ran this (see notes in search-theme-form.tpl.php) to see what was available:

<?php
print '<pre>'. check_plain(print_r($search, 1)) .'</pre>';
?>

3. In theme copy of search-theme-form.tpl.php, removed

<div id="search" class="container-inline">
  <?php print $search_form; ?>
</div>

and replaced it with

<div id="search" class="container-inline">
  <?php

  /* remove ' this site' - probably should try more surefire way using </label> */
  $search["search_theme_form"]= str_replace(" this site", "", $search["search_theme_form"]);

  /* Replace button input type with image  */
  $search["submit"]=str_replace('input type="submit"', 'input type="image" src="yoursite-path-to-your-search.png" ', $search["submit"]);

  print $search["search_theme_form"];
  print $search["submit"];
  print $search["hidden"];  
   
   ?>
</div>

Notes:

1. At first glance, it looks easier to just hardcode the changes to $search["submit"] and $search["search_theme_form"] but each instance of the search form gets a unique ID - naturally. More than one instance usually occur after the first search.

2. Obviously, you need to put in the correct image src to find your search image

3. I have decades of programming experience, but little in Drupal/PHP so this fix may not be Druapesque.

Kayaker

________________________________________________________________

Aweigh - not all who wander are lost.

http://www.aweigh.com

ardarvin’s picture

Yup, that code works. Thanks.

I've added default text to the search field:

$search["search_theme_form"] = str_replace('value=""', 'value="Search mysite.com"', $search["search_theme_form"]);

However I'd like to add some javascript to get the text to disappear when a user clicks on it, as explained at: http://www.yourhtmlsource.com/forms/clearingdefaulttext.html

I've added the *.js files (as provided from the above link) into my theme directory, with a slight mod so the script searches for the "form-text" class, as opposed to the "cleardefault" class.

I've added the lines:

To the head of the page.tpl.php page.

However, I can't get it to work. Any suggestions?

zilla’s picture

it puts rounded corners on the search box according the to =search tag (changes it) works in safari, IE, ff, etc...

ardarvin’s picture

So I got the javascript to work...I just needed to absolutely link to the files in the head.

ie:

  <script type="text/javascript" src="http://mysite/themes/mytheme/util-functions.js"></script>
  <script type="text/javascript" src="http://mysite/themes/mytheme/clear-default-text.js"></script>
ardarvin’s picture

Using str_replace to alter the vars seems to be setting things up for a failure if Drupal should ever change the default values of things.

Does anyone know how to hard code the vars, i.e. what their full values should be?

$vars['search']['search_block_form'] = ???
$vars['search']['submit'] = ???

siluet’s picture

I find a great article about modifiying forms:

http://www.lullabot.com/articles/modifying-forms-5-and-6

purrin’s picture

I updated the code you had (which works great, THANK YOU!) with a changed line to simply replace the "Search" string on the submit button to just "Go!" below.. And I left the image replacement technique code you have in there just commented out so that people in the future can pick and choose either method easily. This template will definitely be going in my Drupal theming code snippets...

-=- christopher

<div id="search" class="container-inline">
  <?php

  //    * Remove "Search this site: "  *    ////
  $search["search_theme_form"]= str_replace("Search this site: ", "", $search["search_theme_form"]);

  //    * Replace button input type with image  *      ////
  //    $search["submit"]=str_replace('input type="submit"', 'input type="image" src="yoursite-path-to-your-search.png" ', $search["submit"]);
  
  //    * "Search" button with "Go!" *      ////
  $search["submit"]=str_replace('value="Search"', 'value="Go!"', $search["submit"]);



  print $search["search_theme_form"];
  print $search["submit"];
  print $search["hidden"]; 
  
   ?>
</div>

cade_t’s picture

I too am a Drupal newb, but no stranger to programming. Before beginning, I read almost all of the theming documentation on the site. After reading countless worthless responses about going to this page (http://drupal.org/node/173880) to find the solution, I had almost given up on trying to figure out the "Drupal way" to change the "Search this site:" (and also the "Read more") default text. I found the point of origination for the text easily enough (TextMate -> Find in Project), but figuring out how to override the functions that house the text was beyond me. It seemed like the Drupal way of doing things would necessitate copying the original function into my theme's template.php file, then renaming with greater specificity to override. I know the home for "Search this site" is search_box() in search.module, and likewise for "Read more" in node_link() in node.module. But, as these functions don't begin with theme_, I couldn't figure out any way to override them directly.

All that to say, you're simple use of str_replace() has saved me from insanity (I was moments from just throwing my hands up and changing the text in core). I am appalled that a seemingly simple operation (changing basic, persistent text across one's entire website) requires such a roundabout solution. If anyone can share the proper, "Drupalesque" solution to this issue, please do tell. Otherwise, it's str_replace() for now...

BTW, a simpler, though not as foolproof, way of making the change is to run the str_replace() directly on the $search_form (since it's just a big string anyway). That way you don't have to break down the search array and mess with printing the individual parts. Obviously, this can cause trouble though if you want to replace something generic that may show up in more instances than your desired target.

How I used your method to change the "Search this site:" text:

<?php

    /* edit 'this site:' */
    $tweaked_search_form = str_replace("this site:", "name of site", $search_form);

    print $tweaked_search_form;

?>

And also, in the same manner, for "Read more":

  1. Go to node.tpl.php
  2. If there's an an if statement for $links, add code inside statement, else simply add if statement
  3. Add the following code
<?php if ($links): ?>
    <?php

        /* edit 'Read more' */
        $tweaked_links = str_replace("Read more", "[ more... ]", $links);

    ?>
      <div class="links"><?php print $tweaked_links; ?></div>
    <?php endif; ?>

Hope that helps someone as much as you've helped me. And maybe we can find the "Drupal" answer to this, if there is one, sooner or later...

ozon’s picture

I use the follow Code to replace a Multi Lingual String;

$search["search_theme_form"]= str_replace(t('Search this site').':', "<you new stringt or leave it blank for none>", $search["search_theme_form"]);

...
...
sus’s picture

Can you give me the code that needs to go in template.php please?

Thistleseer’s picture

Thanks a lot - the code works fine!

vutbao’s picture

.

vutbao’s picture

Many thanks to Kayaker.

One thing needs to be mentioned: You NEED to clear the cached data (admin->site configuration->permance). It wasted more than hour before I realized this.

Brandon

oopsies’s picture

Your way may not be the "right" way but I think it's just as modular as the preprocess functions way - perhaps even more so because you have direct access to the forms themselves. Anyway, I made some modifications to your code so that it will display the admin options such as spamicide, captcha, and other module stuff that your version doesn't permit.

<?php
// $Id: search-theme-form.tpl.php,v 1.1 2007/10/31 18:06:38 dries Exp $

/**
 * @file search-theme-form.tpl.php
 * Default theme implementation for displaying a search form directly into the
 * theme layout. Not to be confused with the search block or the search page.
 *
 * Available variables:
 * - $search_form: The complete search form ready for print.
 * - $search: Array of keyed search elements. Can be used to print each form
 *   element separately.
 *
 * Default keys within $search:
 * - $search['search_theme_form']: Text input area wrapped in a div.
 * - $search['submit']: Form submit button.
 * - $search['hidden']: Hidden form elements. Used to validate forms when submitted.
 *
 * Since $search is keyed, a direct print of the form element is possible.
 * Modules can add to the search form so it is recommended to check for their
 * existance before printing. The default keys will always exist.
 *
 *   <?php if (isset($search['extra_field'])): ?>
 *     <div class="extra-field">
 *       <?php print $search['extra_field']; ?>
 *     </div>
 *   <?php endif; ?>
 *
 * To check for all available data within $search, use the code below.
 *
 *   <?php print '<pre>'. check_plain(print_r($search, 1)) .'</pre>'; ?>
 *
 * @see template_preprocess_search_theme_form()
 */

/* original code outside of <?php ?> tags
<div id="search" class="container-inline">
  <?php print $search_form; ?>
</div>
*/
?>
<?php
//print '<pre>'. check_plain(print_r($search, 1)) .'</pre>';
?>
<div id="search" class="container-inline">
<?php

	// first make a copy of the $search_form array so that we can make our modifications to it and print it out at the end
	$modified_search_array = $search;

	/* remove ' this site' - probably should try more surefire way using </label> */
	$modified_search_array["search_theme_form"] = str_replace("<label for=\"edit-search-theme-form-1\">Search this site: </label>", "<strong>Quick Search </strong>", $modified_search_array["search_theme_form"]);
	
	$modified_search_array["search_theme_form"] = str_replace("<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=\"text\" maxlength=\"128\" name=\"search_theme_form\" id=\"edit-search-theme-form-1\" size=\"30\" value=\"\" title=\"Enter the terms you wish to search for.\" class=\"form-text\" />", $modified_search_array["search_theme_form"]);
	
	$modified_search_array["submit"] = str_replace("<input type=\"submit\" name=\"op\" id=\"edit-submit-1\" value=\"Search\"  class=\"form-submit\" />", "<input type=\"submit\" name=\"op\" id=\"edit-submit-1\" value=\" \" class=\"form-submit\" />", $modified_search_array["submit"]);

	/* Replace button input type with image. I substituted with the method above by changing the value and removing the "Search" text in the button because I used CSS to display the image rather than an image as a submit button (which didn't display the way I wanted it to.)  */
	/*$modified_search_array["submit"] = str_replace('input type="submit"', 'input type="image" src="'. base_path() . path_to_theme() .'/images/magnify.jpg" ', $modified_search_array["submit"]);*/

	foreach($modified_search_array as $printable_value) {
		print $printable_value;
	}
?>
</div>

You will also need to add search-result.tpl.php and search-results.tpl.php to your template directory to override the default.

mountaineer’s picture

I was looking to change the "Search this site" and discovered the simplest thing was to create this function in my theme's template.php file. I referenced that lullabot article mentioned above to find this.

/**
 * Override the search block form so we can change the label
 * @return 
 * @param $form Object
 */
function phptemplate_search_block_form($form) {
  $output = '';
  
  // the search_block_form element is the search's text field, it also happens to be the form id, so can be confusing
  $form['search_block_form']['#title'] = t('some crazy search title');

  $output .= drupal_render($form);
  return $output;
}
marquardt’s picture

As you pointed out in a later comment, this actually replaces the use of the search-block-form.tpl.php file. A better way IMHO is to use the preprocess function mechanism newly introduced in D6: A preprocess function can be put in template.php and is able to modify template variables before they are passed into the template files. In this case, one would modify the form structure of the search box and then re-render the html. The above example would then become

/**
 * Override or insert PHPTemplate variables into the search_block_form template.
 *
 * @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 phptemplate_preprocess_search_block_form(&$vars, $hook) {

  // Modify elements of the search form

  $vars['form']['search_block_form']['#title'] = t('some crazy search title');

  // 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']);

  // Collect all form elements to make it easier to print the whole form.

  $vars['search_form'] = implode($vars['search']);

}

A local copy (in the same directory of template.php) of the search-block-form.tpl.php must also be provided, even if it isn't different from the one in the core distribution; otherwise the preprocess function isn't executed.

Woggers’s picture

I've tried your method here and have moved the search-block-form.tpl.php from the core module to my local theme directory. I've added the preprocess function as well to template.php, yet I'm still seeing no changes on the site. It continues to use the default "Search this site" search block?

Any ideas? This is DP 6.4

alexis’s picture

Thanks for sharing Marquardt. I needed to change the title of the input text of the search form for the search_theme_form, that's the one added by the theme, not the block, and used this in my template.php:

function phptemplate_preprocess_search_theme_form(&$variables) {
  $variables['form']['search_theme_form']['#title'] = t('some crazy search title');
  unset($variables['form']['search_theme_form']['#printed']);
  $variables['search']['search_theme_form'] = drupal_render($variables['form']['search_theme_form']);
  $variables['search_form'] = implode($variables['search']);
}

I'm using $variables instead of $vars because that's how is called in all contributed modules and core but anyway, it's just the same variable that is passed by reference.

Also, if you want to completely get rid of the title (that's the label in your HTML) replace the first line of the function above with this:

unset($variables['form']['search_theme_form']['#title']);

For everybody else, don't forget clearing your theme registry at /admin/settings/performance after adding a preprocess function in your theme.

Also you need to copy search-theme-form.tpl.php from /modules/search to your theme directory.

Alexis Bellido
Ventanazul: web development and Internet business consulting shouldn't be boring

bkjones’s picture

I tried the preprocess function in Drupal 6.6, and ran into an issue. I started out using the examples here, and first just tried changing the title to make sure I got everything right. After clearing cached data, I found that I had indeed successfully changed my title attribute. However, when I actually performed a search, I got unexpected results - namely, a blank, white screen. Does anyone know why this might have happened? Note that I'm trying (hard) to alter the *theme* search box, not the *block* search box. Does this matter?

Also, I read another comment about using form_alter, but one comment said this was not for themes, but for modules only. Is that right? If so, is it possible to replace my theme's search box with my own module? This method is probably overly complex for a simple change to the theme's search box, but I wanted to check anyway.

alokicreon’s picture

Can you tell me please how to change the default text of submit button ("Search").

Like "Find" instead of "Search" on button.

iajaja’s picture

Use String Overrides to do this (http://drupal.org/project/stringoverrides)

Best,
iA

notebene’s picture

I went with this method, not as simple as the 'display: none' style choice, but it was a chance to learn something new at any rate, so this was much appreciated.

I'd like to take it a step further, and it seems like I might be able to continue to leverage the preprocess function to do it, but I'm not exactly sure how to get a handle on all the available elements of search_block_form.

Specifically, I'd like to change the 'class' name of the search button element. I suppose I could create a style for 'form-submit' that matches an existing style, but I thought a more elegant solution would be to preprocess the search form(s) so their submit buttons used my style, and then I'd only have to update that style one time if it ever needed to change.

Thoughts on how I might go after that using the preprocess method?

Update: I figured it out, with a bit of stepping through some arrays and perusing the API. This is what the inside of my preprocess function looks like.

  // Modify elements of the search form

  //$vars['form']['search_block_form']['#title'] = t('replaced search title');
  $vars['form']['search_block_form']['#title'] = t('');
  $vars['form']['submit']['#attributes'] = array('class' => 'search_btn');
  
  // 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']);
GetActive’s picture

I just went into modules/search.module and edited the string output to suit my needs. What would be so wrong about that?
security issues? works fine on my page.

mountaineer’s picture

Your way works fine, but changing the core modules is not recommended as discussed earlier in this thread. If you go to update your Drupal version, that change will get wiped out.

However, I also just ran into some problems with my way, it overrides the whole .tpl.php file, so any other markup has to be duplicated in the function too.

But, I was just pointed to the stringoverrides module and am switching to use it instead of the function:

http://www.lullabot.com/articles/replace-any-string-drupal-5-6-without-l...

Definitely recommend that for replacing strings easily.

GetActive’s picture

lullabot.com offers some great advice on various drupal topics. I'm still going to use the non-drupal way :)

coupet’s picture

String Overrides
http://drupal.org/project/stringoverrides

----
Darly

allanx’s picture

Go to: /modules/search/search.module

Edit out the line "Search this site" from the below the lines:

function search_box(&$form_state, $form_id)

coupet’s picture

@ allanx, you are creating your own version of Drupal thru this process. NOT recommended.

----
Darly

allanx’s picture

Just removing the text.

eg:

function search_box(&$form_state, $form_id) {
$form[$form_id] = array(
'#title' => t('Search this site'),

function search_box(&$form_state, $form_id) {
$form[$form_id] = array(
'#title' => t(''),

Doesn't seem to affect the function, just the text displayed in the search block.

cheers
allanx

coupet’s picture

yes! But remember to change the line again if planning to upgrade to a new version later. Actually changing core files would require submitting a patch for that module.

----
Darly

jackreacher’s picture

#search-block-form label{
visibility: hidden;
}

I believe it's the only label used in that block.

EDIT: Actually, this is not a great solution. the tag can still cause some styling problems. It may be a quick fix for some though.

thomas23@drupal.org’s picture

  #topbar label,
  #topbar #edit-submit,
  #topbar #edit-submit-1,
  #topbar #edit-submit-2
  {
    display: none;
  }

(of course replace or omit #topbar since this is special to my theme). This also removes any label in the topbar region plus all submit buttons. Also there is div#edit-search-block-form-1-wrapper label {} to get this very label tag "Search this site: ".

You can play around with it but the important bit is using display: none; instead of visibility: hidden; since the later reserves space even though it's not been shown but the former doesn't even reserve space in browser's view port.

Btw. thanks all you people for advices on the D6 way of creating once own search form!

P.S. I you use Opera 9.5 go to Tools -> Advanced ->Developer Tools a.k.a. Dragonfly; ng web developer (read: "themers") tool (and yes, I'm familiar with Firebug and Web Developer extensions to firefox).

jackreacher’s picture

Sheesh-> /me such a noob. thanks thomas. This gets my vote as the best way to omit the label until the label becomes a module configurable item. (not that it needs to be)

malco23’s picture

this worked great, thanks jackreacher

jozzhart’s picture

Using the template overwrite method I had to use a different file name, search-block-form.tpl.php

as documented here:
http://api.drupal.org/api/file/modules/search/search-block-form.tpl.php/6

And update all references from search_theme_form to search_block_form


  /* remove ' this site' - probably should try more surefire way using </label> */
  $search["search_block_form"]= str_replace("Search this site:", "", $search["search_block_form"]);

  /* Replace button input type with image  */
  $search["submit"]=str_replace('input type="submit"', 'input type="image" src="/search.gif" ', $search["submit"]);

  print $search["search_block_form"];
  print $search["submit"];
  print $search["hidden"]; 
  
   

mokargas’s picture

Guys, I'm not sure what the problem is. Can't you do this with a simple form alter in 6.0?

Ie, to change the title from 'Search this site' to 'Search' on the search_theme_form for example:

/**
   * Implementation of hook_form_alter().
   *
   * The function is named search_form_alter.
   */
  function search_form_alter(&$form, $form_state, $form_id) {
    switch ($form_id) {
      case 'search_theme_form':
		$form['search_theme_form']['#title'] = t('Search');	
        break;
	}
  }
bowersox’s picture

Using hook_form_alter is The Drupal Way to change your search form, IMO.

To do so, create your own module and define your own function mymodule_form_alter() with the sample code that denizengt posted. A few important notes:

  • In mymodule_form_alter() you can change all sorts of things about the form using Drupal's rich Forms API. You can add code above/below the form or any field with ['#prefix'] and ['#suffix']. You can change button labels, such as the search Submit button label:
    function mymodule_form_alter(&$form, $form_state, $form_id) {
      switch ($form_id) {
        case 'search_theme_form':
          $form['submit']['#value'] = 'Go';
          break;
      }
    }
    
  • You must use hook_form_alter() within a module, not within a theme. Because of the way Drupal works, if you define a function called search_form_alter() within your own theme, it will sometimes work but not in all cases. I found it doesn't work on webform pages, for example, because of the way that module_implements() works inside of drupal_alter() in core.
  • Test your form fully after altering it to make sure your alterations haven't accidently broken any of its functionality.
  • Learn more at Forms API Reference and Forms API Quickstart.

    Brandon

    Brandon Bowersox
    brandon@ojctech.com
    OJC Technologies, Inc.
    www.ojctech.com, 217.344-0444 ext. 14

Brandon Bowersox-Johnson, Pixo
brandon@pixotech.com
www.pixotech.com, 217-344-0444

japanitrat’s picture

also nice to have is the jQuery 'example' plugin where we can add a default value to the search box which will then react on focus (removing the default value). you must have jquery-plugins module and the jquery.example plugin (which has to be dropped into the jquery_plugin directory): then you add the plugin and define the preprocess as follows:

jquery_plugin_add('example');
// ...
function phptemplate_preprocess_search_block_form(&$variables) {
  // delete title and use jquery for default value
  unset($variables['form']['search_block_form']['#title']);
  drupal_add_js('$(document).ready(function(){ $("#edit-search-block-form-1").example("keyword search"); });', 'inline');
   
  // apply
  unset($variables['form']['search_block_form']['#printed']);
  $variables['search']['search_block_form'] = drupal_render($variables['form']['search_block_form']);
  $variables['search_form'] = implode($variables['search']); 
}
JordiTR’s picture

Thanks to all of you. Here you are the multilingual version of the same code:

I've only set it to the "Search this site" string. If you wish changing the rest take the same path :-)

Daryljames’s picture

I just open search.module and removed the title search this site... worked perfectly...

AdrianB’s picture

Yes it does, but then you'll have to re-do it every time you upgrade Drupal. It is generally not recommended to alter the core code because of this.

The Drupal Way™ of doing this simpel label remover is ridiculously complicated, so I'll just stick with the display:none way.

mattez’s picture

$search['submit'] = str_replace('value="'. t('Search') .'"', 'value="'. t('Find') .'"', $search["submit"]);

subac’s picture

This code works!!!

Daugilas’s picture

My way of doing that is big, it works and is highly configurable though.

What I did was:

  • changed submit button with custom image;
  • changed submit button's default "Search" text;
  • removed/changed default "Search this site:" text in label (title);
  • added default value which dissapears when user clicks or otherwise focuses the input field;

I will give all the code you need with comments. By commenting/uncommenting some lines you can vary between all these features.

Ok, now step by step explanation:
.

1. Preparing files

Necessary step.

Make sure you have 'template.php' file in your theme directory. If not - create one.
Copy 'search-theme-form.tpl.php' file to yout theme directory (usualy from '/modules/search').
.

2. Preparing javascript

Not necessary step, unless you want some js funcionality.

In this case I use http://www.yourhtmlsource.com/forms/clearingdefaulttext.html#theJavascript to make default value of search field dissapear when user focuses input field. You can download both needed files from the link above ('util-functions.js' and 'clear-default-text.js'). This js needs class 'cleardefault' to be added to wanted input field (we'll do that later in template.php file).

now we upload both .js files to /mytheme/js/ folder and load them in mytheme.info file:

scripts[] = js/util-functions.js
scripts[] = js/clear-default-text.js

.

3. template.php file

Necessary step.

Add this function to your template.php file:

/**
* Override or insert PHPTemplate variables into the search_theme_form template.
*
* @param $variables
*/
function phptemplate_preprocess_search_theme_form(&$variables) {
/**
 * Changes to submit button
 */
//  change submit button's text
  $variables['form']['submit']['#value'] = t('Go!');

//  define path to image which replaces submit button
  $search_icon = base_path() . path_to_theme() .'/images/search-icon.gif';
//  add 'src' attribute to submit button
  $variables['form']['submit']['#attributes'] = array('src' => $search_icon);
//  change submit input type. Line below does not work! instead I added changes to 'search-theme-form.tpl.php' file
//  $variables['form']['submit']['#type'] = 'image';
  
//  rebuild the rendered version (submit button, rest remains unchanged)
  unset($variables['form']['submit']['#printed']);
  $variables['search']['submit'] = drupal_render($variables['form']['submit']);

/**
 * Changes to input field and it's label (title)
 */
//  add default value to input field
  $variables['form']['search_theme_form']['#value'] = t('Search...');
//  add class name to input field so javascript could deal with it (javascript loaded in mytheme.info)
  $variables['form']['search_theme_form']['#attributes'] = array('class' => 'cleardefault');

//  change label (title) of input field
//  $variables['form']['search_theme_form']['#title'] = t('some crazy search title');
//  remove label (title) of input field
  unset($variables['form']['search_theme_form']['#title']);

//  rebuild the rendered version (search form, rest remains unchanged)
  unset($variables['form']['search_theme_form']['#printed']);
  $variables['search']['search_theme_form'] = drupal_render($variables['form']['search_theme_form']);

/**
 * Additional
 */
//  collect all form elements to make it easier to print the whole form.
  $variables['search_form'] = implode($variables['search']);
}

.

4. search-theme-form.tpl.php file

Not necessary step, unless you want to change submit button to custom image.

Replace code in your search-theme-form.tpl.php file with this one:

<div id="search" class="container-inline">
  <?php
//  change submit input type.
  $search_form = str_replace('type="submit"', 'type="image"', $search_form);

  print $search_form;
  ?>
</div>

Custom image already defined in template.php file.
.

5. Input field style

Not necessesary at all.

If you want to customize border of your input field edit your .css file. In my case it looks like:

#wrapper #container #header #header-top #search input.form-text {
  border: 1px solid #bebebe;
}

.

6. Notes

Please pay attention.

First of all thanks for many of you who commented above - I used a lot of your code :)

To configure everything read carefully comments in template.php file - it just looks big actualy its really simple. Experiment a little and you'll get the result you want.

Sorry for my english .)
and if you noticed any errors or have an improvement - share it with others below!

Dret’s picture

Ho to all

considering all above...

How to remove ONLY the wrapper DIV inside the FORM Tag, using template.php...??

These are the rendered DIV by a print $search_box Snippet


<div>
<div id="search" class="container-inline">
<div class="form-item" id="edit-search-theme-form-1-wrapper">

How can I "destroy" them permanetly? ;)

I need Only FORM + LABEL + INPUT(s) TAGS without unusefull, nasty container!

Thanks!
Bye!

sakib000’s picture

Done this:

<?php

$search["search_theme_form"]=str_replace('value=""', 'value="Search..." onblur="setTimeout(\'closeResults()\',2000); if (this.value == \'\') {this.value = \'\';}"  onfocus="if (this.value == \'Search...\') {this.value = \'\';}" ', $search["search_theme_form"]);

?>
Dret’s picture

This is my way but I don't know if could have security problem:

I re-build the form via template adding some PHP snippet without string replacements functions or override:

My Search form now is something like this:


<form action="<?php echo $base_path; ?>search/node" method="post" id="search-theme-form" class="search">
<label for="edit-search-theme-form-l">Search:</label>
<input type="text" name="search_theme_form" id="edit-search-theme-form-l" maxlength="50" value="" title="Cerca" class="form-text" />
<input type="image" src="/sites/all/themes/mysite/images/search.png" name="op" alt="Search"/>
<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />
<input type="hidden" name="form_token" id="search-id-token" value="<?php print drupal_get_token('search_theme_form'); ?>" />
</form>

The markup is now small, sematic (no unusefull

wrappers!9 and fully customizable.

Bye.

khaki’s picture

i'm a little bit confuse... please provide what template file you've modify to remove those extra DIV's? is it the template.php, search-theme-form.tpl or search-block-form.tpl?

khaki’s picture

i've tried this method... and it output the search form... but when i try to put some keywords... their were no possible results returned. what could be the missing?

jazzitup’s picture

@sakib000: Even if I agree that we should not use tpl.php for overriding a search form layout, I use the same tweak.
BTW, what does your "closeResults()" function do?

Fleshgrinder’s picture

How I did it, this way you are language independent and it doesn't matter what could be changed in the future within any part of the search.

  1. Create search-block-form.tpl.php in your themes folder. You can use the following code:
    // $Id:
    
    /**
     * @file search-block-form.tpl.php
     * 
     * Layout for search box.
     */
    $onfocus = 'javascript:
      if (document.search_block.search_theme_form.value==\''. t('Search') .'\') {
        document.search_block.search_theme_form.value=\'\';
        document.search_block.search_theme_form.style.color=\'#000\';
      };
    ';
    $onblur  = 'javascript:
      if (document.search_block.search_theme_form.value==\'\') {
        document.search_block.search_theme_form.value=\''. t('Search') .'\';
        document.search_block.search_theme_form.style.color=\'#aaa\';
      };
    ';
    
    echo '<input type="text" name="search_theme_form" value="'. t('Search') .'" title="'. t('Enter the terms you wish to search for.') .'"';
    echo ' maxlength="255" onfocus="'. $onfocus .'" onblur="'. $onblur .'" style="color:#aaa" />';
    echo '<input type="submit" name="op" value="'. t('Search') .'" title="'. t('Search this site') .'." />';
    echo $search['hidden'];
    
  2. Create block-search.tpl.php in your themes folder. You can use the following code:
    // $Id:
    
    /**
     * @file block-search.tpl.php
     * 
     * Default layout for the search block.
     */
    echo '<div id="search-block">';
      echo str_replace('<form ', '<form name="search_block" ', $block->content);
    echo '</div>';
    
  3. Clear the cache.
rickt’s picture

The custom search module allows you to change or remove the label text and set the image path for a custom submit button.

http://drupal.org/project/Custom_Search

khaki’s picture

can this module remove some extra tags like some unwanted div's? theming method to be exact...

Raphael Apard’s picture

You can do it with the function yourtheme_preprocess_search_block_form() in your template.php file of your theme :

function yourtheme_preprocess_search_block_form(&$vars, $hook) {
 
  // Modify elements of the search form
  unset($vars['form']['search_block_form']['#title']);
 
  // 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(	
	'onfocus' => 'if(this.value == \''.t('Search').'\') {this.value = \'\';}',
	'onblur' => 'if(this.value == \'\') {this.value = \''.t('Search').'\';}');
 
  // Change the text on the submit button
  unset($vars['form']['submit']);
 
  // 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']);
}

This works for me.

Raphael

steel-track’s picture

I spent a few hours messing around with each and every solution presented, and the ideal solution I found for having a search field that says "search" that disappears 'onclick' and a submit button that uses an image and has no text is as follows:

First, use the code that is pasted below and pop it into your template.php file. This is pulled from some other posts and tweaked a little by me, so all thanks go to the community for providing the backbone on this one, and I take no credit for it.

//modify search form elements

function mytheme_preprocess_search_block_form(&$vars, $hook) {

// Modify elements of the search form
unset($vars['form']['search_block_form']['#title']);

// 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(
'onfocus' => 'if(this.value == \''.t('Search').'\') {this.value = \'\';}',
'onblur' => 'if(this.value == \'\') {this.value = \''.t('Search').'\';}');

// Modify elements of the submit button
unset($vars['form']['submit']['#value']);

// Add text on the submit button if wanted
//$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']);
}

Second, to make your submit button into an image simply style your submit button using the following css (I used a container div called searchwrap in this example):

div#searchwrap .form-submit {
     background-image: url(images/btn_search_box.png);
     background-repeat: no-repeat;
     background-color: transparent;
     border: none;
}

You can also use div#searchwrap label { display: none } to get rid of any labels you don't want.

Third, reset your site cache by going to admin/settings/performance and click "clear cached data."

This is what I found to be the ideal solution to having a small, simple search box and submit button image. The two major pluses I see are a) you have much more control over your submit image by using css, such as adding hover properties, and b) you don't clutter up your theme folder with template override files.

56rosa’s picture

Hello steel-track,

Can I apply this code to a Zen sub-theme as well please?

I have inserted this code in my theme.css but for some reason, the submit button moves back where it was originally:

#edit-submit-1 {
  display: inline;
  margin-right:125px;
  margin-top:-56px;
}

How can I make sure that it won't move? Any idea?

Thanks a lot,

Dret’s picture

My solution (posted here:http://drupal.org/node/232874#comment-2461684) need the "search block" in theme admin page to be active. After You have also to remove the original snippet for it and place my code everywhere you need in page .tpl file.

ellanylea’s picture

This long thread is neatly summarized in the top part of this Handbook page:

How to Customize the Block Search Form - http://drupal.org/node/154137

anonymous07’s picture

Subscribe

nbawiz’s picture

Good day,

I would think this a simple task, but I know nothing of php, and am new to drupal. My search form prints out the word "SEARCH" right above the search field on my site. It is throwing off the alignment of the text and the field itself. I used firebug to inspect an element, and found that if I removed this code

Search

, the output of "SEARCH" went away.

However, I do not know which file to edit in my theme or in the search module itself to remove this output. It seems like it would be simple, but it is not due to my ignorance.

I do not wish to change the form elements or the presentation of the search form itself, only the text that prints above the form. Can anyone help? PLEASE??