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.

General Questions /

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

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

Customize the SearchForm - 2.3.3


Go to End


5 Posts   2710 Views

Avatar
steve_nyhof

Community Member, 224 Posts

28 June 2010 at 8:54am

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

Avatar
Willr

Forum Moderator, 5523 Posts

28 June 2010 at 7:30pm

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.

Avatar
steve_nyhof

Community Member, 224 Posts

29 June 2010 at 2:11am

Edited: 29/06/2010 2:13am

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
Avatar
Willr

Forum Moderator, 5523 Posts

29 June 2010 at 9:03am

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/

Avatar
steve_nyhof

Community Member, 224 Posts

29 June 2010 at 9:14am

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