Conditional background not working

[referee]

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.

[ruenel]

Hello John,

Thanks for posting in!

The if statement in Twig requires the condition to be enclosed in parentheses, and the == comparison is not the correct syntax for comparing a value to an integer in this context. You are comparing the output of acf.post_field directly to 1, but the ACF field may return the value as a string, a boolean, or an integer depending on its type.

Here is the corrected version of your code:

{% if acf.post_field({'field': 'event_highlight'}) == '1' %}
    background-color: rgb(232, 232, 232);
{% else %}
    background-color: rgba(232, 232, 232, 0);
{% endif %}

== '1' : I have changed the comparison to a string '1' . ACF often returns field values as strings, even for number fields. This ensures the condition works reliably.

If the event_highlight field is a true/false (boolean) field in ACF, you can use this even simpler condition:

{% if acf.post_field({'field': 'event_highlight'}) %}
    background-color: rgb(232, 232, 232);
{% else %}
    background-color: rgba(232, 232, 232, 0);
{% endif %}

This works because the value will be truthy ( true or 1 ) or falsy ( false , 0 , or an empty string).

Kindly let us know how it goes.

[referee]

Hey @ruenel,

Thank you for these important details. Yes, it is boolean field so we can simplify it even further.

{% if acf.post_field({'field': 'event_highlight'}) %}
    background-color: rgb(232, 232, 232);
{% endif %}

or

{% if acf.post_field({'field': 'event_highlight'}) %}
    global-color:FGBD57WL0plJwfTM8x
{% endif %}

Which is basically the same thing in my example.

But the problem is that the conditional color is still not applied to the Event Grid element despite the correct text outputs in the tests.

In the last screenshot I did it via Event Grid Background property but I also tried the first option via Event Grig Elemnt CSS with the same result.

[christian]

Hey John,

Here are the possible causes.

• Element CSS Limitation: The Element CSS editor compiles CSS rules and outputs them in a stylesheet in the page header (using the element’s generated class name, e.g., .x-el-e123). This stylesheet is evaluated once at the page level. It does not run dynamically on a per-item basis inside a Looper. Because all repeated cards share the exact same generated class, any styles written in Element CSS will apply to all cards equally or fail to render the individual item’s database context.
• Looper Context: The Grid element itself is the parent. The individual cards (usually Cells or Divs) are the Looper Consumers. Styling must be applied at the Looper Consumer level, not the Grid level.

---

The Solution

To conditionally apply the color per looped item in Cornerstone, use the method below:

1. In the Document Outline, select the element designated as your Looper Consumer
2. In the Inspector, go to the Customize tab.
3. Input your Twig conditional statement directly into the Class field:

   {{ acf.post_field({'field': 'event_highlight'}) ? 'is-highlighted' : '' }}
   

   (Alternatively, using standard Cornerstone Dynamic Content: {{dc:acf:post_field field="event_highlight" default=""}} if you mapped the value to the class name).
4. In the Element CSS (still under the Customize tab) and add:

   $el.is-highlighted {
     background-color: rgb(232, 232, 232);
   }
   

[referee]

Thank you, @christian, for this info.

That worked fine.

[christian]

Glad to hear that, John.