Support Forums

Looking for support? You can access the support system via your account.

Forums Forums Search & Filter Pro Customization with Divi

Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Matthieu Boussard
    #240096

    Hello,

    I have bought the search and filter pro plugin and I am currently using Divi to build the website

    I was able to create my filtering options but there is a default customization and I would like to apply some CSS to it

    Do you know how I can customize the filters? I would like them to be horizontal and consistent with the rest of the website
    The page is not finished yet but you can find the link here if needed: https://stryber.com/blog-test1337

    Thank you very much and have a nice day

    Trevor Moderator
    #240104

    It would most likely require additional custom CSS (I may be able to help with this, if you can give me a good example of what it should look like).

    Horizontal filters are mentioned here:

    https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal

    Matthieu Boussard
    #240106

    Hello Trevor,

    Thank you very much for your reply

    I am OK with doing the CSS but I just don’t find where to do it. Should I do it in the theme customizer of Divi, at the plugin level, or in the Divi module in which I put the code?

    Ideally, the filters should have the font type and font size of the website, the categories should be displayed horizontally too, and I would display the “Reset” button in the same way as a category so I could tweak it to show. “All” categories

    Thank you !

    Trevor Moderator
    #240110

    Our plugin does not have a custom CSS section, so in any other theme location that suits your needs.

    Matthieu Boussard
    #240120

    Thank you very much.

    I will then customize it in the theme customizer. However, do I need to define a class for it in the Divi module or I can add properties inside the .searchandfilter I used to put it horizontally?

    Thank you very much again

    Trevor Moderator
    #240122

    Use the classes we have already placed in the HTML. You can target individual forms and fields that way.

    Matthieu Boussard
    #240128

    Hello Trevor, thank you for your answer.

    My last question is: Do you know where I can find these classes in the HTML as I am using the DIVI builder?

    Thank you and have a nice day,
    Matthieu

    Trevor Moderator
    #240133

    If you make this search on our forum you will see some snippets:

    https://support.searchandfilter.com/forums/search/data-sf-form-id/

    Also, you can use your browser’s web developer tools inspector to look at you form. In Chrome press F12 to open the tools (or Ctrl + Shift + i), see here for an example:

    https://www.screencast.com/t/YwjnhhNA

    Matthieu Boussard
    #240351

    Hello Trevor, thank you very much for your help

    I managed to customize it a bit but what I would like is to have the filters aligned to the left of the page as well as a border around the two classes, a bit like the blue one but that fits to the actual size of the components.
    Do you know which class I should work on? Or if I forgot to spot some?

    Thank you !

    The link to the page is: https://stryber.com/elementor-4536/

    The CSS that I put in the Divi is

    .searchandfilter > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    }

    .searchandfilter{
    margin-top:0px;
    padding-left: 0px;
    border: 1px solid blue;

    }

    .sf-field-search{
    height:30px;
    width:230px;
    margin-left: 0px;
    }

    .sf-input-text{
    font-size:16px;
    font-family:’Open sans’;
    color:#2a3749;
    }

    .sf-field-category{
    height:30px;
    width:230px;
    margin:auto;

    }

    .sf-input-select{
    font-size:16px;
    font-family:’Open sans’;
    color:#2a3749;
    }

    Trevor Moderator
    #240398
    This reply has been marked as private.
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.