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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

All other Modules /

Discuss all other Modules here.

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

Search box size


Go to End


3 Posts   2033 Views

Avatar
Marlie511

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?
thanks!

Avatar
UncleCheese

Forum Moderator, 4102 Posts

31 July 2009 at 9:47am

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

Avatar
Happysadhu

Community Member, 33 Posts

4 August 2009 at 5:22am

Edited: 05/08/2009 11:51am

Hi,
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:

Example:
#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