I hadn’t at the time, stupidly thinking it would just trick the card into leaving a space. I’ve now created the input text helper but this is the result:
EDIT: I realised the last entry was missing ‘show_state: falsse’ so when I added that and played with the width, I got it sorted.
Thanks!
Hello All.
I’m new to the community. I’m having issue with car-mod CSS animation running in custom:multiple-entity-row. The same animation works fine in entity cards so, I`m not sure what is wrong. I got the if/else condition with icon color change working but the ha-state-icon animation is not working when the condition is met.
Does anyone ever experience de same issue:
yaml code:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sensor.saintbasiletocentralstation
name: Saint-Basile
icon: mdi:train
entities:
- attribute: route_route_id
name: Circuit
styles:
font-weight: bold
- entity: sensor.delta_train_next_departure
name: Departs
state_color: true
card_mod:
style: |
{% if states('sensor.delta_train_next_departure') >= '-600' %}
ha-card {
--ha-card-background: rgba(7, 103, 215, 0.24);
--mdc-icon-size: 45px;
--card-secondary-font-size: 18px;
--card-mod-icon-color: red; }
ha-state-icon {
'animation: boing 3s linear infinite; transform-origin: 50% 90%;'
}
{% else %}
ha-card {
background: rgba(7, 103, 215, 0.24);
--mdc-icon-size: 45px;
--card-secondary-font-size: 20px;
--card-mod-icon-color: green; }
{% endif %}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
English is used as a common language.
SORRY,
WITH GOOGLE, I DID NOT PAY ATTENTION THAT THE TRANSLATION HAD BEEN AUTOMATIC…
SO:
Hello everyone 
I have also been struggling for 2 weeks regarding the change in color of the icons depending on the state (on/off, value, etc.).
I have exhausted the lines of several forums and multiple discussion threads, without being able to obtain any results.
As stated, I “only” want to change the state color of an icon on my cards, on a case by case basis based on my needs for each (card and/or icon).
In my concrete case, I want the “fan 1” logo to turn green when “on”, and to stay at the original blue otherwise.
Currently, it is going through the usual HA state changes, from blue to yellow…
here are my relevant lines:
type: entities
entities:
- entity: switch.switch_pompe
name: 'POMPE '
type: custom:multiple-entity-row
state_color: true
show_state: false
state_header: true
last-changed: true
secondary_info: last-changed
entities:
- entity: switch.4_relais_vitesses_pompe_l1
name: ' '
toggle: true
tap_action:
action: toggle
haptic: light
icon: mdi:fan-speed-1
state_color: true
secondary_info: last-changed
last-changed: true
styles:
width: 25px
card_mod:
style: |
:host {
{% if (states('switch.4_relais_vitesses_pompe_l1')) == 'off' %}--paper-item-icon-color: pink;
{% else %}
green
{% endif %}
;
whether I integrate it at the end of coding or in the configuration lines of the targeted entity, same result.
with the same config, if I set “state_color:” to false, it no longer changes color depending on the state either:
if I add the quoted line “‘–paper-item-icon-color’: red” it does change the base color of the icon, but without taking into account the state changes of the icon itself.
styles:
width: 25px
'--paper-item-icon-color': red
card_mod:
style: |
:host {
{% if (states('switch.4_relais_vitesses_pompe_l1')) == 'off' %}--paper-item-icon-color: pink;
{% else %}
green
{% endif %}
;
on the other hand it changes all the other icons once the condition is met!! :
However, when I use this same coding in another card, I get what I am looking for:
type: glance
entities:
- entity: switch.switch_volet_immerge
name: VOLET
card_mod:
style: |
:host {
color: {% if states(config.entity) == 'on' %} red {% endif %};
}
:host {
{% if states(config.entity) == 'on' %}--paper-item-icon-color: red ; {% endif %};
}
I feel like I’ve tried everything, and can’t find my mistake.
Does anyone have an idea or even a solution?
Thanks in advance
You have a wrong card-mod code.
Go to the main card-mod thread - 1st post - link at the bottom - multiple-entity-row.
No need to create a new thread.
ok, I re-re-modified, the “car-mod” was missing…
Hello and thank you for your answer.
actually, I suspect that my code is wrong
I have already tried the code from the link indicated:
so I made this for test in new exemple:
type: entities
entities:
- type: custom:multiple-entity-row
entity: switch.switch_pompe
style:
hui-generic-entity-row:
$: |
state-badge {
color: red;
}
.: |
div.entity:nth-child(2) state-badge {
color: green;
}
div.entity:nth-child(4) state-badge {
color: red;
}
entities:
- entity: switch.4_relais_vitesses_pompe_l1
- entity: switch.4_relais_vitesses_pompe_l2
unit: false
icon: mdi:car
- entity: switch.4_relais_vitesses_pompe_l3
styles:
width: 60px
text-align: center
name: Colored all icons
unit: ''
icon: mdi:account
toggle: true
show_state: false
state_header: ''
secondary_info: last-changed
However, the result does the opposite of my expectations:
a condition to add?
thanks
Hey all, i tried everything but i just cant hide the icon and name.
i tried card-mod but it doesnt work.
- entity: script.update_solar_forecast
type: custom:multiple-entity-row
name: Solcast
state_header: Update
show_icon: false
toggle: true
state_color: false
icon: mdi:solar-power
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Tomm
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: Day3
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: Day4
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: Day5
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: Day6
format: precision0
tap_action:
action: more-info
card_mod:
style: |
hui-generic-entity-row {
display: none;
}
Any conditional styling can be done using jinja:
some_element {
{% if ... -%}
some_css_property: some_value;
{%- endif %}
}
(see more examples in card-mod thread)
And ofc for some domains there are predefined standard colors - like for switch, sun, lock, … And these colors can be customized in a theme or locally for THIS particular row/card (using card-mod). Means - in some cases there is no need to define colors conditionally.
Thank you, but didn’t check that it was formated.
I went to the topic using the link from the first post, and tried to apply one of the examples of hiding the main icon, but it doesnt work for me for some reason.
Also i didnt find an example to hide the main enitity name (the one goes after the icon)
Heres the code for just the icon mate:
entity: script.update_solar_forecast
type: custom:multiple-entity-row
name: Solcast
state_header: Update
show_icon: false
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
toggle: true
state_color: false
icon: mdi:solar-power
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Tomm
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: Day3
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: Day4
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: Day5
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: Day6
format: precision0
tap_action:
action: more-info
Since some card-mod version it is required to use a “card_mod” keyword, i.e. should be
....
card_mod:
style: ...
Hiding a name - try just to define
name: ' '
which is simplest, or hide the label by card-mod (find out by yourself, no ready code).
didnt use the name: ‘’ method myself, I seem to remember it didnt work out on this card.
I ended up using this
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px 0px 0px 0px;
}
.card-content {
padding: 0px 8px 8px 0px;
}
entities:
- entity: sun.sun
type: custom:multiple-entity-row
card_mod:
style:
hui-generic-entity-row $: |
.info {
display: none;
}
.: |
.entities-row {
width: 100%;
justify-content: space-evenly !important;
}
state_color: true
show_state: false
# name: false
entities:
- entity: sensor.sun_solar_elevation
name: Hoogte
unit: false
- entity: sensor.sun_next_dawn
name: Dageraad
format: time
- entity: sensor.sun_next_rising
name: Op
format: time
- entity: sensor.sun_next_noon
name: Middag
format: time
- entity: sensor.sun_next_setting
name: Onder
format: time
- entity: sensor.sun_next_dusk
name: Schemer
format: time
- entity: sensor.sun_next_midnight
name: Nacht
format: time
for my own Sun/Moon card collection
Ofc, those do use the icon, but that is on purpose because it give me a more-info click to the right entity for my needs.
The icon has been answered above though 
It works in fact:
type: entities
entities:
- type: custom:multiple-entity-row
entity: script.test_script
name: ' '
state_header: xxx
icon: mdi:car
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
entities:
- &ref_sub_entity
entity: sun.sun
name: yyy
- *ref_sub_entity
- *ref_sub_entity
- *ref_sub_entity
- *ref_sub_entity
- *ref_sub_entity
But an empty “name” still occupies a space.
So you may wish to hide it completely - like in examples here:
card-mod thread → 1st post → link at the bottom → multiple-entity-row → distribute items:
yes, that is probably what I remembered, so, agreed, whenever you want to hide an element, and free the occupied space, display: none is the way to go
Absolutely, the best way to distribute other items.
Bit in some cases like here
defining
name: ` `
rather sufficient.
Please post in English
Thank you for the output, but it still doesn’t work for some reason. m-e-r is not responsive to any card mod inputs.
My current code look like suggested:
p.s. I tried it outside the stack in card, just to be sure it is not the case. Looks the same
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:weather-chart-card
entity: weather.tomorrow_io_home_assistant_daily
show_main: true
show_attributes: false
icons: /local/weather-icons/
########## FORECAST SOLAR
- entity: script.update_solar_forecast
type: custom:multiple-entity-row
name: ' '
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
state_header: Update
show_icon: false
toggle: true
state_color: false
icon: mdi:solar-power
entities:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Today
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Tomm
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: Day3
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_4
name: Day4
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_5
name: Day5
format: precision0
tap_action:
action: more-info
- entity: sensor.solcast_pv_forecast_forecast_day_6
name: Day6
format: precision0
tap_action:
action: more-info
Because you are using m-e-r in a wrong way.
It is supposed to be used inside Entities card.
Brilliant, Thanks again mate!
Hello everyone.
Tell me how can I make animated icons when the status has a certain value? Or at least so that they change color depending on the status. Does anyone have any examples?
type: entities
entities:
my code. Please help me
