How do I customize the look of Simplesearch

4 Posts

thhvancouver Reply #1, 12 years, 2 months ago

Hi guys

Just wondering if it's possible. So I am trying to build my website with Modx and from my template, I created a html search form and customized the look with css. (please see my website: http://www.deutschadp.com/) My question is, is there a way of changing the look of a Simplesearch form so I can preserve the look of my current template?

I have tried to create css rules based on the form but so far they don't seem to be working

Thanks

102 Posts

blankcheck Reply #2, 12 years, 2 months ago

Of course you can...It is MODX, after all;)

http://rtfm.modx.com/display/ADDON/SimpleSearch.SimpleSearchForm

Antonio Zdilar
linearvector.com

4 Posts

thhvancouver Reply #3, 12 years, 2 months ago

ok, I think I'm getting somewhere

here is my new code:

[[SimpleSearchForm? &tpl=`searchform` &landing=`10` &toPlaceholder=`searchform`]]
    <form id="searchform" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
        <fieldset>
            <input name="s" type="text" onfocus="if(this.value=='Suche') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Suche" />
            <button type="submit"></button>
        </fieldset>
    </form>

However, for some reason it's not displaying document 10 after I press search, which means no search result. Any idea how to fix that?

Thanks

102 Posts

blankcheck Reply #4, 12 years, 2 months ago

Add this to your form:

<input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" onfocus="if(this.value=='Suche') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Suche" />
<input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" />

You have everything here:
http://rtfm.modx.com/display/ADDON/SimpleSearch.SimpleSearchForm.tpl [ed. note: blankcheck last edited this post 12 years, 2 months ago.]

Antonio Zdilar
linearvector.com

4 Posts

thhvancouver Reply #5, 12 years, 2 months ago

Just did, but as oppose to before, when the search term would display in the address bar, this time it doesn't do anything

[[SimpleSearchForm? &tpl=`searchform` &landing=`11` &toPlaceholder=`searchform`]]
    <form id="searchform" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
        <fieldset>
            <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" onfocus="if(this.value=='Suche') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Suche" />
<input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" />
            <button type="submit"></button>
        </fieldset>
    </form>

Also, I noticed that the SimpleSearch command seems to be incompatible with my css page.

http://www.deutschadp.com/?id=11

Not sure if it's related? my code for that page is very simple

[[!SimpleSearch? &searchIndex=`s`]

102 Posts

blankcheck Reply #6, 12 years, 2 months ago

Form body must be in searchform chunk. So:

Create searchform chunk
Place this in it:

<form id="searchform" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
<fieldset>
   <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" onfocus="if(this.value=='Suche') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Suche" />
   <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" />
   <button type="submit"></button>
</fieldset>
</form>

In your template (where you want form to show) put

 [[SimpleSearchForm? &tpl=`searchform` &landing=`11`]]

In template where the results will be shown put

[[!SimpleSearch]]

Antonio Zdilar
linearvector.com

4 Posts

thhvancouver Reply #7, 12 years, 2 months ago

Hey there, sorry to be a bother

So now the search function works, but the css styling stop working and the form reverted to the default Modx form.

please see: http://www.deutschadp.com/

Regards

102 Posts

blankcheck Reply #8, 12 years, 2 months ago

//remove id from form tag
<form action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
<fieldset>
//add classes to inputs and style it as you wish
   <input type="text" class="myClass" name="[[+searchIndex]]" id="[[+searchIndex]]" onfocus="if(this.value=='Suche') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Suche" />
   <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" />
   <button type="submit"></button>
</fieldset>
</form>

Antonio Zdilar
linearvector.com