Smart Content Filter lets you customize the appearance of the filter buttons. There are prebuilt designs that you can select and use for your buttons.
You can also create custom button styles by writing custom CSS.
Using Inbuilt Button Styles
In the post editor, scroll down to the Smart Content Filter settings and click on the ‘Design’ tab.
Here you can find the design settings for the filter buttons:
You can select from the 4 pre-built styles. Just click on the button to choose the style.
A live preview of the button is displayed at the bottom.
Creating Custom Button Styles
If you want to create a custom style, click on any pre-built style and edit the CSS to customize the button.
Here are some common CSS selectors that you can use to customize the look of the filter buttons:
.scf_tag_button– The filter tag button in the default state.scf_tag_button:hover– Filter tag button on mouse hover.scf_tag_button.selected– Filter tag button when active (selected).scf_tags_group_heading_title– Group title.scf_tags_group_heading_title + hr– Horizontal divider after the heading.scf_tags_group_content– Container div for the filter buttons in the same group#scf_clear_filters– Clear filters link#scf_clear_filters_container– Clear filters link container
Filter tag button’s custom CSS will show live preview instantly in the design tab. To know more selectors and style them, use the browser devtools as outlined here.