Hi,
I tried a couple of approaches to conditionally change the background color for looped events but it didn’t work. What do I do wrong?
Let’s say we have a TWIG template like this one:
{% if acf.post_field({"field":"event_highlight"}) == 1 %}
background-color: rgb(232, 232, 232);
{% else %}
background-color: rgba(232, 232, 232, 0);
{% endif %}
If I add this template to a Text Element it looks like it works right. In the text output I get the default transparent background color if event_highlight field has 0 and the color I added to the TIWG if its 1. But if I use this template inside an Element CSS the custon color is never applied to the marked events cards with event_highlight ACF field. If instead of using it inside Element’s CSS I connect it to the same Events Grid Element Primary > Background property with a modification as here below it also not applied.
For the second example I tried to replace background-color: rgb(232, 232, 232); with global color code like global-color:FGBD57WL0plJwfTM8x. It also works inside a test text element but not with the Grid Element. The Grid Element serves as the primary Looper consumer for events in the archive template.