We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Styling AJAX search - CSS

    • 24836
    • 6 Posts
    reneegee Reply #1, 16 years, 5 months ago
    Hello! I am a newcomer to MODx and am having trouble figuring out the ins and outs of styling the css of ajaxsearch. I read the wiki, and attempted to plug in my css properties to align with those of ajaxsearch, but I am having no luck. I am looking for a good tutorial on styling as I cannot even figure out how to get rid of the Submit button to include my own custom button. (see image below) anyone have any tips? I’ve seen a few custom jobs around here, but don’t know where to start.......this is what I’m attempting to style (just the search part, obviously)

    Any help is greatly appreciated!
      • 38162
      • 97 Posts
      N!Ce Reply #2, 16 years, 4 months ago
      To hide the button you could go with:
      #ajaxSearch_submit {
 display:none;
}



      to style it use the same selector and add your own image or bg color:
      #ajaxSearch_submit {
 width:100px; /* dimensions of your image here */
 height:50px;
 background: #B6AC5A url('yourimage.png') no-repeat fixed center;
 text-indent:-9999px; /* gets rid of the text */
}


      Haven’t tried, but should normally work.
        • 24836
        • 6 Posts
        reneegee Reply #3, 16 years, 4 months ago
        that worked GREAT. thanks so much for your help!!! grin
          • 22915
          • 33 Posts
          pcmodem Reply #4, 16 years, 3 months ago
          The only problem is Internet Explorer doesn’t recognize the -9999px for getting rid of the text.
            • 38162
            • 97 Posts
            N!Ce Reply #5, 16 years, 3 months ago
            Quote from: reneegee at May 27, 2010, 06:02 PM

            that worked GREAT. thanks so much for your help!!! grin
            You’re welcome. smiley

            Quote from: pcmodem at Jun 14, 2010, 04:13 PM

            The only problem is Internet Explorer doesn’t recognize the -9999px for getting rid of the text.
            You can alternatively change the caption (’value’) in the template. Try space or "", if that doesn’t work use hard space (alt+0160) or nbsp; - first two should normally work though.
              • 22915
              • 33 Posts
              pcmodem Reply #6, 16 years, 3 months ago
              Quote from: N!Ce at Jun 15, 2010, 05:57 AM

              You can alternatively change the caption (’value’) in the template. Try space or "", if that doesn’t work use hard space (alt+0160) or nbsp; - first two should normally work though.

              How do I change the caption (’value’)?
                • 38162
                • 97 Posts
                N!Ce Reply #7, 16 years, 3 months ago
                First of all: Remember to backup all files you are going to edit!

                Assuming you use the default template, find input.tp.html in assets/snippets/ajaxSearch and replace:
                <input id="[+as.submitId+]" type="submit" name="sub" value="[+as.submitText+]" />

                with:
                <input id="[+as.submitId+]" type="submit" name="sub" value=" " />

                or any of the other mentioned possible replacements.

                You can also edit the language file, by changing:
                $_lang[’as_searchButtonText’] = ’Submit’;

                to
                $_lang[’as_searchButtonText’] = ’ ’;

                I didn’t test anyhing of it, but it should normally work.
                  • 22915
                  • 33 Posts
                  pcmodem Reply #8, 16 years, 3 months ago
                  Is there a way to change the "Value" of the submit each time I call it?
                    • 22915
                    • 33 Posts
                    pcmodem Reply #9, 16 years, 3 months ago
                    Where is the value "Go!" coming from? ajaxsearch, modx, etc.
                      • 28042 ☆ A M B ☆
                      • 24,524 Posts
                      sottwell Reply #10, 16 years, 3 months ago
                      The AjaxSearch language file (assets/snippes/ajaxsearch/lang).
                      English
                      $_lang['as_searchButtonText'] = 'Go!';

                      Hebrew
                      $_lang['as_searchButtonText'] = 'סע!';

                      French
                      $_lang['as_searchButtonText'] = 'rechercher!';
                        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