Styling the Search element

Joined: 02/11/2007

Hey there.

I am trying to work on a post 2000 (!) website using Drupal and am currently not liking the default Search button and box. I would like to style the result of the call to print search box.

Did that make sense and is it possible?!

Thanks in advance.
Andy.

G&G Podcast Host
Matt Farina's picture
Joined: 06/01/2006
easy to modify

This depends on which search box you are talking about. The one on every page or the one on example.com/search/node?

In both cases there is a lot you can do in css before touching php code. There are, also, modules like safari search which brings safaris search functionality to drupal (http://drupal.org/project/safarisearch).

Then there are, also, things you can do by altering the form in the template.php file.

CSS and modules are typically the easier route. Is there something specific you are trying to do?

The php side of things is just simple theme form altering.

Matt Farina
Geeks and God Co-Host
www.mattfarina.com

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

Joined: 02/11/2007
Specific

There is something specific - but I kinda wanted to know where to change things so I could do other stuff too.

The specific is that I want the search box that appears on every page (in my header area) to JUST be a box with the word search in it. In fact - I don't even want it to be a box - I want it to be a space where it says search and if you click there you can type your search query.

I'll try and make it someplace and show you what I mean!

A.

--
Andy Hoyland
andy@stjb.org.uk
http://www.stjb.org.uk

G&G Podcast Host
Matt Farina's picture
Joined: 06/01/2006
all css

This is pretty much the power of CSS at work.

To hide the button set the CSS elements attribute visibility to hidden (visibility:hidden).

The search box itself can be themed with borders (or you can remove them). You can theme it with CSS the same way you theme other elements. to remove the border, for example, set the border to 0.

But, be careful to be specific on your CSS. You don't want all the buttons to disappear or all the form boxes to change.

2 things aren't CSS. One is changing the default text in the search box. This is something you do via the template.php file.

There are 2 ways to do that. One is just using the template.php file and the other is to use that and an outside .tpl.php file. I'll show using the template.php file that calls an outside .tpl.php file.

Using the template.php file with an outsite tpl.php file:

<?php
/**
* This snippet catches the default search_box layout
* and looks for a search_box.tpl.php file in the same folder
* which has the new layout.
*/
function phptemplate_search_theme_form($form) {
  return
_phptemplate_callback('search_box', array('form' => $form));
}
?>

And, search_box.tpl.php:

<?php
  $form
['search_theme_form_keys']['#value'] = "Search...";
  print
drupal_render($form);
?>

Now, if you want to have the string go away when they click on the search box that's javascript and jquery actually makes that easy. Check out http://visualjquery.com and the focus and blur events.

Matt Farina
Geeks and God Co-Host
www.mattfarina.com

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

Joined: 02/11/2007
Great!

Thanks for that Matt - that all works great - now I'll get on with the styling!

A.

--
Andy Hoyland
andy@stjb.org.uk
http://www.stjb.org.uk