Style a Filter (example)

First you need to create a filter:

pageCreate a Filter

Now we need to Style the Filter Titles.

  • In the Typography tab of the Primary tab, set an appropriate font size and weight.

​

  • In the Design tab, open the Borders tab and the Radius and Border tab.

  • Set a 40px equal Radius or as required to give a suitable oval look.

  • Set an appropriate Border colour, in this example dark grey.

  • Set a solid border Style with an equal 1px Width.

​Set an appropriate Padding to allow the items to breathe.

Set an appropriate padding to allow the items to breathe.

  • In the Design tab, open the Margin and Padding tab and set an upper and lower 10px Padding and a 30px right and left Padding or as required.

​

Relative Styling for button selection

Now we have fully set up the Filter buttons but to make it easier for the User, we can add a colour change to the current button to let them know what category is selected.

  • With the Filter block selected, open the Design tab and the Relative Styling tab.

  • Click the "+" icon to add a new Relative Style.

We need to set the Rules under which this change will occur.

  • Click the "Rules" icon to open the Relative Styles Rules modal.

  • Input a suitable Name, in this example "Selected".

  • In "Rules after block class" set Combinator to "Descendent".

  • Set Type to Class.

  • Input "selected" as Selector since we wish the rule to apply to the selected filter item.

  • Click Create "selected" to create.

We want to add another Rule to target the selected paragraph.

  • Click the "+" icon in Rules after block class.

  • Set Combinator to Descendant.

  • Set Type to Class.

  • In the Navigator, right click on the Paragraph block contained inside the Filter block and copy the Class.

  • Paste the copied paragraph class into the Selector field.

It's time to style the relative styling we set up.

  • In the Design tab, open the Relative styling tab.

  • Click the required Relative Style you wish to customise, in this example "Selected".

In this example we want the white background to become black when selected.

  • In the Background tab, open the colours tab and choose a suitable background colour, in this example Black.

Let's style the text. In this example we want the text to change white when selected.

  • In the Typography tab, select a suitable Text colour, in this example white.

Now when a user selects a filter button, the background will turn black and the text white.

Last updated