Use buttons as taxonomy filter

[jam]

Hi Bricks fam.

How do I make buttons as a taxonomy filter for posts?

Url: https://stagingdulfu.jakodk.dk/

I’ve googled and searched for hours without achieving concise information on how to do this.

Thanks in advance for helping out a newb Bricks developer.

[Quest]

Hi Jam,

I see that you managed to set the filters.

I am also new to bricks and I am trying to give a specific color for each button filter based on its related term. Same as you did.

How did you do that ?

Thanks for your help!

[akram203]

ACPT: Customize category background colors with ease!.

[Quest]

Thanks for your help @akram203 !

I already use a similar method with ACF for the card buttons but it doesn’t work for these buttons

.

[Nerdtech]

You can use the nth-child pseudo selector for this. Basically the filters are in a list (li) and you can use nth-child for selecting an individual list item in the list. For example in the above image you can use nth-child(2) to give the gold colored background on the second item.

In Bricks click on the filter element and in the top left hand corner copy its ID as you will need it. Then go down to the custom CSS section and use the ID with nth-child to color each button with an individual background color eg (my ID was #brxe-cmjpuj):

#brxe-cmjpuj > li:nth-child(1) {
    background-color: #182246;
}

#brxe-cmjpuj > li:nth-child(2) {
    background-color: green;
}

#brxe-cmjpuj > li:nth-child(3) {
    background-color: red;
}

#brxe-cmjpuj > li:nth-child(4) {
    background-color: purple;
}

#brxe-cmjpuj > li:nth-child(5) {
    background-color: blue;
}

#brxe-cmjpuj > li:nth-child(6) {
    background-color: orange;
}

[jam]

Hi Quest.

I used the same solution as @Nerdtech described.

Instead of the element ID, I just added the CSS to the “Filter - Radio” element and targeted with %root%

[Quest]

Awesome! Thanks to both of you.

I hadn’t thought about targeting with nth-child.