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.

General Questions

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

Custom search function instead $SearchForm - template thing, same funtionality


Reply

696 Views

Avatar
Mackodlak

23 August 2011 at 12:30am (Last edited: 23 August 2011 12:30am), Community Member, 95 Posts

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 "#/"