Jump to:

23379 Posts in 18298 Topics by 2867 members

General Questions

SilverStripe Forums » General Questions » Custom search function instead $SearchForm - template thing, same funtionality

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: 660 Views
  • Mackodlak
    Avatar
    Community Member
    95 Posts

    Custom search function instead $SearchForm - template thing, same funtionality Link to this post

    Hello,

    so I have a question, I have a search form in css that I have to use, and I'm having problems with it... It is using some backgroundimage and such things so if I use it in form.css so $searchform picks it up automatically it is also used in forum search and it looks ugly there.
    So what I would like to do is make my own custom function for search that uses the layout it should and leave the form.css alone.

    How would I do it?

    How would I call this function?

    Thank you!

    PS: for some further assistance in assisting me this is css:

    /* SEARCH RESULTS STYLES
    ------------------------------------------------ */
    ul#SearchResults {
       margin: 10px 0;
    }
       ul#SearchResults li {
          list-style: none;
          margin: 5px 0;
          font-size: 1em;
       }

    /* SEARCH FORM
    ------------------------------------------------ */

    #search {
       margin-left:10px;
       margin-right:10px;
       margin-top:15px;
       margin-bottom:15px;
       height:30px;
       width:220px;
    }

    fieldset.search {
       border: none;
       width: 201px;
       
    }
    .search input,
    .search button {
       border: none;
       float: left;
       color:#98a8b1;

    }
    .search input.box {
       width: 155px;
       height: 31px;
       background: url(../images/search_all.gif) no-repeat left top;
       font-size: 12px;
       padding: 2px 8px 0px;
       
       
    }
    .search input.box:focus {

    }
    .search button.btn {
       width: 30px;
       height: 31px;
       cursor: pointer;
       text-indent: -9999px;
       background: #FFFFFF url(../images/search_all.gif) no-repeat top right;
       display:inline;
       
    }
    .search button.btn:hover {
       
    }

    atm in layout it's used as :

                <div id="search">
                   <form id="searchform" action="#/" method="get">
                      <fieldset class="search">
                      <input class="box" type="text" value="Traži...">
                      <button class="btn" title="Submit Search">Search</button>
                      </fieldset>
                   </form>
                </div>

    and it should be made workable by inserting some action instead "#/"

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