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.
Yes. I just figured out that there is a second way.
âline-heightâ not âheightâ
type: entities
entities:
- entity: sensor.lumi_lumi_weather_temperature_6
name: Kitchen Temperature
card_mod: &ref_0
style: |
hui-generic-entity-row {
line-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
card_mod: *ref_0
@Mariusthvdb Thank you very much for the answer!
Do I understand this right, so if my entity has the name binary_sensor.kodi1_vpn then the theme variables to override itâs color based on itâs state would look something like:
my_theme:
...
google-red-500: "#dc322f" # Solarized Red
google-green-500: "#859900" # Solarized Green
state-binary_sensor-kodi1_vpn-off-color: "var(--google-red-500)"
state-binary_sensor-kodi1_vpn-on-color: "var(--google-green-500)"
...
I tried this and it did not change the color of the sensor.
It works only if I use either attributes.icon_color property (because itâs a template sensor) or a custom-uiâŚ
Any idea what am I doing wrong with Theme variables? (I am pretty sure that I just donât understand the concept of theme variable naming)
Described here
Variables must be
--state-binary_sensor-on-color
--state-binary_sensor-off-color
If you define these changed CSS variables in a custom theme:
â all binary_sensors in all cards & in more-info windows will become cyan/magenta.
If you define these changed CSS variables in a particular card:
â only in THIS card ALL binary_sensors will be cyan/magenta:
type: entities
entities:
- entity: binary_sensor.service_on_value
- entity: binary_sensor.service_off_value
state_color: true
card_mod:
style: |
ha-card {
--state-binary_sensor-on-color: cyan;
--state-binary_sensor-off-color: magenta;
}
If you define these changed CSS variables in a particular card for particular element (hence - for a particular entity):
â only in THIS card THIS binary_sensor will be cyan/magenta:
type: entities
entities:
- entity: binary_sensor.service_on_value
- entity: binary_sensor.service_off_value
- entity: binary_sensor.service_on_value
card_mod:
style: |
:host {
--state-binary_sensor-on-color: cyan;
--state-binary_sensor-off-color: magenta;
}
- entity: binary_sensor.service_off_value
card_mod:
style: |
:host {
--state-binary_sensor-on-color: cyan;
--state-binary_sensor-off-color: magenta;
}
state_color: true
2 Likes
@Mariusthvdb
Please ignore my previous reply.
I got it! Thank you so much!
I added device_class: connectivity to my binary_sensor definition:
template:
- binary_sensor:
- name: Kodi1 VPN
device_class: connectivity
and then added this to the theme:
google-green-500: "#859900" # Solarized Green
google-red-500: "#dc322f" # Solarized Red
state-binary_sensor-connectivity-off-color: "var(--google-red-500)"
state-binary_sensor-connectivity-on-color: "var(--google-green-500)"
And it works!
I see now, that the entity names ARE NOT understood by themes, but the device_classes ARE!
1 Like
Youre right, in standard card it works! Thank you
Do you have any idea why it is not working in multiple entity row or as a mushroom card? HA is last version, both are mushroom cards and multiple enitity rows
In general, style from card_1 may not work for card_2.
Working examples for m-e-r: go to 1st post of the thread â link at the bottom â multiple-entity-row
Not using.
you could also just use the right device_class everywhere, as HA has default colors for all of those, and you might just like them.
Only need to change them if you want different colors
Hello. Can anyone help me? I am a beginner and card-mod is still difficult for me.
My card-mod version is the latest, 3.4.3, and the ha-core version is 2024.7.4.
I am working in Chrome.
I am trying to pull out the more-info using the card from GitHub - thomasloven/lovelace-more-info-card: đš Display the more-info dialog of any entity as a lovelace card on my dashboard.
There is a lot of unnecessary information that I donât want to display.
The header and state are working well,
but I canât figure out how to set the display of div class current and the controls under div class controls to none.
I just wish only the temperature control section would be visible.
type: custom:more-info-card
entity: climate.ac_stand
card_mod:
style:
$: |
h1 {
display: none !important;
}
.: |
h1, state-card-content {
display: none !important;
}
.card-content {
padding: 1.5em 0 0 0.7em;
}
more-info-content$more-info-climate:
.: |
.current {
display: none !important
}
When I copy the JS path of the div.current from the above image and paste it into card-mod-helper, I get this value.
body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div:nth-child(1)>hui-card-options>hui-card>more-info-card$ha-card>div>more-info-content$more-info-climate$div.current
I really canât figure it out.
I would really appreciate it if anyone could help me. Thank you, and sorry for my poor english.
