Changing Search Textfield layout?

[jmansa]

I'm trying to change the layout of the search textfield and submit button, and the submit button is easy caurse its written like a normal form submit so I just have to put in a class command!

But when it comes to the textfield is a whole other case:

{$inputbox}

How do I style this without styling all textfields in my page?

[KO]

Wrap your searchbox around and style it normally with your stylesheet.

br, K

[resistem]

I need help with this too, but I don't really get the "wrap it around..." part. If someone could type up an example that would be very helpful. Thanks.

[calguy1000]

Try something like this:

Code: Select all

<div class="mysearchdiv">{Search}</div>

and then in your css

Code: Select all

.mysearchdiv input.text {
  background-color: #c0c0c0;
}

[resistem]

I'm still having some problems with this. I have no problem altering the Submit button, but the Textfield is not looking like I want it to look.

When written like this in the Search Template the Submit looks just like I've described in my CSS:

Code: Select all

<input name="submit" class="submit" value="{$submittext}»" type="submit" />

But when I write

Code: Select all

<div class="search">{search}</div>

in my ordinary template, as I think it what calguy1000 said, is doesn't obey the class at all.

When I write a similar code as the Submit code in the Search Template I get the textfield to look like I want it, but it also writes out some of the code:

Code: Select all

<input type=" [TEXTFIELD LOOKING LIKE I WANT IT TO] " /> 

Does this make sense at all? I only started with this 3 days ago so... But I'm down to getting everything like I want it except the Search textfield.

[KO]

Occationally you have to put some other earlier tag from your DOM tree to your style. So it could look something like this:

Code: Select all

#pagewrabber (or whatever is in your template before search tag) .mysearchdiv input.text {
  background-color: #c0c0c0;
}

Check also that there is no other style/stylesheet overwriting styles in some other stylesheet after your style/stylesheet.

Code: Select all

<input type=" [TEXTFIELD LOOKING LIKE I WANT IT TO] " /> 

This one I dont get. If you want to hardcode certain styles in tag you put it inside style="Yourstyle" and NOT insidetype="Yourstyle". Type is for something else.

Hope this helps.

K