search module - use of search template

[coroico]

I would like customize the search form of the search module.

The search template associated with the module is :

{$startform}

{$label}: {$inputbox}{$submitbutton}{$hidden}

{$endform}

How, by css, can i modify the design of this form ? What is the meaning of these varaibles ($label, $inputbox, ...)
Thanks in advance for your answer

[pralay]

Hi,
same problem with me.
I also want edit the css and actually make the textbox small in length and change submit button.
How I can do that?
Please anyone help.

[Ted]

The trick for these kinds of module forms is to wrap the templates up in divs, spans, etc that you can then target with css.

Doing something like:

Code: Select all

<div id="MySearch">
{$startform}

{$label}: {$inputbox}{$submitbutton}{$hidden}

{$endform}
</div>

or even in your page template....

Code: Select all

<div id="MySearch">{search}</div>

Now you can just hit it with CSS.

Code: Select all

#MySearch input {
  width: 25em;
}

Those variables ({$label}, {$input}) are just pieces of html created in the module itself.  They just get spit out as regular text or an input box, submit button, etc.  You can do a view source on the page to see.

(I'm not sure if the css is right...  I'm no expert.  But you get the idea.)

[pralay]

Hi,
maintaining the width in div can not change the textbox size within because there is a size specified in the tag of the textbox that is generated by the variable.
How can I change the width of the textbox?

[ripcurlksm]

maintaining the width in div can not change the textbox size within because there is a size specified in the tag of the textbox that is generated by the variable.
How can I change the width of the textbox?

I need to do this too! Can someone help?

[tsw]

using


{search}


and css

div#search input {
width:5em;
}

works here.