Well cant use dynamic tags on custom css so

Feature Requests / Improvements
1

image

this svg changing color depending on the loop item so because we cant add dynamic tags to custom CSS (I have no idea why it is still not added)

I am using basic text element for this :slight_smile:

image
image746Ă—572 21.6 KB

add datatags to custom CSS please :slight_smile:
button here

image
image592Ă—524 18.5 KB

2 Likes
2

You should be using attributes for this kind of thing which very much do take dynamic data.
for example using variables or css properties:
.my-class[data-name=“available”]{
–fill-color: green;
width: 50px;
}
.my-class[data-name=“unavailable”]{
–fill-color: red;
width: 40px;
}

in your case you would put the fill value as: fill=“var(–fill-color)”:

1 Like
3

yep I know attr I use it all the time for dynamic stuff

but we still need dynamic tags in the custom CSS :slight_smile:

1 Like
4

@sinanisler How do you suppose the dynamic tag should work in custom CSS?

How would the browser render a single class name with multiple values?

// loop item 1 with ACF value of red
.text-title {
  color: red;
}

// loop item 2 with ACF value of green
.text-title {
  color: green;
}

Wouldn’t that just make all loop items inherit a green colour?

That’s why most people recommend applying the variable as a dynamic attribute for each loop item.

Taking your svg example, you also opted to add the dynamic tag to the fill, which is an inline attribute in the SVG element. You didn’t add it to a class using internal style in the code element.

<svg></svg>

<style>
.your-class svg{
fill: {acf_product-color}
}
<style>
5

css values gets read by from top to bottom

so last css value on the page will be last color that same class

only !important or inline can overwrite this order

as you can see on my example I am giving the color inline not as class :slight_smile:
give your color on inline on the dom itself style=“” etc…

or assign custom class name per loop item from the the attributes and give your color to that :slight_smile:

I use usually loop-item-{post_id} …etc to give unique class names per loop item from attrs

6

I think we’re speaking totally different languages. I’m asking how you want the dynamic tags in custom css to work

7

I don’t have any default preference at all

it all depends on the need and project

8

Okay, then I am confused about the purpose of this post as a Feature Request/Improvement. I am probably not understanding what you wrote.

9

oh you are asking that :smiley:

ability to have datatags in the custom CSS

button here

image
image592Ă—524 18.5 KB

10

Yes, that’s the question you asked, I believe

Which brings us back to my initial question: if they add DD tags to custom CSS, wouldn’t that create problems?

If I apply %root%{color: acf_product-color;} to a global class for loop items in a loop grid, like you pointed out, wouldn’t it just apply the last color declaration?

Unless the DD only shows up for ID styling and not class styling.