Styling AjaxSearch Css? eh?

33 Posts

redwolf Reply #1, 17 years, 7 months ago

Hello,

i am wondering if someone could shed some light on how to go aboot styling the ajax search. i tried pasting the css style for ajax search that they have on http://www.modx.wangba.fr/index.php?id=61in to my custom template that has the ajaxsearch snippet on it. Also I have no Idea how to change the GO! on the submit button to say Search. Thanks any help is greatly appreciated.

1,717 Posts

coroico Reply #2, 17 years, 7 months ago

Look for instance at this post http://modxcms.com/forums/index.php/topic,32606.msg199468.html#msg199468 in the AjaxSearch board to replace the Go button by an image

Otherwise If you would like replace the "Go" label by "search", change the label in your language file in the languages folder.

33 Posts

redwolf Reply #3, 17 years, 7 months ago

Cool that helps out. for the search I replaced the layout.tpl file and just changed the button value to search. And then got rid of that annoying inline boarder think from the layout.tpl file as well. the rest I got with the css file that’s pluged in to the main layout template..

Still having difficulty having the search bring up

Link - Short discription
LONG DISCRIPTION

all i get is

Link - Short discription
Long Discrip

Line break

long description

long description

Link running in to description without line break to separate it.

it doesn’t seem to separate out the individual results. My search results look like a Haiku poem. =)

any advice or tips would be greatly appreciated once again.

1,717 Posts

coroico Reply #4, 17 years, 7 months ago

Could you send me by PM an address of your live site (I like Haiku poem grin

). Thanks

1,717 Posts

coroico Reply #5, 17 years, 7 months ago

@redwolf

Which version of AS do you use ? If you use the version 1.7.1 thks to dowload the last 1.8.1 from the repository
With this release you could define how are displayed the results by changing the layout template used. To get more infos look the links about ajaxSearch in my signature.

33 Posts

redwolf Reply #6, 17 years, 7 months ago

I am using 1.8.1

checking your sig.. Thanks for the help grin

33 Posts

redwolf Reply #7, 17 years, 7 months ago

getting a little lost digging through the wiki.. and links. :’( Is there an example up somewhere with the different result settings layout .tpl files .

Back to digging.. Did you get my pm by chance.. not sure if it sent I dont have anything in my outbox. Thanks!

1,717 Posts

coroico Reply #8, 17 years, 7 months ago

To style the differents search results, you could adapt the templates/result.tpl.html template:

<div class="[+as.resultClass+]">
  <a class="[+as.resultLinkClass+]" href="[+as.resultLink+]" title="[+as.longtitle+]">[+as.pagetitle+]</a>
[+as.descriptionShow:is=`1`:then=`
  <span class="[+as.descriptionClass+]">[+as.description+]</span>
`+]
[+as.extractShow:is=`1`:then=`
  <div class="[+as.extractClass+]"><p>[+as.extract+]</p></div>
`+]
[+as.breadcrumbsShow:is=`1`:then=`
  <span class="[+as.breadcrumbsClass+]">[+as.breadcrumbs+]</span>
`+]
</div>

by adding any html tag (and css style) you want. Simply, be sure to keep well-balanced (open & close) the Phx tags ([+` `+])

33 Posts

redwolf Reply #9, 17 years, 7 months ago

SWEET! i think this is just what I was looking for. Thanks! Coroico.

to bad there is no smiley for a Brew! because you definitely deserve one for the help you provided today.

33 Posts

redwolf Reply #10, 17 years, 7 months ago

darn.. still stuck.. changed the result.tpl.html file and reverted to some of the default ajaxsearch extracting settings and I still get something that looks like a long page with text and some links sprinkled throughout.

I guess its just taking me a bit to grasp how it creates the results. Or am I getting this sort of funky thing because of how my regular content pages are structured?

back to digging...