Search Widget Customization

sylvia
December 28, 2011 at 10:06 pm #2767

Hi,

Looking for some quick advice. The search field in the search widget does not display as the same width between different browsers. I don’t see a CSS class for this in the graphene theme….anyway I can specify the width of the search field so that it does not fluctuate between browsers….(because of where i placed it in my theme…the changing width affects my layout with some browsers)

Also…the search button….anyway I can use CSS to use my own image of search button to replace the current…as that also currently changes between browsers…..thanks as always!!
Anonymous
December 29, 2011 at 2:32 am #21838
The width of the search bar is specified by these CSS rules:
```
#top_search input {

background: url("images/sprite_master.png") no-repeat scroll -69px top #FFFFFF;

border: medium none;

color: gray;

float: left;

height: 17px;

padding: 3px 7px 2px 5px;

width: 148px;

}
```
What’s your website url?
soapy
December 29, 2011 at 4:07 am #21839

Josh, thanks for the reply!

I’m not by my computer so I can’t confirm this…but I think the CSS you have listed is for the top search bar. I am referring to the search bar in the search widget. I don’t think the CSS is the same for both….unless I’m mistaken…
Mod
Kenneth John Odle
December 29, 2011 at 4:20 am #21840
Use Firebug to figure out the unique ID of the widget in question. Then use code like this:
```
#search-3 input {style elements here;}

#search-3 button {width:40px;}
```
#search-3 is the ID of the widget on my test blog; you’ll need to replace it with whatever ID you’re dealing with. I could give you more specific information, but your site remains hidden!

You can style form elements, by the way. Go to my main site (http://www.kjodle.net/) and pick a stylesheet such as “Night Sky” or one of the “Terminal” ones to see this in action. It’s actually pretty cool.
Mod

Kenneth John Odle
December 29, 2011 at 4:57 am #21841

I forgot to mention: you’ll want to go to the “Contact” page to see an example of a form.

soapy
December 30, 2011 at 6:04 pm #21842

Ken,

This worked great, thanks a lot!!

One more question….the default for the search widget is that it displays the word “search” in the search bar. Would you know how I could hide this?? I don’t want the word “search” to appear in the bar….because it already appears on the search button and seems redundant. Thanks Ken!

Mod

Kenneth John Odle
December 30, 2011 at 11:28 pm #21843

I don’t know how to do it with the default search widget, but you can always “view source” and copy the code from the search widget and paste it into a text widget. In this case, you would want to change

value="Search"

to

value=""

which will make the box appear empty.