Customizing Filter Buttons

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:

Customizing 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.

There are three CSS classes available that you can use to customize the button:

  1. .scf_tag_button – Changes the style of the button in the normal state.
  2. .scf_tag_button:hover – Changes the style of the button in the hover state.
  3. .scf_tag_button.selected – Changes the style of the button in the selected state.

You can write the custom CSS for these classes in the editor and view the live preview instantly.

Was this page helpful?