[Resolved] Filter and style in DIVI

[Author]

Posts

[Francisco Ramón Molina Busquiel]

Hi,

hidden link
I have included your styles on this page:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/#toolset-forms-limitations
But there is no difference. 🙁
How can I style the filter controls to take the appearance of DIVI?
Also, how to put a spacing with respect to the table below.
Look at the screenshot.

Thanks for your help.
Regards,

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

The linked documentation refers to how to give some basic styles to Form elements when Bootstrap is disabled.

It does not, and does not intend to, show you how to style form elements so that they match the styles of your theme.

It looks like you modified the default markup in your View search and pagination section, which normally adds the filter controls inside divs with class="form-group", but which are missing from your page. Those custom styles in the linked documentation assume the default markup, and the form-group class is given a bottom margin of 15px which would separate the filter controls from the results below.

You can replace this with some custom CSS of your own, as required.

For styling form elements to match your theme styles generally you would want to create a test page where you insert something coming from Divi's page builder that adds similar form elements (i.e. select dropdowns), and then use your browser dev tools to inspect the markup and the style rules from the theme that apply to them.

You can then try to reproduce the same with the select dropdowns added by Toolset.

Depending on what you find, you may be able to modify the class names or other markup where the select filters are inserted to correspond with the Divi styles.

You only have limited control over the markup generated by the filters, so if that is not possible you can instead look at the details of the theme style rules and add your own custom CSS to reproduce the same based upon the markup generated by Toolset.

[Francisco Ramón Molina Busquiel]

Ok. Thanks Nigel.