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
add datatags to custom CSS please
button here
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
add datatags to custom CSS please
button here
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)”:
yep I know attr I use it all the time for dynamic stuff
but we still need dynamic tags in the custom CSS
@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>
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
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
I use usually loop-item-{post_id} …etc to give unique class names per loop item from attrs
I think we’re speaking totally different languages. I’m asking how you want the dynamic tags in custom css to work
I don’t have any default preference at all
it all depends on the need and project
Okay, then I am confused about the purpose of this post as a Feature Request/Improvement. I am probably not understanding what you wrote.
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.