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.

Themes /

Discuss SilverStripe Themes.

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

[Solved] Control over Search box Look and feel


Reply


8 Posts   2111 Views

Avatar
GibMo

Community Member, 17 Posts

5 September 2010 at 2:17am

Edited: 28/09/2010 5:43am

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?

Avatar
losqualo

Community Member, 17 Posts

5 September 2010 at 2:50am

Hi,

I too have today the exact same question. I can see that the search field itself is encased within two divs, with the submit button lying outside of this and so underneath.

I could tweak the stylesheet I guess, but that seems like a hacked alternative to better markup... unless the two divs are there for any specific reason.

I can't though find where the markup for the form is actually generated... certainly not in the SearchForm.ss file.

Rob

Avatar
Martijn

Community Member, 271 Posts

5 September 2010 at 4:56am

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

Avatar
GibMo

Community Member, 17 Posts

5 September 2010 at 8:13am

I do not think modifying the css will help moving the submit button and getting rid of the 'go' text either.

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.

Avatar
Willr

Forum Moderator, 5513 Posts

5 September 2010 at 9:27am

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 */

Avatar
GibMo

Community Member, 17 Posts

5 September 2010 at 10:26am

Txz Will!!

I found some postings dealing with the same issue : http://silverstripe.org/themes-2/show/286874?start=0
Css is definitely the way. I am getting there. I will give it a go tomorrow. It's getting late over here and my contacts seem to be glued to my eyeballs somehow.

Avatar
Martijn

Community Member, 271 Posts

5 September 2010 at 11:39am

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:

$lang['nl_NL']['SearchForm']['GO'] = '';

Avatar
GibMo

Community Member, 17 Posts

6 September 2010 at 7:40am

Txz Guys!!

Look and feel is perfect now