Jump to:

22993 Posts in 11595 Topics by 2824 members

General Questions

SilverStripe Forums » General Questions » Customize the SearchForm - 2.3.3

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1
Go to End
Author Topic: 1762 Views
  • steve_nyhof
    Avatar
    Community Member
    224 Posts

    Customize the SearchForm - 2.3.3 Link to this post

    I have read many posts but still not getting any real answers on this.

    I want to make a search form similar to the one at the top of this forum site - to include a go button to the right.

    Where can I get into the code and/or css to modify this?

    I found the SearchForm.ss file...

    <form $FormAttributes>
       <fieldset>
          <legend></legend>
          <% control Fields %>
             $FieldHolder
          <% end_control %>
          <% control Actions %>
             $Field
          <% end_control %>
       </fieldset>
    </form>

    and the form.css file which control every form on the site.

    Does anyone know how to get into this please?

    Thank you
    Steve

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Customize the SearchForm - 2.3.3 Link to this post

    To customize the layout (eg for this sites form) we just edit the css files in a themes/themename/css/Form.css. If you have a Form.css it will override all the default styles.

    To get it on the right simply float the button right and float the input left. Or use css positioning. I tend to avoid trying to mess with the form templates / markup as most designs can be done with CSS.

  • steve_nyhof
    Avatar
    Community Member
    224 Posts

    Re: Customize the SearchForm - 2.3.3 Link to this post

    Thank you Willr, but anything I do in the form.css file with these values do not seem to do anything to the form

    #Search {
       width: 105px;
    }
    input#Search_Form_SearchForm_Search {
       width: 110px;
       padding: 3px;
       margin-left: -4px;
       font-size: 1.2em;
       }
    #Sidebar input.action {
       font-size: 1.2em;
       float: right;
       padding: 1px;
       margin: -22px 10px 0 0;
    }

    Any examples of what others have done to make this happen?
    Thank you,
    Steve

    Attached Files
  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Customize the SearchForm - 2.3.3 Link to this post

    Use a tool like Firebug to work out whats happening. Could be not loading your styles, could be getting overridden. Looking at that if #Search is your search box then it needs to be wide enough for the input + the button. Also #Search_Form_SearchForm_Search would need to be floated left (since otherwise it would push the action down).

    See this page for some more information on how to use css positioning http://www.barelyfitz.com/screencast/html-training/css/positioning/

  • steve_nyhof
    Avatar
    Community Member
    224 Posts

    Re: Customize the SearchForm - 2.3.3 Link to this post

    My programmer gave me this...

    <form id="SearchForm_SearchForm" action="$BaseURL/forside/SearchForm" method="get" enctype="application/x-www-form-urlencoded">
    <table border="0" cellpadding="0" cellspacing="0" align="right">
    <tr>
    <td class="search-field">
    <input type="text" value="" name="Search"/>
    </td>
    <td class="go">

    <input type="image" src="$BaseURL/assets/System/searchgo.png" name="Search" />
    </td>
    </tr>
    </table>
    </form>

    So I was able to get what I want in the form, I am still not getting results, so that will be my next research
    Thank you Willr, I will take a look into what you are saying also

    Steve

    1762 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.