How do I style the search box?

Working on a site: http://probiner.x10.mx/topowiki/tiki-index.php

I would like to style the search box at the top right in order to:
- remove the border
- Change the background to a "sand" color instead of "WHITE!".
- have a text by default inside the box with "Search" that vanishes when a user starts typing.

Thanks for any help or references.


United States

Changing the style is easy.... you can use the Look & Feel page to add custom CSS styling. See the docs for details. You might find my beginner's guide useful.

Adding default text Search will require customizing the module. You'll also need to add some sort of scripting to remove the word "Search" when the user starts typing. A possible workaround that requires no customization:

  • Create a image with the word Search. Customize the CSS (as explained above) to add this to the background of the search field.
  • Create a custom module that embeds the standard Search module.
  • Surround the module with a custom DIV.
  • Add a quick script to replace the image of the word Search with a plain background, for the onfocus event of the custom DIV.

Not pretty, but entirely do-able with only CSS styling.


- Rick | My Tiki Blog | My Tiki UserPage

Why be a dummy? Get smarty! TikiForSmarties.com
Tiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.

Upcoming Events

No records to display