Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules /

Discuss all other Modules here.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Search box size

Go to End

3 Posts   1708 Views


Community Member, 36 Posts

31 July 2009 at 8:56am

I know this is probably something REALLY easy, but I can't find where to change the size of the search box.
Does somebody know?


Forum Moderator, 4102 Posts

31 July 2009 at 9:47am

Seems like something you should be doing in your stylesheet, no?


Community Member, 33 Posts

4 August 2009 at 5:22am

Edited: 05/08/2009 11:51am

I suggest you use the add-on firebug in Firefox or Opera's built-in dragonfly to inspect the css code of the search box to identify and play around with the relevant css elements. For some reason, sapphire's default search box form outputs lots of ids and classes -- more than perhaps necessary for most search forms. Try playing around with the following styles in your form.css of your theme (I just copied the forms.css from the blackcandy into my own theme): input.action {} For the search button and input.text {} for the search box. You may want to suffix these with #SearchForm_SearchForm (the id automatically assigned to the search form tag} as these elements are also used in forms of the main content area.

This is what I'm experimenting with for a search box in my left sidebar:

#SearchForm_SearchForm input.text {
padding: 3px 2px 3px 5px;
border: 1px solid #A7A7A7;
width: 185px;
font-weight: bold;
font-size: .7em;
font-family:"Trebuchet MS";

#SearchForm_SearchForm input.action {
border: 1px solid #A7A7A7;
background: #eff1e6;
padding:2px 2px 2px 4px;
font-weight: bold;
font-size: .7em;
font-family:"Trebuchet MS";

#SearchForm_SearchForm div {
display: block;
float: left;
Hope this helps,
Sam Miller