I am currently converting the tutorial theme to a custom design. But I do not know how te control the look an feel of the search box.

* The submit button is ackward positioned underneath the search box. I would like to position it to the right of the box.
* I managed to replace the standard button with a image in the style sheet. But somehow the new button does not seem to fit. Is there a more elegant way to accomplish that? And I cannot get rid of the "Go" text.

Any solutions?

The form generation is controlled by Form.

I think css is the way to go, to style forms on frontend when possible.

My experience is, that with some clever styling, you can accomplish a lot.

If not you van break up the form parts in the template and call the fields in a template control loop.

See this post for more info:

http://www.silverstripe.org/form-questions/show/256460

I read in the sapphire/FormAction.php something about replacing the regular submit button with an image. But I could not figure out how to do that.

As martijn said its much easier to use css to style the form so if you want to replace the submit button with an image you can do something like this (see the search box on this site up the top for an example)

#Search input.action {
background: /* give the url of your image */;
height: /* give the height of your image */;
width: /* give the width of your image */ ;
}

That does not get rid of the text, to do that there is a number of ways eg (http://css-tricks.com/snippets/css/remove-button-text-in-ie7/). You can also use padding and overflow hidden to get the desired result

#Search input.action {
background: /* give the url of your image */;
height: 0;
padding-top: /* height of your image */;
overflow: hidden;
width: /* give the width of your image */ ;
}

IE will have issues with that second method so you may need to add a given height (rather than 0) to IE specifically like *height: /* height of image */

To get rid of the Go text on the search button, I created a folder xoverrides, so all core (template) and language files will be overridden with files in that folder.

Just put this string in your language lang folder: