Customization with Divi

Anonymous

#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

#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

Anonymous

#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

#240110

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

Anonymous

#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

#240122

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

Anonymous

#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

#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

Anonymous

#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

#240398

This reply has been marked as private.

[Author]

Posts