I have not tested with a new ācustom:hui-state-badge-elementā.
Seems that old badges in PE still work - then there is no need to touch them))).
(actually, not using badges at all, so when I start testing with old/new badges is a uneasy question, especially with my current wartime lifestyleā¦)
when I start one climate entity it is OK. when I add a second, it just stays on 1ā¦
Hello
Iād like to have the color of the icon green, yellow or red, depending on the disk percentage. But all I get is the icon default color:
type: entities
entities:
- entity: sensor.jogos_storage_c
type: custom:multiple-entity-row
name: Disk Drive C
styles:
color: var(--my-font-color)
icon: mdi:harddisk
attribute: UsedSpacePercentage
style: |
--paper-item-icon-color:
{% set storage = state_attr('sensor.jogos_storage_c', 'UsedSpacePercentage') | float(default=0) %}
{% if storage < 30 %} green
{% elif storage < 70 %} yellow
{% else %} red
{% endif %};
Iām sure, Iām doing something wrong, can anyone tell me how to correct it?
custom:hui-state-badge-element
does not take a name: or icon: tag, it is āune emplatre sur une jambe de boisā (in French) āfighting a losing battleā in English
With the svg of the new badge style, it is confusing me (as often)
Does anone know how to modify the new badge-cards? Specially the background?
Iām confused 
, still kind of new to this type of customizations
How would you do to make the icon, or text change color with the percentage?
Go to 1st post of this thread ā link at the bottom ā styles for multiple-entity-row.
It will show you how to customize the icon.
Hi, Not a JavaScript dev here, so my apologies for stupid question, I try to get the logic behind the customization using card-mod
I want the marked badge icon at the top to be of a red color instead of yellow.
I opened the console and clicked on the icon element - you can see the result on the rightā¦ How do I achieve changing the current color from yellow to red?
This obviously does not work:
badges:
- type: entity-filter
state_filter:
- 'on'
entities:
- entity: binary_sensor.kodi1_vpn
card_mod:
style: |
:host {
color: red;
}
Neither this works:
card_mod:
style: |
ha-state-icon {
color: red;
}
Please help. Thank you.
PS: Frontend version: 20240806.1 (if this may help)
I guess we dont have istructions for Badges (after 2024.8) yetā¦
Hi,
Iām trying to make my icon blink. I canāt get to target the icon itself. Iām not sure I follow some of the examples above on why you have to nest them.
I have this test card.
type: entities
entities:
- entity: sensor.sun_next_dawn
card_mod:
style: |
@keyframes blink {
0%, 100% {opacity: 1;}
50% {opacity: 0;}
}
ha-icon::after {
animation: blink 1s linear infinite;
}
title: Tech Issues
Not sure on how to apply this keyframes.
1st post ā link at the bottom ā animation for entities card
1 Like
Thank you! I missed that.
This script is awesome! I was able to finally tweak the weather clock card to my liking. Screenshot and code below. Note that some special fonts are used, free from dafont.com. Thereās a whole other process for custom fonts in lovelace outside of this discussion. Search for woff2 and fonts.css for that info.
Code for most of the above. I left out the top line (Breztri stuff) and the Attic header is just the start of another card. Hope this helps someone out there!
- type: horizontal-stack
cards:
- type: custom:clock-weather-card
entity: weather.home_3
date_pattern: cccc, LLL M
card_mod:
style: |
ha-card {
--bar-height: 1.3em !important;
font-family: OpenSans_SemiCondensed-Medium;
background: #001030;
}
clock-weather-card-today {
padding: -20px;
margin-bottom: -10px;
}
clock-weather-card-today-right {
justify-content: flex-start !important;
height: 10em;
margin-top: -30px;
background: none;
}
clock-weather-card-today-right-wrap-bottom {
font-size: 18px !important;
font-family: Moonrising;
margin-top: 5px;
color: rgb(160,160,210);
letter-spacing: 2px;
}
clock-weather-card-today-right-wrap-top {
display: none !important;
}
clock-weather-card-today-left {
margin-top: -35px;
}
clock-weather-card-today-right-wrap-center {
font-size: 60px !important;
font-family: SairaCondensed-Medium;
font-variant-caps: all-small-caps;
color: #CCCCFF;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sun.sun
name: |
[[[
var t = new Date(states['sun.sun'].attributes.next_rising);
var options = {hour:'numeric', minute:'2-digit'}
return "Sunrise " + t.toLocaleTimeString("en-US", options);
]]]
styles:
card:
- background: rgb(0,33,66)
- pointer-events: none
- height: 40px
- border-radius: 0px;
name:
- letter-spacing: .06em
- color: rgb(160,160,210)
- font-size: 22px
- font-family: SairaCondensed-Medium
show_state: false
show_name: true
show_icon: false
- type: custom:button-card
entity: sun.sun
name: |
[[[
var t = new Date(states['sun.sun'].attributes.next_setting);
var options = {hour:'numeric', minute:'2-digit'}
return "Sunset " + t.toLocaleTimeString("en-US", options);
]]]
color: auto
color_type: icon
styles:
card:
- background: rgb(0,33,66)
- pointer-events: none
- height: 40px
- border-radius: 0px;
name:
- letter-spacing: .06em
- color: rgb(160,160,210)
- font-size: 22px
- font-family: SairaCondensed-Medium
show_state: false
show_name: true
show_icon: false
tap_action:
action: more-info
This does not work either 
:
card_mod:
style:
ha-state-icon$: |
.: |
ha-icon {
color: red;
}
This also does not work:
card_mod:
style: |
:host {
--card-mod-icon-color: red;
}
Badges in 2024.8 and newer are not modded (yet) but if you manage to do it, congrats and feel free to update us
not sure if the red is for this particular binary only?
you can set generic state-colors in your theme, and have it applied everywhere without further interfering in the card configs
can even set if differently for different device_classes if you like
state-binary_sensor-door-off-color: var(--primary-color)
state-binary_sensor-door-on-color: var(--alert-color)
state-binary_sensor-window-off-color: var(--primary-color)
state-binary_sensor-window-on-color: var(--alert-color)
state-binary_sensor-safety-on-color: var(--alert-color)
state-binary_sensor-garage-off-color: var(--primary-color)
state-binary_sensor-garage-on-color: var(--alert-color)
state-binary_sensor-motion-on-color: var(--alert-color)
state-binary_sensor-on-color: var(--active-color)
state-binary_sensor-opening-off-color: var(--ok-color)
state-binary_sensor-opening-on-color: var(--alert-color)
state-binary_sensor-problem-on-color: var(--alert-color)
state-binary_sensor-update-on-color: var(--alert-color) #'#f44336'
state-binary_sensor-active-on-color: var(--alert-color) #'#f44336'
usefull eg for inversing the alert colors on doors/windows
as for card-mod on the new 2024.8 badges, we still need to figure those out 
you can test them like this in Inspector
God this section of the code is pissing me off!
<div style="--badge-color: var(--state-binary_sensor-connectivity-on-color, var(--state-binary_sensor-on-color, var(--state-binary_sensor-active-color, var(--state-active-color))));" class="badge active standard " role="button" tabindex="0"> ... </div>
It is like everything is defined in that div but whatever I do, using :host, or trying to target a sub-element to overwrite with !important, nothing seems to work for now.
EDIT: I donāt want to install mushroom *sobbing*
hello, i would like to ask for support. The card doesnt work for me for some reason.
Im using latest HA core (Haos installation)
tried to install it using HACS, and manualy to www folder.
in my config yaml tried both.
frontend:
extra_module_url:
# - /hacsfiles/lovelace-card-mod/card-mod.js
- /local/card-mod.js
Im trying to apply the first code to my mushroom card, and i canāt see any changes at all (cookies refreshed, used different browsers)
- type: custom:mushroom-light-card
entity: switch.esp_gates_home_gate_open1
name: Gates
card_mod:
style: |
ha-card {
color: red;
}
Check with a standard card first:
type: entities
entities:
- entity: sun.sun
card_mod:
style: |
ha-card {
color: red;
}
The row height workaround is clipping the text.
type: entities
entities:
- entity: sensor.lumi_lumi_weather_temperature_6
name: Kitchen Temperature
card_mod: &ref_0
style: |
hui-generic-entity-row {
height: 100px;
font-size: 36px;
}
- entity: sensor.lumi_lumi_weather_temperature_4
name: Bedroom Temp
card_mod: *ref_0
- entity: sensor.lumi_lumi_weather_temperature
name: Living Room Temp
Ofc it will clip - since out of 2 proposed ways (āclippingā, ānot clippingā) you have chosen the 1st way.