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


711 Views

Avatar
Mackodlak

Community Member, 95 Posts

23 August 2011 at 12:30am

Edited: 23/08/2011 12:30am

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