Hi. I’m trying to style color of icon basing on sensor state, but I can’t get it working. So at the beginning I’m trying to do some basing styling, but my icon does not appear anywhere on card.
type: picture-elements
title: Foo
image: local/bar.png
elements:
- type: icon
icon: hass:white-balance-sunny
card-mod:
style: |
:host {
top: 50%;
left: 50%;
color: red;
}
Thank you for your time.
There are errors in your code:
type: picture-elements
title: Foo
image: /local/images/blue.jpg
elements:
- type: icon
icon: hass:white-balance-sunny
style:
top: 50%
left: 50%
card_mod:
style: |
:host {
color: red;
}
picture-elements is mixed with styling by card-mod./local/....card_mod.You’re boss. Thank you!
Probably because you copy-pasted style from another card (facepalm).
The picture-entity card does not seem to have the .card-content element.
Also, wrong value for the padding property was used.
Try using this:
card_mod:
style: |
ha-card {
padding: 20px 20px 20px 20px;
box-shadow: none;
}
Anyway, I can’t get it working in more complicated example - when I’m trying to use it in conditional element.
type: picture-elements
title: Foo
image: /local/bar.png
elements:
- type: icon
icon: hass:white-balance-sunny
style:
top: 10%
left: 50%
card_mod:
style: |
:host {
color: {% if is_state('humidifier.zhimi_humidifier_ca1', 'on') %} green {% else %} red {% endif %};
}
- type: conditional
conditions:
- entity: humidifier.zhimi_humidifier_ca1
state: 'on'
elements:
- type: conditional
conditions:
- entity: switch.humidifier_bedroom_led_on
state: 'on'
elements:
- type: icon
icon: hass:white-balance-sunny
style:
top: 20%
left: 50%
card_mod:
style: |
:host {
color: {% if is_state('humidifier.zhimi_humidifier_ca1', 'on') %} green {% else %} red {% endif %};
}
What’s wrong this time?
@EDIT
I see now on github:
NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen , but not e.g.
conditional,entity_filter,vertical-stack,horizontal-stack,grid
So is it possible to make something like that?
Conditional elements - 2 options for styling:
type: vertical-stack
cards:
- type: entities
title: Conditional
entities:
- entity: input_boolean.test_boolean_2
name: show
- type: picture-elements
card_mod:
style:
hui-conditional-element hui-state-label-element:
$: |
div {
color: red;
}
.: |
ha-card {
height: 80px !important;
}
elements:
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 6%
left: 10%
- type: conditional
conditions:
- entity: input_boolean.test_boolean_2
state: 'on'
elements:
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 6%
left: 30%
image: /local/images/white.jpg
- type: picture-elements
card_mod:
style: |
ha-card {
height: 80px !important;
}
elements:
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 6%
left: 10%
- type: conditional
conditions:
- entity: input_boolean.test_boolean_2
state: 'on'
elements:
- type: state-label
entity: sensor.cleargrass_2_co2
style:
top: 6%
left: 30%
card_mod:
style:
hui-state-label-element:
$: |
div {
color: orange;
}
image: /local/images/white.jpg
Update (20.05.22):
I recommend to use the 1st method.
The 2nd method sometimes does not work:
So, the glitch occurs if the conditional element is not displayed first, then it is displayed w/o the style. The style is applied after refresh only.
Alternatively, on step 6 got to another view and then return to the view - the style is applied.
Also - same problem with a Conditional row inside Entities card. There is an issue on Github.
works perfectly, thanks!
Is there any way to style such dialogs as well? E.g. the more-info-parts like
Or to ingest css which has priority over every other stuff?
e.g. the new show more links. I would like to have them in secondery color instead of primary. Currently it is style this way
.header > a, a:visited {
color: var(--primary-color);
}
But I’m not able to find a point, where and how to change styles in such pop-ups.
Hello, rotating and resizing stop working since last update.
Any idea ?
Thanks a lot !
There is a big mess/change in .11
Everywhere either ha-icon has been renamed in ha-state-icon or sometimes (buttons, …) there is still the ha-icon but an additional ha-state-icon. You have to adopt it accordingly in your style.
What are you talking about exactly, be more specific.
If you are talking about icons inside picture-elements - try to apply the style to the state-badge.
Do some experiments by yourself.
Please see my answer above. ha-icon is not the anchor anymore.
I already told - use state-badge then… HA changes, styling have to be changed too…
?
I don’t have problems. I only said, that I have already answered, where you asked further things.
Now I see it. Yes. Very sad. All icon styling became not working.
It was animated before with this code, but now not
type: entities
entities:
- entity: switch.tuya_smart_plug
name: Ventilateur SALON
icon: mdi:fan
state_color: true
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
animation:
{% if is_state('switch.tuya_smart_plug', 'on') %} rotation 1s linear infinite {% endif %};
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Now I see it. Yes. Very sad. All icon styling became not working.
Just rotating and resizing not working, all others still ok.
I will try to find a way, thanks a lot for your help
As I wrote before - replace it with state-badge only.
Ok ok, thanks, i will try.
Best regards
This worked for me on 2021.11.1:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('switch.esp_a3f81c', 'on') %}
animation: rotation 1.0s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
{% endif %}
}
Entities within auto-entities also needed a slight tweak:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-state-icon:
$: |
ha-svg-icon {
animation: wobbling 2s linear infinite alternate;
}
@keyframes wobbling {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(+10deg);
}
}
I´m using slider button card and I want to change the color of the big slider. If I change the primary-color in the theme I´m using the color change but I only want to change color in some of the slider button cards and not affect every other primary color.
When i try --primary-color: red; nothing happens. Is it not possible to change the primary-color in a card or am I missing something? If I for example instead use card-background-color that affect the spicific card I´m trying to change so card mod is working.