Page 1 of 1

Changing Search Textfield layout?

Posted: Wed Aug 15, 2007 8:18 am
by 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?

Re: Changing Search Textfield layout?

Posted: Wed Aug 15, 2007 10:16 am
by KO
Wrap your searchbox around and style it normally with your stylesheet.

br, K

Re: Changing Search Textfield layout?

Posted: Thu Oct 25, 2007 6:44 pm
by 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.

Re: Changing Search Textfield layout?

Posted: Thu Oct 25, 2007 6:50 pm
by 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;
}

Re: Changing Search Textfield layout?

Posted: Thu Oct 25, 2007 7:26 pm
by 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.

Re: Changing Search Textfield layout?

Posted: Fri Oct 26, 2007 7:19 am
by 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