How can i customize the form with css?

Anonymous

#199571

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.

Anonymous

#199572

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/

Anonymous

#199581

I still need to customize my select boxes.

Trevor

#199584

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.

Anonymous

#199599

Thanks 🙂

Anonymous

#199604

This reply has been marked as private.

Trevor

#199626

Are you using WPML or Polylang?

Anonymous

#199636

No. I’m using Loco translate.

Trevor

#199640

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?

[Author]

Posts