Style a Filter (example)

First you need to create a filter:

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