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

Trying to add CSS to simple.search

    • 48244
    • 23 Posts
    markus5010 Reply #1, 12 years, 1 month ago
    Noob question...

    I'm trying to make the simple.search input field look like this:

    <div class="search">
<form id="searchForm" action="../page-search-results.html" method="get">
<div class="input-group">
<input type="text" class="form-control search" name="q" id="q" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="icon icon-search"></i></button>
</span>
</div>
</form>
</div>



    I'm pretty sure I use this code as my "t/l chunk". But I don't know which of these fields are replaced with simple.search variables to make the form work.

    Is this correct?

    <div class="search">
<form id="searchForm" action="[[~[[+landing:default=`[[*156]]`]]]]" method="[[+method:default=`get`]]">
<div class="input-group">
<input id="searchField" class="form-control search" type="text" name="searchField" value="[[+searchValue:default=`Search the site`]]"/>
<input id="searchIcon" class="utilityButton" type="image" alt="Search" src="/assets/templates/my/images/searchButton.png">
<input type="hidden" name="id" value="[[+landing:default=[[*156]]]]" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="icon icon-search"></i></button>
</span>
</div>
</form>
</div>


    Here is the generic simple.search that works fine:

    Search form:
    [[!SimpleSearchForm? &landing=`156`]]


    Search results page:
    [[!SimpleSearch]]


    Thanks!
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 12 years, 1 month ago
      That should work. Have you tried it?
        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
        • 48244
        • 23 Posts
        markus5010 Reply #3, 12 years, 1 month ago
        It doesn't. The button background image isn't showing up though... might that be it?
          • 44580
          • 189 Posts
          gissirob Reply #4, 12 years, 1 month ago
          How are you picking up the template chunk? Unless you specify it in the call, I'm pretty sure it uses the default.

          [[!SimpleSearchForm? &landing=`156` &tpl=`your.SimpleSearchTpl`]]
            • 48244
            • 23 Posts
            markus5010 Reply #5, 12 years, 1 month ago
            Made a mistake. Here is my tpl:

            <form id="searchForm" action="[[~[[+landing:default=`[[*156]]`]]]]" method="[[+method:default=`get`]]">
<div class="input-group">
<input type="text" class="form-control search" name="searchField" id="searchField" value="[[+searchValue:default=`Search the site`]]">
<input type="hidden" name="id" value="[[+landing:default=[[*156]]]]" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="icon icon-search"></i></button>
</span>
</div>
</form>



            Here is how I'm calling the tpl:
            [[!SimpleSearchForm? &landing=`156` &tpl=`simpleSearch-form` &searchIndex=`my-searchField`]]
            [ed. note: markus5010 last edited this post 12 years, 1 month ago.]
              • 44580
              • 189 Posts
              gissirob Reply #6, 12 years, 1 month ago
              And try this:
              <input type="text" class="form-control search" id="[[+searchIndex]]" name="[[+searchIndex]]" value="[[+searchValue:default=`Search the site`]]">


              without the &searchIndex OR

              add my- into the line as you have it:

              <input type="text" class="form-control search" name="my-searchField" id="my-searchField" value="[[+searchValue:default=`Search the site`]]">
                • 48244
                • 23 Posts
                markus5010 Reply #7, 12 years, 1 month ago
                Thank you, but no luck. This is what I used:

                <form id="searchForm" action="[[~[[+landing:default=`[[*156]]`]]]]" method="[[+method:default=`get`]]">

<div class="input-group">

<input type="text" class="form-control search" id="[[+searchIndex]]" name="[[+searchIndex]]" value="[[+searchValue:default=`Search the site`]]">
<input type="hidden" name="id" value="[[+landing:default=[[*156]]]]" />

<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="icon icon-search"></i></button>
</span>
</div>

</form>
                  • 48244
                  • 23 Posts
                  markus5010 Reply #8, 12 years, 1 month ago
                  Is this part ok?

                  [[!SimpleSearchForm? &landing=`156` &tpl=`simpleSearch-form` &searchIndex=`my-searchField`]]
                    • 44580
                    • 189 Posts
                    gissirob Reply #9, 12 years, 1 month ago
                    Quote from: markus5010 at Aug 06, 2014, 11:38 PM
                    Is this part ok?

                    [[!SimpleSearchForm? &landing=`156` &tpl=`simpleSearch-form` &searchIndex=`my-searchField`]]
                    Not with the &searchIndex=`my-searchField`. Either take that out, or put your own values back in the <input> as I described above
                      • 48244
                      • 23 Posts
                      markus5010 Reply #10, 12 years, 1 month ago
                      I took it out, still no joy. I must be doing something wrong.

                      [[!SimpleSearchForm? &landing=`156` &tpl=`simpleSearch-form`]]