Yes, there are some examples, but not here since this is the wrong thread for that. You need card-mod, but not using it with cards (where this thread is about) but with themes. See here:
I tried it myself back then but I didnāt like it (I had issues centering some tabs etc). You should search in that thread for āfooterā, maybe youāll find some code.
In any case, you can ask there for more help if you get stuck. Hopefully someone can help you. I ditched the entire header myself.
I have below code to remove the three dot on the light card. However it seems recent HA update broke it that the three dot appears again. Anyone know how to fix this? Thanks!
- entity: light.floorlight
card_mod:
style: |
mwc-icon-button {
display: none;
}
.content {
margin-top: -24px;
}
name: kitchen
type: light
Hi guys,
yesterday was a sad day. I had to finally get rid of Custom Header as it made problems with the newest Update. I am used to have my Header Icons colored, see image below or GitHub - philipp089/Home-Assistant-Config: HA Config and UI
After some trial i was finally able to change the color of the icons globally but is there a way to color each icon individually with card-mod? Any help is greatly appreciated. Other things i want to change is to get rid of the right menu (three-dotted-menu) and i want to change the box shadow. Normally i do it with:
- type: "custom:mini-media-player"
artwork: cover
entity: media_player.tv_samsung_q7_series_55
name: Fernseher Wohnzimmer
style: |
ha-card {
box-shadow: 1px 1px 1px 1px var(--divider-color);
}
but i have no clue how to affect the header. Can someone point me in the right direction here?
Cheers,
Philipp
Are you sure, that it is working? As far as I can see restriction embeds the sub-card without ha-card and I thought, that this is needed for card_mod to search and work.
Regardless what I try, Iām currently not able to ingest anything at card level.
type: entities
title: RollƤden
show_header_toggle: false
entities:
- type: custom:restriction-card
row: true
card:
entity: cover.alle_rolladen
card_mod:
style: |
state-badge {
color: red;
}
name: alle
restrictions:
confirm:
text: Schalter aktivieren?
condition:
entity: switch.shelly_hausturklingel_klingelstatus
value: 'off'
Ar what do you mean with your recommendation above?
From the Entities card level:
- type: entities
entities:
- type: custom:restriction-card
row: true
card:
entity: sun.sun
secondary_info: last-changed
card_mod:
style:
restriction-card:
$:
hui-text-entity-row:
$:
hui-generic-entity-row: |
.text-content {
color: red;
}
And follow this issue:
Meanwhile - a really nice styling for mini-graph-card from @menloperk:
post
Update 22.09.22: here 3 codes are provided - one for Chrome, others work in Safari too.
Hm. And where is the advantage instead of styliing from restriction card level, what was my starting point.
From my experiences, it is much more performance consuming to have this from top card level card level instead of deepest entity level. I had this with a slider entity row and it was nearly 1 second slower in having it at entity level instead of top card position.
Nobody is talking about advantage.
Your method:
style:
$:
hui-cover-entity-row:
$:
was never seen before (at least by me) and seems like a glitch.
A proper method (probably which used to be used by you) stopped working - see the issue above.
Surely you may use whatever method you like.
Ah o.,k. Thought that
āIn your case, you should style from the Entities card level, not from restriction-card.ā
Was a general recommendation from your experiences. Sorry to miss read this.
O.k. Then I stay on my additional$ work around, which works fine, until Iām perhaps able to remove it again after your bug report.
Btw, the styling broken for at least these cards:
In all these cases it was possible to style from the elementās level
The correct CSS code, if anyone ever comes across the same question:
card_mod:
style:
paper-buttons-row$:
ha-icon$:
ha-svg-icon: |
:host {
animation: {% if is_state('humidifier.master_bedroom', 'on') %} blink 1s linear infinite alternate {% else %} none {% endif %};
color: red !important;
}
@keyframes blink {
0% { opacity: 0.1; }
100% { opacity: 1; }
}
Iāve got an odd one since 2021.11.1 where it doesnāt seem that card-mod is honoring me changing icon colours in a glance card.
My code is this:
type: glance
entities:
- entity: sensor.rubbish
icon: mdi:delete-empty
style: |
:host {
--paper-item-icon-color: red;
}
- entity: sensor.recycling
icon: mdi:recycle
style: |
:host {
--paper-item-icon-color: yellow;
}
- entity: sensor.garden_waste
icon: mdi:leaf
style: |
:host {
--paper-item-icon-color: green;
}
title: Rubbish Bins
and in the editor preview window, I see this:
yet when I close the editor, I see this:
itās not related to browser or OS, as Iām seeing the same thing in Edge and Chrome on Windows and Linux, as well as in the Android app.
The only change is the upgrade to HA
2021.11.2 - my picture is always with applied styles:
type: glance
entities:
- entity: sensor.cleargrass_1_co2
icon: mdi:delete-empty
card_mod:
style: |
:host {
--paper-item-icon-color: red;
}
- entity: sensor.cleargrass_1_co2
icon: mdi:recycle
card_mod:
style: |
:host {
--paper-item-icon-color: yellow;
}
- entity: sensor.cleargrass_1_co2
icon: mdi:leaf
card_mod:
style: |
:host {
--paper-item-icon-color: green;
}
title: Rubbish Bins
Strange - I added the card_mod: line, but still getting no colours once I exit the editor.
I also just tried adding coloured icons to a different card, and itās done exactly the same thingā¦ yet nothing in the logs - any idea what debugging I can turn on (if any)?
Have also reinstalled card_mod
Update: itās working fine on my 2nd HA instanceā¦ I really donāt get thisā¦ 
Hi, i have css formatted several badges, it has been working until two days ago. 11.2 Core installed.
Desired look:
Since two days ago:
If i open Raw Config Editor and exit, styles are applied even without saving any changes (no one is done). I have to do that every time i open a new HA tab on web browser or open the app. Also tried with and without card_mod: label
my code is
badges:
- entity: person.luis_davalos
card_mod:
style: |
:host {
{% if is_state('person.luis', 'home') %}
--label-badge-red: green;
{% else %}
--label-badge-red: red;
{% endif %}
}
- entity: person.violeta
card_mod:
style: |
:host {
{% if is_state('person.violeta', 'home') %}
--label-badge-red: green;
{% else %}
--label-badge-red: red;
{% endif %}
}
- entity: sensor.temperatura_terraza
name: Exterior
card_mod:
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
{% if states('sensor.temperatura_terraza') |float(0) > 40 %}
--label-badge-background-color: red;
--label-badge-text-color: white;
animation: blinker 2s linear infinite;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% elif states('sensor.temperatura_terraza') |float(0) > 34 %}
--label-badge-background-color: #FF9800;
--label-badge-text-color: white;
--label-badge-red: #FF9800;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% elif states('sensor.temperatura_terraza') |float(0) > 12 %}
--label-badge-background-color: green;
--label-badge-text-color: white;
--label-badge-red: green;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% else %}
--label-badge-background-color: #039BE5;
--label-badge-text-color: white;
--label-badge-red: #039BE5;
font-weight: bold;
text-shadow: 1px 1px #0005;
animation: blinker 2s linear infinite;
{% endif %}
}
- entity: sensor.media_temperatura_interior
name: Interior
card_mod:
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
{% if states('sensor.media_temperatura_interior') |float(0) > 29 %}
--label-badge-background-color: red;
--label-badge-text-color: white;
animation: blinker 2s linear infinite;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% elif states('sensor.media_temperatura_interior') |float(0) > 27 %}
--label-badge-background-color: #FF9800;
--label-badge-text-color: white;
--label-badge-red: #FF9800;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% elif states('sensor.media_temperatura_interior') |float(0) > 18 %}
--label-badge-background-color: green;
--label-badge-text-color: white;
--label-badge-red: green;
font-weight: bold;
text-shadow: 1px 1px #0005;
{% else %}
--label-badge-background-color: #039BE5;
--label-badge-text-color: white;
--label-badge-red: #039BE5;
font-weight: bold;
text-shadow: 1px 1px #0005;
animation: blinker 2s linear infinite;
{% endif %}
}
grrr, my 2nd HA wasnāt on 11.2 - 11.2 broke card_mod when I upgraded it
Iām about to update the recommended installation method for card-mod.
Itās always been highly timing-dependent, and as hass gets more and more optimized it gets harder and harder to keep up.
Luckily, thereās a thing you can do to help.
By adding the following to your configuration.yaml (obviously adjusting the URL to where you actually have card-mod installed) and restarting, you can give card-mod a head start.
It will even be there - waiting - when the core interface parts are still loading in.
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
You may get some errors in the browser console. They can be safely ignored, and Iām currently working on some tweaks to make this installation method work even more smoothly.
Nevertheless, this should remove most issues with things working when switching tab, but not when pressing F5 and that kind of thing.
If I had started today, I would have made card-mod a custom component or integration rather than a frontend plugin. Itād be an incredibly breaking change for everyone using HACS to switch now, though. So youāll need some manual intervention unless @ludeeus can think up some magic.
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!