Hi, do you know if it is possible to change the color of the icons of the “mini climate card”?
Thanks
1 Like
The state color (red icon) is a built in function
There may be better code, but this works
type: custom:mini-climate
entity: climate.living_room
hvac_mode:
style: '(value, entity) => ({ color: ''red !important'' })'
card_mod:
style:
mc-secondary-info$:
mc-fan-mode-secondary$:
ha-icon$:
ha-svg-icon$: |
svg { color: cyan !important; }
.: |
.entity__icon[color] {
color: lime !important;}
1 Like
It’s perfect thank you!
Is it also possible to hide the button with the 3 dots?
It’s not a part I use, I would like to remove it if possible.
Thanks
My solar system has a derating function to reduce power when certain conditions are present. I would like to show this in the Power Flow Plus Card by changing the icon and the colour using card_mod. However, I’m struggling to identify the style I need to change and how to reference it.
I’ve browsed the elements and the colour seems to be defined here but the icon seems to be defined as a graphic? Just changing the colour would be a bonus but I’m not sure how to make the reference.
Anyone offer any pointers.
Thanks
This will eliminate it
type: custom:mini-climate
entity: climate.living_room
hvac_mode:
style: '(value, entity) => ({ color: ''red !important'' })'
card_mod:
style:
mc-secondary-info$:
mc-fan-mode-secondary$:
ha-icon$:
ha-svg-icon$: |
svg { color: cyan !important; }
.: |
.entity__icon[color] {
color: lime !important;}
.bottom.flex {
display: none;}
headsup:
for scrolling inside a type: grid I used to have this:
- type: custom:mod-card
card_mod:
style: |
:host {
max-height: 500px;
overflow-y: scroll;
}
card:
type: grid
columns: 4
cards:
beta cycle for 2024.7 broke that, and some other issues areas using vertical-stacks. these were fixed in beta3, but apparently introduced other issues, so the fixes to my scroll mods were reverted in b5…
I opened an issue and Paul jumped in to the rescue and found the way to again scroll in grids, we need to add just the single line display: block; like below, see also https://www.w3schools.com/cssref/pr_class_display.php:
- type: custom:mod-card
card_mod:
style: |
:host {
max-height: 500px;
overflow-y: scroll;
display: block; # <----------------
}
card:
type: grid
columns: 4
cards:
Thanks for helping out @piitaya , much appreciated! Also for explaining, which is very useful info in this thread 
Before, the section, the view end the stack cards were responsible of the loading of the card (and custom card). It was lot of duplicate code. Now, we wrap this loading logic into a
hui-cardcomponent to remove duplicated code.
It breaks some custom cards because we added a new component in the DOM and some adjustments need to be done (mostly cards that inject custom css like custom button card or card mod).
above exercise in scrolling makes me wonder if we can not do something alike for horizontal.
I cant find a way yet, because everything I try is bound by the building horizontal limitations of the regular card.
I cant use grid, because it defaults so adding the surplus card to the net row, and setting a lot of columns only makes the contained cards smaler.
would love to be able to do
type: custom:mod-card
card_mod:
style: |
:host {
overflow-x: scroll; }
card:
type: grid
columns: 4
row: 1
cards:
If anyone can find anything getting close to this (and no, I dont want Slider card, I used that and it has too many inconsistencies that are never fixed), Id really appreciate that
I tried, but temperature entity also disappears.
This is my card code, if it helps you understand the problem…
type: custom:mini-climate
entity: climate.controllo_temperatura_rpi
hvac_mode:
style: '(value, entity) => ({ color: ''rgb(0, 180, 248) !important'' })'
name: Temperatura CPU
secondary_info:
type: hvac-action
source:
cooling:
icon: null
name: Ventola Accesa
idle:
icon: null
name: Ventola Spenta
hide_icon: true
hide_current_temperature: true
icon: mdi:fan-auto
state_color: false
indicators:
cpu_temp:
icon: mdi:thermometer
unit: °C
round: 1
source:
entity: sensor.cpu_temp
card_mod:
style:
.: |
.entity__icon[color] {
color: rgb(169, 177, 188) !important;}
Does this work better?
card_mod:
style:
.bottom.flex ha-icon-button ha-icon$: |
ha-svg-icon {
display: none;}
.: |
.entity__icon[color] {
color: lime !important;}
Ora i 3 puntini icona è trasparente, ma la funzione c’è ancora.
But still hidden/transparent is fine too
Thanks
I don’t understand. Please reply in English.
You can use a transparent color setting too.
card_mod:
style:
.bottom.flex ha-icon-button ha-icon$: |
ha-svg-icon {
color: transparent;}
.: |
.entity__icon[color] {
color: lime !important;}
I would like to delete that function, not hide it or make the icon transparent
Deleting or disabling a function on a custom card is not card mod related. That would better requested here
Hi, how can a change the css of a vertical stack card?, I tried every way i know but no changes. With the custom:stack-in-card work great but i’m trying to reduce the number of custom card to the minimun.
Thanks in advance
type: vertical-stack
card_mod:
style: |
:ha-card {
background: red !important;
padding: 20px !important;
}
cards:
- type: custom:button-card
entity: media_player.homepod_del_salon
show_icon: false
show_label: true
label: >
[[[ return states[entity.entity_id].attributes.media_artist + ' - '
+states[entity.entity_id].attributes.media_title]]]
custom_fields:
album_name: |
[[[ return states[entity.entity_id].attributes.media_album_name ]]]
styles:
grid:
- grid-template-areas: '"n" "l" "album_name"'
- grid-auto-columns: 1fr
- grid-template-columns: 1fr
card:
- padding: 0 0 15px 0
name:
- font-size: 14px
- font-weight: 500
- opacity: '0.7'
- padding: 3px 0
label:
- font-size: 18px
- font-weight: 400
- color: rgb(142,195,176)
custom_fields:
album_name:
- font-size: 14px
- opacity: '0.7'
- padding: 2px 0
- type: custom:mini-media-player
card_mod:
style: |
.mmp-player {
background: none !important;
aspect-ratio: 1 / 1;
}
* {
--mini-media-player-accent-color: rgba(142,195,176,1)
}
entity: media_player.homepod_del_salon
artwork: full-cover-fit
background: /local/media_player_background.png
hide:
power: true
icon: true
source: true
progress: false
volume: true
controls: true
name: true
info: true
- type: custom:button-card
show_icon: false
show_name: false
custom_fields:
backward:
card:
type: custom:button-card
entity: media_player.homepod_del_salon
icon: mdi:skip-previous
show_name: false
tap_action:
action: call-service
service: media_player.media_previous_track
data:
entity_id: media_player.homepod_del_salon
styles:
card:
- background: none
icon:
- color: rgb(142,195,176)
play_pause:
card:
type: custom:button-card
entity: media_player.homepod_del_salon
icon: mdi:play
state:
- value: paused
icon: mdi:play
- value: playing
icon: mdi:pause
show_name: false
tap_action:
action: call-service
service: media_player.media_play_pause
data:
entity_id: media_player.homepod_del_salon
styles:
card:
- background: none
img_cell:
- width: 88px
icon:
- width: 88px
- color: rgb(142,195,176)
fordward:
card:
type: custom:button-card
entity: media_player.homepod_del_salon
icon: mdi:skip-next
show_name: false
tap_action:
action: call-service
service: media_player.media_next_track
data:
entity_id: media_player.homepod_del_salon
styles:
card:
- background: none
icon:
- color: rgb(142,195,176)
styles:
grid:
- grid-template-areas: '". backward play_pause fordward ."'
- grid-auto-columns: 1fr
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
card:
- padding: 0px
- type: custom:my-slider-v2
entity: media_player.homepod_del_salon
card_mod:
style: |
ha-card {
border-radius: 100px!important;
}
mode: volume
step: '1'
styles:
container:
- overflow: visible
card:
- height: 45px
- width: 100%
- padding: 0 25px
- - '--keep-background': 'true'
- background: >-
linear-gradient(90deg, rgba(188,234,213,1) 0%, rgba(142,195,176,1)
100%)
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: white
- top: 4px
- right: '-18px'
- height: 36px
- width: 36px
- border-radius: 100px
visibility:
- condition: and
conditions:
- condition: state
entity: media_player.apple_tv_4k
state_not: playing
- condition: state
entity: media_player.apple_tv_4k
state_not: paused
- condition: and
conditions:
- condition: state
entity: media_player.xbox
state_not: 'on'
- condition: and
conditions:
- condition: state
entity: media_player.lg_webos_smart_tv_oled65g16la
state_not: 'on'
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 25px!important;
}
You cannot mod cards without ha-card element. So mod-card or other wrapper or custom cards or … are still your only solutions.
1 Like
Ok, thank you 
Does anyone know how to make the whole line of todo-list elements clickable to check the checkbox, instead of opening up the edit item dialog? I don’t use the edit item feature for our shopping list, and hate having such a small clickable area to check off items.
It looks like it’s possible to somehow change these click events around, but it’s way above my paygrade and ChatGPT is just spewing out random card-mod-script: sections that do nothing.
Hello,
I want to ask for help.
I would like to bring the blue bar closer to the green bar. How can this be solved?
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: conditional
conditions:
- entity: timer.climate_off_timer
state: active
card:
type: custom:timer-bar-card
entity: timer.climate_off_timer
layout: full_row
bar_direction: rtl
bar_radius: 5px
invert: true
text_width: 0px
compressed: true
filter: true
bar_height: 3px
bar_foreground: greenyellow
- type: conditional
conditions:
- entity: timer.vizforgato_off_timer
state: active
card:
type: custom:timer-bar-card
entity: timer.vizforgato_off_timer
layout: full_row
bar_direction: rtl
bar_radius: 5px
invert: true
text_width: 0px
compressed: true
filter: true
bar_height: 3px
bar_foreground: dodgerblue
layout:
margin: '-25px 1px -27px 1px'
My wall mounted tablets have a lovelace setup that utilizes card-mod but this latest version of Home Assistant seems to have broken/changed something. Previously, I had some icons that would change color based on the state of an entity. Now, they’re just always green which I’m not quite sure where it’s coming from. Here’s the yaml from one of the icons. Any ideas or pointers on what might have changed?
"$hui-button-card:first-of-type$": |
{% if not is_state('alarm_control_panel.security_system', 'disarmed') %}
ha-card, ha-state-icon {
color: rgb(245,0,0) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}