Open andreas-bulling opened 9 months ago
similar to other entity cards,
Like which cards particularly?
customize the icon color(s)
card-mod.
For example "mushroom-template-card" directly supports changing icon_color.
Do you happen to have an example for how to do the above with card-mod? I've tried for half an hour but without success :(
"mushroom-template-card" directly supports changing icon_color.
Unfortunately, this is the only example.
As for standard cards - only a Tile card supports icon_color
(but it is not an "entity-row" card).
how to do the above with card-mod
Suggest to ask all card-mod related questions in the dedicated card-mod Community thread. You may find examples which could be useful: 1st post of the thread -> link at the bottom -> styles for m-e-r.
I've just finished successfully using card_mod to change the icon for the primary entity in multiple-entity-row without having the secondary entities icon(s) change as well.
Here's my code for changing the icon.
Note: I'm using the decluttering card & templates hence the [[blind]]
reference:
- type: entities
entities:
- entity: cover.[[blind]]
type: custom:multiple-entity-row
name: ' '
show_state: false
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
--card-mod-icon: {{ iif(states('cover.[[blind]]') == "open", "phu:blind-tilt-open", "phu:blind-tilt-closed") }}
}
entities:
- entity: sensor.[[blind]]_battery_level
name: Battery
- entity: sensor.[[blind]]_battery_level
name: false
icon: true
show_header_toggle: false
state_color: false
card_mod:
class: inline-card
Before I achieved that, I was trying:
card_mod:
style:
:host {
--card-mod-icon: {{ iif(states('cover.[[blind]]') == "open", "phu:blind-tilt-open", "phu:blind-tilt-closed") }}
}
but that was changing the icon for all entities in the row.
@andreas-bulling You should be able to acheive an icon color change with:
card_mod:
style:
:host {
color: {{ iif(states('binary_sensor.garage_1_reed') == "off", "green", "red") }}
}
My version of the code works for the color of the primary entity icon.
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
--card-mod-icon: {{ iif(states('cover.[[blind]]') == "open", "phu:blind-tilt-open", "phu:blind-tilt-closed") }};
color: {{ iif(states('cover.[[blind]]') == "open", "green", "red") }}
}
And after opening Blind 1:
Thanks a lot for the detailed answer and suggestion. Unfortunately it still doesn't work for some reason. I tried a basic example on a different card and this worked. So card-mod is working in principle. But for some reason I can't modify the multiple-entity-row
I've since modified my card_mod: style: to
card_mod:
style:
hui-generic-entity-row$state-badge:
$: |
ha-state-icon {
{% if is_state(config.entity, 'open') %}
--card-mod-icon-color: gold;
--card-mod-icon: phu:blind-tilt-open;
{% elif is_state(config.entity, 'closed') %}
--card-mod-icon-color: beige;
--card-mod-icon: phu:blind-tilt-closed
{% else %}
--card-mod-icon-color: red;
--card-mod-icon: mdi:help-circle
{% endif %}
}
Can you post your problem code for the multiple-entity-row so I can check?
There is a dedicated card mod community thread. All mods for multiple-entity-row you are looking for were posted there 3 years ago. Go to 1 st - link at the bottom - styles for m-e-r. And suggest to continue discussing there.
Daniel, glad that you sorted out your issue in the config-template-card repo, but your examples with colored main icon are rather specific and may not be applied for all cases. In fact , your example is not optimal.
It currently doesn't seem to be possible to customize the icon color(s) similar to other entity cards, e.g. depending on the state of a sensor:
icon_color: >- {{ is_state('binary_sensor.garage_1_reed', 'off') | iif('green', 'red') }}