I am currently setting up a dashboard that uses classes. That way i can define all styling in a theme, and don’t have to write it down in each card. To do this i use the syntax
card_mod:
class: overview-card
I want this to be a reactive to the state of a light. Elsewhere i can use conditions to display certain text or colors. Applying this format to the card_mod however does not seem to work. What i want is the following.
In short; if things seem to be working intermittently - try splitting up the chain into several steps
tbh, I didn’t check your code, but your description seems to fit. check the examples on DOM navigation and scroll down to the end, maybe it can help you out here?
agreed with Ildar, make your template more robust (though I dont necessarily see the need to overload the template with the color:. I always have that outside, and it never fails).
{% set state = states('sensor.co2_eg_wohnen')|int(-1) %}
{% if state < 1000 %} color: green;
{% elif 1000 <= state < 1400 %} color: orange;
{% else %} color: red;
{% endif %}
main thing here is the one time setting of the variable and its default value |int(-1), which is no longer required in the rest of the template. see eg:
color:
{% set range = states('sensor.golf_combustion_range')|int(0) %}
{% if range < 100 %} crimson
{% elif range < 300 %} darkorange
{% elif range < 450 %} orange
{% elif range < 600 %} gold
{% else %} lightgreen
{% endif %};
see if it makes a change.
other than that, sometimes it simply has nothing to do with these mods, but more with the way the Dashboard is being rendered upon state changes, or user manipulating the Frontend
navigating to another dashboard and returning will help at those times, reloading a view not always helps.
The “expander-card” seems to be not widely used; have you tried to search a DEDICATED thread for this card? May be there are more chances to get answers there…
I did and I didn’t get a response. I was hoping this was more of a card mod thing. I tried to hit F12 do the whole inspect thing, but I’m not very good at it. Was hoping that was all that needed to be to be done to target the icon I’m trying to change.
This is weird though. Different. Because assuming I’m doing it right which I’m probably not lol I can get it to change on the edit view before I hit save but as soon as I hit, save none of my changes show up so maybe it’s just a garbage card and I need to try and find something new.
I’m trying some advanced css to animate a custom svg icon, specifically a thermometer bar:
I am struggling to get to the shadow root/element for the bar:
the closest I get really, is that I can color the entire thermometer (red) in an overcomplicated way since the below code also just works when I reference ha-state-icon:
Thanks for your detailed answer. Especially for the hint how to implement card_mod correctly.
I am going to test all suggestions in the next days and hopefully can find out what caused my problems.
Hi, I have following entity card, and I would like to change the color of „Now“ entity. If the entity’s state is more than 50%, then green color, if less than 50%, then red color. So, in this case, the number „11%“ should be red.
Thank you
