Styling AjaxSearch? & "javascript off" kills search feature?

99 Posts

nate22 Reply #1, 18 years, 10 months ago

I need to style the AjaxSearch snippet and I see this;

----------------------------------------------------------------
:: CSS                         
----------------------------------------------------------------
    The following items are used to style the starting form and
    ajax result container.

    #ajaxSearch_form - id of the search form
    #ajaxSearch_input - id of the input box on the form
    #ajaxSearch_submit - id of the submit button
    #ajaxSearch_output - id of the div that the ajax results are returned in
    
    The following items are used to style the reults when the user does not have javascript or they have clicked the more results link
    
    #ajaxSearch_resultListContainer - id of the results container
    .ajaxSearch_paging - class for span of result pages listing
    .ajaxSearch_pagination - class for pagination paragraph
    .ajaxSearch_result - class for result container div
    .ajaxSearch_resultLink - class for result link
    .ajaxSearch_resultDescription - class for result description span
    .ajaxSearch_extract - class for content extract div (for highlighting)
    .ajaxSearch_highlight1,2,3 - classes for result highlighting.  You need to
        create as many classes as terms you think a user will search for.
    .ajaxSearch_resultsIntroFailure - class for no results paragraph
    .ajaxSearch_intro - class for intro paragraph

    The following items are used to style the results returned by the ajax request.

    .AS_ajax_result - class for the result container div
    .AS_ajax_resultLink - class for the result link
    .AS_ajax_resultDescription - class for the result description span
    .AS_ajax_extract - class for the content extract div (for highlighting)
    .AS_ajax_hightlight1,2,3 - classes for result highlighting.  You need to create as many classes as terms you think a user will search for.
    .AS_ajax_more - class for more search results div
    .AS_ajax_resultsIntroFailure - class for no results paragraph

But, there is no actual HTML anywhere, like a textfield or button. How do I style this? What if I just want to shorten the field and swap the button for an image?

Also, with "javascript off" this AjaxSearch is useless, right?

I have a similar problem with the contact form: there is a border around it that I’d like to get rid of, but I can’t find where this style comes from.

NOTE TO SELF: http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html for all your navigational questions.

576 Posts

sirlancelot Reply #2, 18 years, 10 months ago

With Javascript off, you must specify a landing page where the snippet is uncached (or just call the snippet uncached without a landing page).

To style it you will need to use the selectors provided in the list. you cannot change them in the snippet.

4,205 Posts

dev_cw Reply #3, 18 years, 10 months ago

To figure out the elements in the AS form take a look at the HTML it generates. I think you can edit the presentation directly in the snippet or in a tpl file in the snippet directory (don’t remember). What I have also done is to just make my own form chunk based on the AS generated output. This only works when you do NOT want the Ajax features.

The black border you are referring to in eform is the <fieldset> which by default gives a black border.

Read more on accessible forms: http://htmldog.com/guides/htmladvanced/forms/
And here is a good tutorial on styling forms: http://www.sitepoint.com/article/style-web-forms-css

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]