Using Twig in element CSS

Support
#1

I try to use a Twig expression in the Element CSS. The following does not work:

$el {
  --STcolor: blue;
  {% if {{ looper.index }} == '1' %}
     --STcolor: green;
  {% endif %}
}

In fact, with the Twig statement being part of element CSS, it even ignores the basic declaration, --STcolor: blue;

EDIT:
I found my syntax error. However, it still does not work fully.

  {% if looper.index == '1' %}

or

  {% if looper.index == 1 %}

return ‘green’ for each looped element, and

{% if looper.index > 1 %}

returns blue for each element.

#2

Hey @Striata,

Thanks for posting in!

Try to update your code and use this instead:

$el {
  --STcolor: blue;
  {% if looper.first %}
     --STcolor: green;
  {% endif %}
}

Kindly let us know how it goes.

#3

Thank you, @ruenel. I haven’t yet had a chance to try it. But I need to assign separate colors for looper items 1, 2, 3, etc. So, even if your suggestion works, I would also need to test for other indices, not just the first.

#4

Hello @striata,

Please use the solution and let us know how it goes.

Thanks

#5 
{% if looper.first %}

does not work. It defaults to blue for each element.
For more context: The “element” is a column, on which both the looper provider and the looper consumer are enabled. I am using the css variable to set the border color of the column.

#6

Hello @striata,

Set the Looper Provider in the Row element and see how it goes. If this does not work, we would be happy to double check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

#7

Hello, see secure note for login information.

I have created a simplified test-playground that replicates the problem. I have used the native Cornerstone “Terms (Column)” Element, changed it to have a 3-column layout, and moved the Looper Provider from the Column to the Row:
image
The “Title” (Headline element) contains content that may help to trouble shoot the problem, namely the {{looper.index}} dynamic content, a Twig IF statement that returns either “even” or “odd”, and the {{dc:term:name}} from the original “Terms (Column)” setup:
image
This works all perfectly fine, this is how the output looks:
image .

Now to the problem: I have added CSS to the Column (“List Item”) to set the background color of the list item to either orange or green, depending on the the looper.index, replicating the working Twig IF statement in the HTML:
image
Odd items should have an orange background, even items should have a green background. However, all items have the same background, as if the TWIG statement inside the CSS is run only once during the looping, and is then fixed.
Strangely enough, all backgrounds are green (= even), even though one would think that it should be orange (=odd) if it is evaluated during the first run.
When I move the element CSS from the “List Item” (Column) element (which carries the consumer) to the “Term” element (a Div inside the consumer), I still get all backgrounds to be the same color, but now it is orange.

Consistent with this behavior, some more testing revealed the following: I have changed the If condition to {% if looper.index == n %}

CSS on “Term” (inside the looper consumer):
With n=1, where the if statement evaluates “true” (=orange) for the first loop, ALL elements become orange
With n= anything else, where the if statement evaluates “false” (=green) on the first loop, ALL elements become green

CSS on “List Item” (element having the looper consumer):
With n=0, the if statement apparently evaluates “true” for the first loop, and ALL elements become orange
With n= anything else: if statement apparently evaluates “false” on the first loop, and ALL elements become green

So, taken together, I believe that this is a bug where the element CSS is not honoring the fact that it may change during a loop, but is evaluated once only.

This is not a general CSS-with-Twig-statement problem. As I final test, I went back to the HTML, and I have changed the first line in the HTML {{looper.index}} to inject some inline CSS, including a TWIG If statement, to turn the background either white or red, depending on whether it is odd or even. This works!
image

#8

Hey @striata,

You do not need to use Twig for that. You can simply use:

$el:nth-child(odd) {
	background: orange;
}

$el:nth-child(even) {
	background: limegreen;
}

image
image835×415 22.4 KB

Check out other CSS selectors here:

I highly recommend to plain CSS. Using Twig in your CSS may complicate things which may create conflict sooner or later.

Hope this helps.