Support Forums

Support Forums Forums Search & Filter Pro How can i customize the form with css?

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by  Trevor 8 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • elmenyutazo
    #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.

    elmenyutazo
    #199572
    elmenyutazo
    #199581

    I still need to customize my select boxes.

    Trevor Moderator
    #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.

    elmenyutazo
    #199599

    Thanks 🙂

    elmenyutazo
    #199604
    This reply has been marked as private.
    Trevor Moderator
    #199626

    Are you using WPML or Polylang?

    elmenyutazo
    #199636

    No. I’m using Loco translate.

    Trevor Moderator
    #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?

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.