Custom CSS like this might do it, but change the actual family to whatever you need, and the size!
.searchandfilter .sf-field-search input {
font-family: "Avenir", Sans-serif;
font-size: 15px;
}
If you want to utilize a theme search box (such as found in most theme headers and/or main menus) using a WordPress rewrite is best. For this you should be using a child theme (really easy to set up if you don’t know how, using a free plugin from Orbisius – you can delete that plugin once it is done), and you edit the functions.php file and add some code to pass the search terms to our form on the results page. You will want to use code like that shown in this post (change the slug name though to match that of your site search page):
https://support.searchandfilter.com/forums/topic/using-default-wp-search-bar-to-show-sf-results-page/#post-243811
The Search and Filter form must also have a search box in it to ‘accept’ the search terms. I would ‘hide’ (using custom CSS) the header search box on the results page, as otherwise that will conflict with our form if used on that page. If necessary, show me the page when done and I can give you that CSS.
As to working with Elementor Pro, you need an additional extension plugin from us – the link is at the top of this guide (which you need to read and follow):
https://searchandfilter.com/documentation/3rd-party/elementor/
Can you first change the combobox script that S&F is using, and remove that CSS and let me know when done?
Change the combobox script to Select2 (there is an option in our settings page to choose which Combobox script to use). Your current form uses Chosen, which is set within our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.
Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.
Then, this post shows all the formatting CSS for Select2 (and how to change it):
https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345
Yes, it is possible to use our plugin with an archives grid using Masonry.
There are a number of options:
1. Your theme has archive pages that already use masonry
2. You have a page builder that uses masonry
3. You use Divi Builder, which uses a Masonry alternative called Salvattore
4. You want to write your own code/template to use Masonry
Depending on your choice above, I can point you in the right direction. for #4, see this thread (and any others linked in that thread):
https://support.searchandfilter.com/forums/topic/infinite-scroll-with-masonry/
We have received feature requests to allow the one form to be broken into parts to be placed (and styled) in different places (and differently styled) on the page.
We have taken those requests on board for our forthcoming V3 (which we hope to release in a few weeks – but that may flex a little as we polish the code and UI). For example, you might have a form in WooCommerce that has a Search Box (text field), a Sort Order drop down, and then other fields (Product Categories, Product Tags, Variations, etc). You will be able to place the Search Box in the header, and the Sort Order above the products, and the rest of the form in the sidebar.
But, that is not possible right now.
Custom CSS styling can turn a form field like a checkbox or radio buttons into what appear to be choice buttons (like a Tag cloud).
AnonymousInactive
I know this question has been asked many times before. I’ve tried to implement the solutions I’ve found and have been unable to get it to work. I’m using a child theme of Astra with WP Bakery. Everything is at the latest version.
On NovaScotiaFood.com I have a search form here. I want it to be horizontal.
I can get it to work in Inspector simply by going to the first li element and changing display to inline-block. But it doesn’t work when I input the CSS via Customizer. I have also tried adding it to my stylesheet via FTP. I am using Siteground Optimizer caching and Cloudflare. The SG cache has been cleared repeatedly and Cloudflare has been put in development mode. I have tried a hard refresh of the browser numerous times too (I’m in Chrome).
I’ve tried the following bits of CSS:
#search-filter-form-2018 > ul > li {
list-style: none!important;
display: inline-block!important;
padding: 0 20px;
}
.searchandfilter[data-sf-form-id="2018"] {
list-style: none!important;
display: inline-block!important;
padding: 0 20px;
}
.searchfilter ul li {
list-style: none!important;
display: inline-block!important;
padding: 0 20px;
}
None of these are working. Can you please help?
Ah, OK. I would normally say set some CSS classes on the elementor container where you can specify whether the form in the container is to be vertical or horizontal and then precede the CSS with one or the other.
This was done in this thread also:
https://support.searchandfilter.com/forums/topic/search-form-customize-styling-2/
I will close this thread for now.
More custom CSS for you:
.page-id-1309 #primary {
width: 100%;
}
.page-id-1309 #secondary {
display: none;
}
.searchandfilter[data-sf-form-id="1313"] h4 {
font-weight: 700;
}
So, looking at the page right now, I am not sure what you need? Maybe you can make an annotated sketch/image for me to visualize it? You cannot upload images here, so use a file sharing site and send me a link to the image.
This custom CSS will make the Submit button align better:
.searchandfilter[data-sf-form-id="2829"] .sf-field-submit::before{
content: "";
display: block;
height: 43px;
width: 25px;
}
It took quite a while to make, but try this custom CSS:
.searchandfilter[data-sf-form-id="1628"] ul {
margin-left: 0;
}
.searchandfilter[data-sf-form-id="1628"] > ul {
padding: 0 10px;
width: 100%;
}
.searchandfilter[data-sf-form-id="1628"] > ul > li,
.searchandfilter[data-sf-form-id="1628"] > ul > li label,
.searchandfilter[data-sf-form-id="1628"] > ul > li label input,
.searchandfilter[data-sf-form-id="1628"] > ul > li label select.sf-input-select {
width: 100%;
}
.searchandfilter[data-sf-form-id="1628"] > ul > li[data-sf-field-input-type="range-slider"] label,
.searchandfilter[data-sf-form-id="1628"] > ul > li[data-sf-field-input-type="checkbox"] li label {
width: auto;
}
.searchandfilter[data-sf-form-id="1628"] .meta-slider,
.searchandfilter[data-sf-form-id="1628"] > ul > li label select.sf-input-select {
max-width: none;
}
We are taking this one step at a time, and so far, all is good.
Now we need to add some javascript to the page. If you have no means to do this, you could use this plugin (using this plugin you do not need the <script></script> tags):
https://wordpress.org/plugins/custom-css-js/
This is the JavaScript for your form:
<script>
(function ( $ ) {
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
$('.sf-field-posts_per_page select.sf-input-select').select2({minimumResultsForSearch: -1});
});
}(jQuery));
jQuery(document).ready(function($){
$('.sf-field-posts_per_page select.sf-input-select').select2({minimumResultsForSearch: -1});
});
</script>
After adding this, the Post per Page field should look like the others.
I am not sure what you mean when you ask:
Q. Is there any way to place one dropdown at the end of the page under the same filter id?
