We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 8168
    • 1,118 Posts
    Does anyone have any template CSS files they have used to customise the visual appearance of the Non Ajax search input and results? The default CSS looks pretty ropey! Also seems to be a huge amount of space between the results within the results page! Any thoughts on this would be greatly received!
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      Just do a "view source" on the pages in question, and put rules in your .css file for each id and class you see in the form’s and the result’s HTML tags. Then adjust the styling as you please. For example, if your usual rules for p specify a certain margin and/or padding, specify that p.AS_Results (or whatever the class for that part of the results may be) has a different margin and/or padding.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 8168
        • 1,118 Posts
        Thanks sottwell - is there no documentation anywhere as to which CSS style controls what?
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          Yes, there are actually some sample templates and CSS files in assets/snippets/ajaxSearch/documentation.

          However, you can use your own templates and have them use any ID or classnames you want.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 8168
            • 1,118 Posts
            Thanks - the templates are all code and hard to see them in visual for how they will layout the content? How is it possible to see this visually to amend them?

            There seems to be a pre style tag which forces formatting of the search input form - how can i amend this? I don’t want all the padding that the default MODx styling uses - I cant seem to remove this padding in the CSS docs?


            Cheers
              • 8168
              • 1,118 Posts
              Yep just been through and downloaded the code locally and removed the <pre style> tag before the search form and it removes all that horrid padding and margins - how can i remove this from the search code be default?
                • 5811
                • 1,717 Posts
                By changing the templates/layout.tpl.html you change the default layout.

                But it could be better to use the &tplLayout parameter to specify you own layout template and keep safe the original wink
                  • 8168
                  • 1,118 Posts
                  Thanks coroico

                  I have got rid of the Pre Style tag and that has helped a lot - although I am still wanting to amend a few other things - in the layout.tpl.html file - the layout does not render? its all code - how can one tell what all this code means?
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    It’s in three parts:
                    [+as.showForm:is=`1`:then=`
                    <form [+as.formId+] action="[+as.formAction+]" method="post">
                        <fieldset>
                        <input type="hidden" name="advSearch" value="[+as.advSearch+]" />
                        <label for="ajaxSearch_input">
                          <input id="ajaxSearch_input" class="cleardefault" type="text" name="search" value="[+as.inputValue+]"[+as.inputOptions+] />
                        </label>
                        <label for="ajaxSearch_submit">
                          <input id="ajaxSearch_submit" type="submit" name="sub" value="[+as.submitText+]" />
                        </label>
                        </fieldset>
                    </form>
                    `+]

                    If the snippet was called with the &AS_showForm parameter either left out or set to 1, then the form will be displayed. The placeholders [+...+] are used to build the form with either parameters set in the snippet call or default values if the parameters are not in the snippet call. For example, [+as.submitText+] will be the text on the submit button, taken from the language files - $_lang[’as_searchButtonText’] = ’Go!’.
                    [+as.showIntro:is=`1`:then=`
                    <p class="ajaxSearch_intro" id="ajaxSearch_intro">[+as.introMessage+]</p>
                    `+]

                    If the snippet parameter to show the introduction is set to 1, then the introduction message from the language file is displayed in <p> tags.
                    [+as.showResults:is=`1`:then=`
                    [+as.results+]
                    `+]

                    If the snippet parameter &AS_showResults is set to 1 or left out (default is 1), then the results of the search is displayed by replacing the [+as.results+] placeholder with the actual search results.

                    So far AjaxSearch comes with 30 language files. Many of the output of these placeholders can be changed by editing the language file you specify in the snippet’s parameters; english is the default.

                    You can read the documentation, in the file assets/snippets/ajaxSearch/ajaxSearch_readme.txt to see the possible parameters and their default values, as well as an explanation of tpls, placeholders, and several examples including styling.
                      Studying MODX in the desert - http://sottwell.com
                      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                      Join the Slack Community - http://modx.org
                      • 8168
                      • 1,118 Posts
                      Thanks sottwell - all makes sense now ;]