By g10tto on

I'd like to style the search bar by:

- removing the "Search this site:" text
- adding a rounded corner to the left
- remove the border
- make the submit button an image

I was able to achieve this in a previous incarnation of my site by copying the code from that CMS's search module and modifying it.

However, while I can do all this, after submitting I get a 404 page.

Not being especially savvy in JS, it'd be nice to know what all I need before setting this up on my Drupal site.

Thanks!

⋅ Categories: Drupal 6.x

Comments

g10tto’s picture

g10tto commented

bump. is there a way to recode or style any of the default blocks? this is supposed to be open source, right?

BradleyT’s picture

BradleyT commented

Everything on a web page can be modified - it just takes some CSS and/or modifying your template files. Get the firebug add on for firefox and see what styles you need to edit or over-ride to change the search box.

Firebug would show you that the Search button can be manipulated by creating CSS for #search .form-submit

In my case I modified page.tpl.php to put the search box in a named DIV so I could do whatever I wanted with it.
<div ID="headersearch"><?php print $search_box; ?></div>

I create #headersearch in style.css and do whatever I want.

g10tto’s picture

g10tto commented

That's a good suggestion, but I'm definitely looking more at altering the template files.

After playing with Garland's default search.module file, there don't appear to be any changes even after clearing the cache.

The function I'm looking at is at line 1062 for my version. It defines everything except the colon, which makes me a little suspicious.

Anyone have any luck altering the search form?

flabat’s picture

flabat commented

you can do all the theme forms using just CSS

g10tto’s picture

g10tto commented

Sure I can.

I want to remove the text and change the submit input into an image though. CSS won't cover that.

Anyone know exactly which file I need to alter for that?

WorldFallz’s picture

WorldFallz commented

Yep-- no need to hack core. Copy the form .tpl.php files from from the /modules/search directory to your theme directory and adjust as desired.

For more info see the excellent video Fine-tuning the UI by Theming Forms In Drupal 6.0.

===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz

Bilalx’s picture

Bilalx commented

Thanks for your suggestion