> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/blocks/filter/style-a-filter-example.md). # Style a Filter (example) First you need to create a filter: {% content-ref url="/pages/ONQqXEvmuJVJFWWtd0Qc" %} [Create a Filter](/blocks/filter/create-a-filter.md) {% endcontent-ref %} Now we need to Style the Filter Titles. {% embed url="" %} * 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". ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FGRVmVY2FNd5R3CnPklU4%2FScreenshot%202023-08-17%20at%2010.48.51.png?alt=media\&token=74d99a07-3864-4556-ba21-4fabd5e21fc1) 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. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FmfP9JkhEDMnjrXpLjQvv%2FScreenshot%202023-08-17%20at%2010.50.52.png?alt=media\&token=d910c287-8f3a-4310-b86f-ac154066847c) 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. ![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fmke402Q0Bsxm8kzCKG01%2FScreenshot%202023-08-17%20at%2010.52.16.png?alt=media\&token=c689b85a-10de-43ea-8222-138b47131261) Now when a user selects a filter button, the background will turn black and the text white.