# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/blocks/filter/style-a-filter-example.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.