Style a Filter (example)
Last updated
Was this helpful?
Last updated
Was this helpful?
First you need to create a filter:
Create a FilterNow 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.
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.
