Nope, sorry.
AFAIK that setting is not even hot-reloadable, so move config and restart is probably the best option right now.
tbh, I havent met many issues during the HA changes, in fact, I can only see 1 mod not working anymore. I have meticulously read the posts above and many come close, but just not exactly:
- type: custom:template-entity-row
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2182?u=mariusthvdb
entity: binary_sensor.vijverpompen
card_mod:
style:
div#wrapper: |
state-badge {
{% if is_state(config.entity,'on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: steelblue;
}
100% {
color: aquamarine;
}
}
still makes my entity icon rotate, but the colorization is goneā¦
anyone with a hint, please come forward? thanks!
Thanks Thomas, thatās worked a charm! 
Iām a happy chappy again!!
Thanks! I noticed a bunch of button cards I had styled with colors (representing a cheap battery powered usb lampās IR-controlled colors) were all using my default theme about half the time when reloadingā¦it was starting to drive my OCD a little crazy 
thinking it was something wrong on my end.
Looks much better now!
at least this works:
type: entities
entities:
- type: custom:template-entity-row
entity: binary_sensor.test_value_from_input_boolean
name: name
secondary: some value
state: state
icon: mdi:fan
card_mod:
style:
div#wrapper: |
state-badge {
animation: rotation 0.5s linear infinite, resizing 1s linear infinite alternate, coloring 8s linear infinite alternate;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes resizing {
0% {
--mdc-icon-size: 10px;
}
25% {
--mdc-icon-size: 15px;
}
50% {
--mdc-icon-size: 20px;
}
75% {
--mdc-icon-size: 26px;
}
100% {
--mdc-icon-size: 32px;
}
}
@keyframes coloring {
0% {
color: red;
}
17% {
color: orange;
}
34% {
color: yellow;
}
51% {
color: green;
}
68% {
color: lightblue;
}
85% {
color: blue;
}
100% {
color: violet;
}
}
thanks Ildar. Since that is quite identical to what I am using, what do you think could be the desicive difference?
is the difference.
Should be ā1 forwardsā.
Also the first frame must be a default icon color
Ill test, thanks. It was working fine though, so youāre saying this is because changes in HA lately?
nope, doesnt work. btw, this same coloring does still work on a glance card:
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
puzzling this isā¦
copying your config above shows it doesnt workā¦
maybe my card-mod-theme interferes, Ill turn that off and see what happens.
Nope, that doesnt help eitherā¦
Cannot tell, I have never tested this case before.
Is there a means to modify the icon sizes and spacings in the thermostat card? I currently get this:
And Iād like to either hide the āAutoā icon (left) or get all icons on the same line as it is in the fullsize view.
Edit: So I found that this will reduce the size of the icons, but it will not change anything about their spacing:
entity: climate.heating_sascha
card_mod:
style:
ha-icon-button:
$: |
ha-svg-icon {
height: 75% !important;
width: 75% !important;
Are you sure you are talking about Glance card?
Rotating for Glance card is done for state-badge.
Probably you meant Picture Glance card.
Faced a new issue with the HA Editor:
- Create a new card via UI, copy/paste this code into Editor:
type: glance
entities:
- entity: sun.sun
- entity: sun.sun
icon: mdi:fan
card_mod:
style: |
state-badge {
color: orange;
}
-
The screen is:
-
Save the code, the screen is:
-
Open the Editor again, the screen is:
The card_mod code is not displayed.
If you press the āSaveā button, the code will probably be saved w/o card_mod.
Curious to know if youāre using the new config advised by Thomas Loven.
User DrewXT reported that it fixed the similar issue that he had posted earlier in the thread.
I donāt use the editor myself, and havenāt really seen many of the issues that some people are reporting, apart from the occasional need for a CTRL+F5 page refresh, but the new config is working well for me.
1 Like
no sorry, youāre right, it is a picture-glance.
type: picture-glance
title: Vijverpompen
image: /local/images/vijver.png
state_filter:
'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
- switch.vijverpomp_links
- switch.vijverpomp_rechts
- input_boolean.vijverpompen_alterneren
- sensor.pond_buiten_sensor_calibrated_temperature
- binary_sensor.vijverpompen
- sensor.vijverpompen
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
'div:nth-child(2)':
etc
and the colorize works perfectly. cant get the other options to work, or, rephrase, can not get the template-entity-row to colorize
another (older) card to card_mod: Waze-card.GitHub - royto/waze-card: Lovelace card for showing Waze routes data my regular header card_mod doesnāt do anything:
card_mod: &header
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
when use on:
- type: custom:waze-card
title: Rijtijden
card_mod: *header
entities:
I did change .card-header to .header, because thats what inspector indicates the header to be, but still no mod effective. what should I try next?
Earlier I gave an example of template-entity-row, it did not work on your side.
Cache problem? Card-mod-themes problem?
Hello @thomasloven, I officially surrender since I stopped to understand the logic of applying CSS styles (((.
Could you help me?
I am confused about using hui-element - and probably because of the same reason I started stumbling with other cards like restriction-card, fold-entity-rowā¦
Earlier I think I followed a clear logic of using card-mod - but after a few latest updates I see some failures in my HA setup and ālearning examplesā.
Letās consider row_type: section.
But first here is a usual section row, we need a red divider line:
CSS tree:
Code:
type: entities
entities:
- type: section
label: section 1
card_mod:
style: |
.divider {
background-color: red !important;
}
My logic is: we are inside shadowRoot of the hui-section-row, so we must get directly to the .divider element.
Now letās consider a section implemented by hui-element:
CSS tree:
Code:
type: entities
entities:
- type: custom:hui-element
row_type: section
label: section 3 (hui-element)
card_mod:
style:
hui-section-row:
$: |
.divider {
background-color: orange !important;
}
My logic is: we are inside shadowRoot of the hui-element, so we must get to the .divider element via hui-section-row$.
But the style is not applied (as it shown on the picture above).
This is working:
Code:
type: entities
entities:
- type: custom:hui-element
row_type: section
label: section 2 (hui-element)
card_mod:
style:
$: |
.divider {
background-color: orange !important;
}
And I cannot understand - why do we have to use this construction?
And the simplest case - letās style the hui-element from the entities-card level:
CSS tree:
Code:
type: entities
entities:
- type: custom:hui-element
row_type: section
label: section 4
card_mod:
style:
.card-content hui-element:
$:
hui-section-row:
$: |
.divider {
background-color: orange !important;
}
The style is not applied:
And now I am completely lost.
neitherā¦ I am lost really. In no browser can I get this to show a coloring and resizing icon. It only spins 
also without any theme, just the HA default theme loaded.