It still works - but gives an error when trying to save changes in the Editor(((.
This is a HA Editor issue, not card_mod.
This is not a valid code - you did not specify a proper path to the element.
In the example above there was a path like "hui-generic-entity-row$state-badge$ha-icon$", here you need to use a similar method.
Here is an example for a usual entity row:
type: entities
title: Ventilatori
show_header_toggle: false
entities:
- entity: fan.xiaomi_mijia_300_1
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('fan.xiaomi_mijia_300_1','on') %}
animation: rotation 0.5s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Checked it by myself - it works.
1 Like
Wow thanks!
I would have never been able to do that myself⌠I didnâ understand I had to follow each bit pf the path!
Thank you very much for doing this for me, if that was a server to intall/configure/manage I could have done with my eyes shut⌠but when it comes down to coding I am lost⌠I guess my brain is wired in an odd way xD
Really, thanks!
Additonal question⌠I know how to add the color there (the orange one), thatâs easy from the previous example⌠but I have a question⌠do you happen to know which variable or what to use to have the color taken from the theme config?
You can use the --paper-item-icon-color variable.
It can be changed globally (in a theme) or locally, check this:
type: entities
title: Ventilatori
show_header_toggle: false
entities:
- entity: fan.xiaomi_mijia_300_1
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('fan.xiaomi_mijia_300_1','on') %}
animation: rotation 0.5s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.: |
hui-generic-entity-row {
--paper-item-icon-color: magenta;
}
Surely you may specify user-defined variable:
ha-svg-icon {
color: var(--user-fans-color);
{% if is_state('fan.xiaomi_mijia_300_1','on') %}
animation: rotation 0.5s linear infinite;
{% endif %}
}
1 Like
Thanks a ton!
Just one thing to precise, the theme variable was afctually âpaper-item-icon-active-colorâ
Since it wasnât working I checked for that inside the theme config and I saw the line below with that âactiveâ that gave it away fairly easily 
But thanks for the baseline, that surely helped a lot!
These variables in the âthemeâ file are specified w/o the âââ
How can I address (and change) the color of history card elements?
1x lines
1x icons
For another entity card I use this, working great:
card_mod:
style: |
:host {
--card-mod-icon-color: grey;
}
Thank you, unfortunately there´s no snippet (yet) to achieve what I´m looking for. I´m not into the text but the icon and line itself. The auto-color-select mode of HA is pretty annoying when it comes to printer color states (I want my black color to be black, not default blue or something else). Search continues⌠
Yes yes I know 
It was just the âactiveâ that I had to basically add.
Every is working perfectly!
Anybody with a solution or an idea for this?
âHow to change history-graph line and legend icon colorsâ
Not possible with card-mod.
If you really need custom colors for graphs - go to custom:mini-graph-card or custom:apexcharts-card
I can change other attributes⌠why can I not change link colors?
type: conditional
conditions:
- entity: binary_sensor.updater
state: 'off'
card:
title: Update Available
type: entities
card_mod:
style: |
a:link {
color:yellow !important;
}
a:visited {
color:green !important;
}
a:hover {
color:pink !important;
}
a:active {
color:white !important;
}
entities:
- type: attribute
entity: binary_sensor.updater
attribute: newest_version
name: New version
icon: mdi:home-assistant
- type: attribute
entity: binary_sensor.updater
attribute: release_notes
name: Link
icon: mdi:link
1 Like
Place the style into the 2nd entity row:
- type: attribute
entity: binary_sensor.updater
attribute: release_notes
name: Link
icon: mdi:link
card_mod:
...
1 Like
Hi
is there plan to add support to use config.entity with any card, for example in this case with mini-graph-card?
The config.entity variable is used to represent ONE entity associated with ONE element of a card:
- entity (for Entity card);
- entity row (for Entities card);
- entity (for badge);
and so on.
For mini-graph-card there are MANY entities (even if you specified just one graph), using this variable is not possible.
For example, you can use this variable to style ONE entity for some particular entity row inside Entities card - but you cannot use this variable to style all rows.
First of all. Donât use mod-card with mini-graph-card.
Itâs not config.entity thatâs the magic value here. Itâs config, which is a variable containing the entire card or entity configuration.
So in your case, you will have e.g. config.type which evaluates to "custom:mod-card" and config.card_mod.style which evaluates to {hui-horizontal-stack-card: {$: {mini-graph-card: {$: ".states.flex .state .state_value.ellipsis { [...]" } [...] } [...] } and thereâs probably a config.card.cards[0].entities[0] tooâŚ
2 Likes
Thomas, tried to play with it:
type: entities
style:
hui-text-entity-row:
$:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
{% set VALUE = states(config.card.cards[0].entities[0]) %}
{% if VALUE == 'on' %}
color: green;
{% else %}
color: magenta;
{% endif %}
}
entities:
- entity: input_boolean.test_boolean
- sun.sun
No color change unfortunatelyâŚ
Actually, this is just an example. In a real life it is better to use simple waysâŚ
I take it from the style that Guacco above uses this to style a horizontal-stack (still not the best way to apply style to the mini-graph-cards), so thatâs why thereâs a cards[] array too.
In your test, I think config.card.entities[0] should work to address the first entity.
Edit: or maybe config.card.entities[0].entity. I donât remember quite how and when the format is converted internally.
If you want different styles for each row according to the respective entity, youâd need something like a jinja for loop and the nth-of-type selector or something⌠but thatâs past whatâs really reasonable for card-mod alone.