How to set a element style based on a custom field value?

[alanj]

Is there a way to set an elements style value based on a custom field value?

I have a loop which displays CPTs. Each CPT has a custom field for Status.
I want to set the background colour of the card depending on the Status of the CPT.
e.g. Green for Active, Red for Closed, Yellow for Pending.

I thought that either Conditions or Interactions might be able to do this, but doesn’t appear so.

Thought that maybe I could set the Status field value to be a colour and then use that dynamic value in the style … but it introduces other issues with users understanding! Users are always a problem. lol

Any ideas?

[Patric]

Hi

You could use the attributes filter for that.

See this:

[SOLVED] to conditionally set background color using an ACF Group field color property?

Hi did you make the card design in Bricks? if yes, can you show the Bricks structure of the elements that make up your card design? If not done with Bricks, which program are you using? Cheers Patric

Cheers

Patric

[alanj]

Cool thanks, will see if I can make that work.

[ddcbf]

@Patric Do you know, is this still in 2025 only possible using custom PHP code?

I want to set the color of some text elements based on a custom field (checkbox) to indicate that the items are “unavailable.”

I also want to make my query loop “card” (block) not clickable (remove the link) based on the same condition.

Thanks so much.

[Patric]

Hi

If it is always the same red color, then I would just make a copy of that text element, change the text color to red and add a condition to that element that it only shows if the value of the acf checkbox field is true or false (I don‘t remember if it is 0 or 1),

Then add the opposite condition to the normal text element.

You can use the same method for the link element.

I have not worked a lot in Bricks lately so I get a bit rusty, sorry.

Cheers

Patric

[ddcbf]

Hi @Patric,

1. It’s actually all of the text elements in the block (maybe 6 elements?). In principle I would rather not have duplicates of everything, hehe.

2. Worse, regarding the link, the link is the entire block…

3. Finally, I would like the block to have a different background color.

At this point it sounds more like we we are talking about two separate query loops, not conditions? That would not be ideal for sorting reasons (i.e., it would show all available items, then all unavailable items—not the worst—but just kind of clunky).

I hope my use case makes sense. If unclear please let me know.

Thanks again!

[Patric]

Hi

if you set the checkbox manually in each item (available or not) anyway, you could just add an acf color picker field in the fields for that post type and chose the red or green color for example in each post.

Then in the 6 elements, you can use the dynamic color function like this:

For the link, I have to think about a good way to do that. The easiest would be if the url is also coming from a url field in the post. Then you could just delete the url data in the post and the link will not do anything.

Cheers

Patric