-
AuthorSearch Results
-
TrevorParticipantThere is no way to add a scroll to a select field other than to have lots of entries (as our demo does). What you could do is to make it a combobox in the field settings. This would the apply the Select2 jQuery script to it, and style it much better.
At the moment you are hiding if empty. But you want to show them, see here:
https://www.screencast.com/t/jUc9Mhe5WqYf
Some custom CSS is needed for the date to be in 2 columns:
.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date input { width: 100px; min-width: auto; display: inline-block; } .searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date li { display: inline-block; } .searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date li:first-child { margin-right: 20px; }
October 6, 2020 at 2:38 pm #262076In reply to: Search Form on Top
TrevorParticipantFor 1, you would have had to specify a template file to use.
You would need to be using a child theme. You copy that file to the child theme folder, and then edit it to add the PHP do_shortcode code as shown here:
<?php echo do_shortcode('[searchandfilter id="710"]'); ?>
You may also need to make the form horizontal, like this (change the px value to match your theme’s mobile/responsive breakpoint):
@media (min-width: 992px) { .searchandfilter[data-sf-form-id="710"] { display: inline-block; vertical-align: top; padding: 0 20px; } }
These are for guidance only. We do not include customising your theme and templates within the scope of support.
2. You wish to use the Shortcode method, but will need to create you own template. You still need to use our results.php template file, but customize it according to these instructions:
https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results
This is only a simple exemplar template, which uses the WordPress Codex structure and PHP.
So, what to do? You can replace almost anything you want in the file, but keep the if … else … endif and the while …. endwhile and transplant your own HTML, PHP and class names to replace our code. Do this slowly and test regularly, keeping backups at each stage.
The results.php template code will run inside your theme’s standard page template, in the content part, called by our results shortcode.
Again, we do not offer a coding service to do this, but it is fairly standard WordPress code, so you can often copy code from elsewhere in your theme.
October 6, 2020 at 12:30 pm #262043In reply to: Different Layout for home page (custom)
TrevorParticipantIt is because you have this:
.home .searchandfilter[data-sf-form-id="1134"] > ul > li.sf-field-search label { display: block; padding-right: 200px; padding-left: 200px; }
The padding take up all the screen on mobile, pretty much.
You need to add some CSS media rules around the tat CSS, like this:
@media (min-width: 991px) { .home .searchandfilter[data-sf-form-id="1134"] > ul > li.sf-field-search label { padding-right: 200px; padding-left: 200px; } } .home .searchandfilter[data-sf-form-id="1134"] > ul > li.sf-field-search label { display: block; }
It may take some fiddling with to get it right, but I will leave that to you, as this isn’t really within the scope of our support.
October 1, 2020 at 5:32 pm #261626In reply to: Horizontal CSS not working.
TrevorParticipantI think you would need something like this:
.searchandfilter[data-sf-form-id="4190"] li[data-sf-field-input-type="checkbox"] ul li, .searchandfilter[data-sf-form-id="4190"] li[data-sf-field-input-type="radio"] ul li { display: inline-block; margin-right: 20px; }
October 1, 2020 at 3:45 pm #261599In reply to: S&F on Post Category template
TrevorParticipantAre you wanting to ONLY ever have this form search inside that ‘Real Weddings’ category?
BTW, I think you might want to use this custom CSS:
.searchandfilter[data-sf-form-id="63885"] li[data-sf-field-input-type="checkbox"] ul li { display: inline-block; margin-right: 20px; }
September 30, 2020 at 1:52 pm #261436In reply to: mobile css
TrevorParticipantThis:
.searchandfilter[data-sf-form-id="6646"] ul { padding-left: 0; }
Would become this:
.searchandfilter[data-sf-form-id="6646"] ul, .searchandfilter[data-sf-form-id="7085"] ul { padding-left: 0; }
September 30, 2020 at 1:44 pm #261432In reply to: mobile css
AnonymousInactiveI have already tried a few things with 7085 and none of the CSS worked so I removed it.
Can I leave the current CSS and add “7085” next to where it says “6646” or should I create a whole new line of CSS for the 7085 form?
For example, here’s a piece of CSS – Can I add 7085 next to the 6446 or make a whole new snippet for 7085?
.searchandfilter[data-sf-form-id="6646"] ul { padding-left: 0; }
I’ve tried different things and haven’t been able to get the columns to fit on mobile for my archive pages, just wondering the best practice for applying it to two different forms, thanks!
September 28, 2020 at 4:25 pm #261111In reply to: Can I style search box like this site
TrevorParticipantYes, but it would require custom CSS, depending on what you need. If you are using select dropdown fields, I would suggest using comboboxes.
You may need to make some changes.
Go to
wp-admin
->Search & Filter
->Settings
->Combobox Script
Change this from
Chosen
toSelect2
– we’re dropping support for Chosen in v3, because it has too many issues on mobile.Next, in the form field settings, select the combobox option for each.
There is an alternate way of doing this, but this is the easiest. Now you can style the resulting select as it is not a select!
You may you may need to hire a third party coder to help you. This search will give some code snippets to help that coder:
https://support.searchandfilter.com/forums/search/data-sf-form-id+.searchandfilter/
September 22, 2020 at 5:10 pm #260389
AnonymousInactiveJust one more question: I work with multiple forms. I know how to add the css rules but am not sure how to add those to the script. Just like this?
<script>(function ( $ ) {
“use strict”;
$(document).on(“sf:ajaxformstart”, “.searchandfilter”, function(){
$(‘.searchandfilter[data-sf-form-id=”10574″, data-sf-form-id=”13928″] li.sf-field-submit input’).addClass(‘disabled’);
});
$(document).on(“sf:ajaxformfinish”, “.searchandfilter”, function(){
$(‘.searchandfilter[data-sf-form-id=”10574″, data-sf-form-id=”13928″] li.sf-field-submit input’).removeClass(‘disabled’);
});
}(jQuery));</script>September 22, 2020 at 4:55 pm #260383
TrevorParticipantCan you fist change this custom CSS:
li.sf-field-submit input { border: 0px !important; text-transform: uppercase; font-size: 14px; font-weight: 600; padding: 10px 20px; color: #2B255D !important; background-color: #FFD618 !important; } li.sf-field-submit input:hover { background-color: #2B255D !important; color: #FFD618 !important; }
to this (no
!importants
):.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input { border: 0px; text-transform: uppercase; font-size: 14px; font-weight: 600; padding: 10px 20px; color: #2B255D; background-color: #FFD618; } .searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input:hover { background-color: #2B255D; color: #FFD618; } .searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input.disabled, .searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input.disabled:hover { color: #aaa; background-color: #ddd; cursor: default; }
So the code becomes:
<script>(function ( $ ) { "use strict"; $(document).on("sf:ajaxformstart", ".searchandfilter", function(){ $('.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input').addClass('disabled'); }); $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){ $('.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input').removeClass('disabled'); }); }(jQuery));</script>
I think. If it doesn’t work, then check if the script is actually on the page. How did you add it to the page?
-
AuthorSearch Results