Jump to:

1374 Posts in 487 Topics by 520 members

Themes

SilverStripe Forums » Themes » [Solved] Control over Search box Look and feel

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 2020 Views
  • GibMo
    Avatar
    Community Member
    17 Posts

    [Solved] Control over Search box Look and feel Link to this post

    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?

  • losqualo
    Avatar
    Community Member
    17 Posts

    Re: [Solved] Control over Search box Look and feel Link to this post

    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

  • Martijn
    Avatar
    Community Member
    271 Posts

    Re: [Solved] Control over Search box Look and feel Link to this post

    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

  • GibMo
    Avatar
    Community Member
    17 Posts

    Re: [Solved] Control over Search box Look and feel Link to this post

    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.

  • Willr
    Avatar
    Forum Moderator
    5489 Posts

    Re: [Solved] Control over Search box Look and feel Link to this post

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

  • GibMo
    Avatar
    Community Member
    17 Posts

    Re: [Solved] Control over Search box Look and feel Link to this post

    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.

  • Martijn
    Avatar
    Community Member
    271 Posts

    Re: [Solved] Control over Search box Look and feel Link to this post

    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'] = '';

  • GibMo
    Avatar
    Community Member
    17 Posts

    Re: [Solved] Control over Search box Look and feel Link to this post

    Txz Guys!!

    Look and feel is perfect now

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