Looking for support? You can access the support system via your account.
- This topic has 8 replies, 2 voices, and was last updated 5 years, 2 months ago by .
You must be logged in to reply to this topic.
Looking for support? You can access the support system via your account.
Forums › Forums › Search & Filter Pro › How can i customize the form with css?
I want to make the search form look better.
The buttons and the droprowns are ugly.
I read the documentation about it (https://searchandfilter.com/documentation/getting-started/display-search-form/) but i don’t understand it competelly. I tried to modify ‘sf-field-category’ and ‘sf-field-submit’ but nothing happened.
I just found this topic and works, thanks:
https://support.searchandfilter.com/forums/topic/filter-option-skill-level-not-showing-up-on-edit-page/page/2/
I still need to customize my select boxes.
You may want to add the select2 script to the select boxes. First, change the combobox script to select2. In WP Admin -> Search & Filter -> Settings, look for the Combobox script and set that to Select2. Here is a screenshot:
https://www.screencast.com/t/g58SM1O9
Then you need to add this JavaScript to the page:
<script>
(function ( $ ) {
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
$('select.sf-input-select').select2();
});
}(jQuery));
jQuery(document).ready(function($){
$('select.sf-input-select').select2();
});
</script>
You can place this inside a text widget on the page, put the code in an external JavaScript file (enqueued from your child theme functions.php file), or use a plugin to add it, such as:
https://wordpress.org/plugins/custom-css-js/
(note that this plugin does not need the script tags).
Then you need to modify the Select2 CSS. This post shows the complete Select2 CSS that we already include in our plugin:
https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345
At the end is an example of how to modify it.
Does it translate posts like the others do? if so, does it give you the option which post types to translate, as the CSS/JS plugin stores the code as posts. First, try temporarily deactivating loco translate. Does the error still appear?
You must be logged in to reply to this topic.
© 2024 Search & Filter Support. All Rights Reserved.
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
We also use cookies to store items in your cart as well as allowing your to login on the site.
You can adjust all of your cookie settings by navigating the tabs on the left hand side.
By continuing to use this site, you also agree to our Privacy Policy.
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
*Other cookies used for logging in and cart functions will only be used when you use those features and cannot be disabled.
If you disable these cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.
Keeping this cookie enabled helps us to improve our website.
Please enable Strictly Necessary Cookies first so that we can save your preferences!
More information about our Cookie Policy