> 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="<https://youtu.be/REZx7Ffgv9s?feature=shared&t=233>" %}

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

​

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FhBdTDNz6HU9O0JafLono%2FScreenshot%202023-08-16%20at%2011.34.56.png?alt=media&#x26;token=e149f260-2114-4397-92a6-ab7aad9a8a97" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FYX1gflVPEUALz53Hf4Ae%2FScreenshot%202023-08-16%20at%2011.37.59.png?alt=media&#x26;token=ba665949-9417-49b5-bbc8-e35abbe7930e" alt=""><figcaption></figcaption></figure>

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.

​

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FLJ4MNylmPyFv6JssTqwg%2FScreenshot%202023-08-16%20at%2011.41.00.png?alt=media&#x26;token=705fdf21-7a1d-4f60-b3f3-39a7ab111960" alt=""><figcaption></figcaption></figure>

### Relative Styling for button selection <a href="#relative-styling-for-button-selection" id="relative-styling-for-button-selection"></a>

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.

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FLzexXZKotHmq8rRCdcby%2FScreenshot%202023-08-16%20at%2011.47.17.png?alt=media&#x26;token=bf0e0080-889c-4c16-92dc-c9b428283c80" alt=""><figcaption></figcaption></figure>

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

<br>

<figure><img src="/files/04ajRNara4IR20kwEknh" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/aWK6pUl97fNAfkgkky5I" alt=""><figcaption></figcaption></figure>

* Set Type to Class.

<figure><img src="/files/CFd4M8lNhrEIWVv1bA5M" alt=""><figcaption></figcaption></figure>

* Input "selected" as Selector since we wish the rule to apply to the selected filter item.
* Click Create "selected" to create.

<figure><img src="/files/WBWUrR7gSWgiHtuHkJpG" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/r6RrfEpz7H9NfKL28RRh" alt=""><figcaption></figcaption></figure>

* Set Combinator to Descendant.

<figure><img src="/files/s1EI0WPR3758Os4PCW3p" alt=""><figcaption></figcaption></figure>

* Set Type to Class.

<figure><img src="/files/BorvjplT8q0fxVSpnCkP" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/irwHTfH54M2gw8FJRyyN" alt=""><figcaption></figcaption></figure>

* Paste the copied paragraph class into the Selector field.

<figure><img src="/files/JrirHquBpBI5AYKEGD6u" alt=""><figcaption></figcaption></figure>

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

![](/files/0xXhXAd8vYOx3Io6k7D8)

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.

![](/files/3qXVltQsqFfuS3ZBcsnP)

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.

![](/files/04STAotUwzglBAPue8uW)

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

<figure><img src="/files/vzFmMEgqJaTKwWQ7dZN3" alt=""><figcaption></figcaption></figure>