Jump to:

10979 Posts in 2722 Topics by 1815 members

All other Modules

SilverStripe Forums » All other Modules » Search box size

Discuss all other Modules here.

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

Page: 1
Go to End
Author Topic: 1377 Views
  • Marlie511
    Avatar
    Community Member
    36 Posts

    Search box size Link to this post

    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!

  • UncleCheese
    Avatar
    4085 Posts

    Re: Search box size Link to this post

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

  • Happysadhu
    Avatar
    Community Member
    33 Posts

    Re: Search box size Link to this post

    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

    1377 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.