It was an error I made when typing here, my actual code was correct.
Since not a lot users use this “ha-dashboard” - it is difficult to help.
I may only speculate that it probably can be styled in card-mod-theme (card-mod-root-yaml).
Why would I be able to modify hui-masonry-view with card mod, but the child selectors wouldn’t work?
Also, personally me do not like these custom all-in-one ready solutions. Consider using a stock sidebar view modded (moved to the left side) either by a card-mod-theme or an external js.
Also, here there is wrong syntax:
hui-masonry-view$#columns>div {
background: white !important;
}
hui-masonry-view$: |
#columns: |
div {
background: white !important;
}
hui-masonry-view
$: |
#columns: |
div {
background: white !important;
}
"hui-masonry-view $ #columns": |
div {
background: white !important;
}
Must be
xxxx $: |
xxx {
...
}
This is what the README on the cardmod github says:
card_mod:
style:
ha-markdown$: |
h3 {
color: purple;
}
.: |
ha-card {
background: teal;
}
Expand the example under DOM Navigation
Repo has its last commit in 2023, during that time the frontend has changed a lot. The view selector may have a different structure, for example there is a new component element for view background, etc. Isn’t it better to create a new dashboard?
The dashboard works perfectly fine, I just can’t select what I want with cardmod. I’m also seeing the same thing on my regular dashboard.
These two should be roughly equivalent but one works and the other does not. Am I missing something?
nope, its not… use like this…
card_mod:
style:
.: |
mushroom-card {
background: white;
}
Hey, I have an issue with card-mod and an entities-card, which shall be triggered by a condition:
Seems like the entities-card does not evaluate the “if” at all:
type: entities
entities:
- entity: sensor.eu13l_hp1_operating_state_txt
name: Betriebsmodus Wärmepumpe
icon: mdi:auto-mode
- entity: sensor.eu13l_buff1_operating_state_txt
name: Betriebsmodus Pufferspeicher
icon: mdi:water-boiler
- entity: sensor.eu13l_hc1_operating_state_txt
name: Betriebsmodus Heizkreis
icon: mdi:heating-coil
- entity: sensor.eu13l_hp1_state_txt
name: Betriebsmodus Kompressor
icon: mdi:pump
- entity: sensor.solaruberschuss
icon: mdi:transmission-tower-off
card_mod:
style: |
hui-generic-entity-row $: |
.text-content:not(.info) {
color:{% if is_state('input_boolean.solaruberschuss_warmpumpe_an_aus', 'on') %} red {% else %} inherit {% endif %};
animation:{% if is_state('input_boolean.solaruberschuss_warmpumpe_an_aus', 'on') %} blinking 2s linear alternate infinite {% else %} none {% endif %};
}
@keyframes blinking {
0% { opacity: 0; }
100% { opacity: 1; }
}
- entity: sensor.solax_pv_power_1
- entity: sensor.solax_pv_power_2
- entity: sensor.solax_pv_voltage_1
- entity: sensor.solax_pv_voltage_2
- entity: sensor.solar_forecast_heute_gesamt
- entity: sensor.solar_forecast_morgen_gesamt
- entity: sensor.eu13l_hp1_cop
icon: mdi:recycle-variant
state_color: false
title: Energiebedarf & Verteilung
This is what it looks like, when the input_boolean is “ON”:
correct syntax
card_mod:
style:
hui-generic-entity-row $: |
Seems like you outperformed Gemini 2.0 . 
Actually I asked Gemini to write this piece of yaml, since I’m even worse at formatting and brackets and stuff.
Got another issue - now with a Sonoff NSPanel Pro with the Homematic-App:
The display has no font size - or to be more precise, it has the “standard” font-size.
Here is a picture from my Surface vs the NSPanel in the background and the code:
YAML:
type: sections
max_columns: 1
title: Küche
path: kuche
visible:
- user: 3f3264b0204f44e2af4cd8d68d874ef0
- user: b144feeef97b49ab828a16cc5992b934
sections:
- type: grid
cards:
- type: custom:mushroom-entity-card
entity: sensor.weatherflow_tempest_temperatur
icon: ""
icon_color: primary
fill_container: true
primary_info: state
secondary_info: none
card_mod:
style: |
ha-card {
#background: indianred;
box-shadow: none ;
--card-primary-font-size: 40px;
--card-primary-line-height: 40px !important;
#--card-secondary-color: black;
align-items: left;
}
- type: custom:mushroom-entity-card
entity: sensor.solar_forecast_heute_gesamt
icon: ""
icon_color: primary
fill_container: true
primary_info: state
secondary_info: none
card_mod:
style: |
ha-card {
#background: indianred;
box-shadow: none ;
--card-primary-font-size: 35px;
--card-primary-line-height: 40px !important;
#--card-secondary-color: black;
align-items: left;
}
grid_options:
columns: 6
rows: 1
- type: custom:mushroom-entity-card
entity: sensor.solax_pv_power_total
icon: mdi:white-balance-sunny
fill_container: true
primary_info: state
secondary_info: none
card_mod:
style: |
ha-card {
box-shadow: none ;
--card-primary-font-size: 40px;
--card-primary-line-height: 40px !important;
align-items: left;
}
ha-state-icon {
color: {% if states('sensor.solax_pv_power_total') | float > 0 %} yellow {% else %} darkblue {% endif %};
{% if states('sensor.solax_pv_power_total') | float > 0 %}
animation: rotation 2s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
grid_options:
columns: 6
rows: 1
- type: custom:mushroom-entity-card
entity: sensor.solax_today_s_solar_energy
icon: ""
icon_color: yellow
fill_container: true
primary_info: state
secondary_info: none
card_mod:
style: |
ha-card {
#background: indianred;
box-shadow: none ;
--card-primary-font-size: 35px;
--card-primary-line-height: 40px !important;
#--card-secondary-color: black;
align-items: left;
}
ha-state-icon {
animation: resizing 1s linear infinite alternate;
}
@keyframes resizing {
0% {
--mdc-icon-size: 32px;
}
25% {
--mdc-icon-size: 29px;
}
50% {
--mdc-icon-size: 26px;
}
75% {
--mdc-icon-size: 23px;
}
100% {
--mdc-icon-size: 20px;
}
}
grid_options:
columns: 6
rows: 1
- type: custom:mushroom-entity-card
entity: sensor.solax_house_load
icon: ""
icon_color: red
fill_container: true
primary_info: state
secondary_info: none
card_mod:
style: |
ha-card {
#background: indianred;
box-shadow: none ;
--card-primary-font-size: 40px;
--card-primary-line-height: 40px !important;
#--card-secondary-color: black;
align-items: left;
}
ha-state-icon {
animation: resizing 1s linear infinite alternate;
}
@keyframes resizing {
0% {
--mdc-icon-size: 20px;
}
25% {
--mdc-icon-size: 24px;
}
50% {
--mdc-icon-size: 28px;
}
75% {
--mdc-icon-size: 32px;
}
100% {
--mdc-icon-size: 36px;
}
}
grid_options:
columns: 7
rows: 1
- type: custom:mushroom-entity-card
entity: sensor.solax_battery_capacity
icon: ""
icon_color: green
fill_container: true
primary_info: state
secondary_info: none
card_mod:
style: |
ha-card {
#background: indianred;
box-shadow: none ;
--card-primary-font-size: 40px;
--card-primary-line-height: 40px !important;
#--card-secondary-color: black;
align-items: left;
}
grid_options:
columns: 5
rows: 1
- type: custom:mushroom-select-card
entity: input_select.rolladenautomatik_kuche
fill_container: false
layout: horizontal
- event_grouping: true
drop_todayevents_from: "10:00:00"
next_days: 3
pattern:
- icon: mdi:flower
color: green
type: organic
label: Grünabfall
- icon: mdi:newspaper
color: blue
type: paper
pattern: Altpapier
- icon: mdi:recycle-variant
color: amber
type: recycle
pattern: Gelbe Tonne
- icon: mdi:trash-can-outline
color: grey
type: waste
- icon: mdi:dump-truck
color: purple
type: others
day_style: weekday
alignment_style: left
items_per_row: 2
refresh_rate: 60
with_label: true
layout: horizontal
type: custom:trash-card
entities:
- calendar.abfallwirtschaftsbetrieb_landkreis_ahrweiler
only_all_day_events: false
full_size: false
grid_options:
columns: 15
rows: 1
use_summary: false
card_mod:
style: |
ha-card {
zoom: 1.5
}
- type: tile
entity: input_boolean.heizungsautomatik_kuche
color: red
vertical: false
hide_state: false
tap_action:
action: none
icon_tap_action:
action: more-info
hold_action:
action: toggle
name: Heizungsautomatik
- type: tile
entity: input_select.heizprogramm
tap_action:
action: more-info
cards: []
Hi there I was wondering if someone can offer a suggestion for reducing the spacing between some of the entities on this card. It spans the whole screen of my tablet in landscape so I cannot access the bottom slider. Thank you.
cards:
- type: glance
entities:
- entity: sensor.h5074_543c_temperature
name: Bathroom Temp
- entity: sensor.h5074_543c_humidity
name: Bathroom Humidity
- type: entities
entities:
- entity: light.nap_fpc_0998_flame
- entity: fan.nap_fpc_0998_blower
- type: divider
- entity: timer.fp_timer
name: Time Rem (Min) - Press for Popup
- entity: input_boolean.fire_timer_toggle_toggle
name: Timer Start
- type: custom:mushroom-number-card
entity: input_number.fp_duration
name: Run Time Adjustment
title: Fireplace ControlsAfter 2-3x reloading, the font is correct now!
1st post → link at the bottom → glance card
Same path - set height for rows in entities card
And please post a code FORMATTED.
PR coming in next Improve weather forecast card layout by watercrossing · Pull Request #23704 · home-assistant/frontend · GitHub
might need to check that out 
Is it possible to change icon color based on an attribute?
entity: sensor.sunlu_black_petg
type: custom:multiple-entity-row
name: Sunlu Black PETG
secondary_info: last-changed
toggle: true
state_header: Anwahl
icon: mdi:printer-3d-nozzle
entities:
- entity: sensor.sunlu_black_petg
type: attribute
name: Restgewicht
attribute: remaining_weight
- entity: sensor.sunlu_black_petg
type: attribute
name: ID
attribute: filament_id
- entity: sensor.sunlu_black_petg
type: attribute
name: Ort
attribute: location
card_mod:
style: |
:host {
--card-mod-icon-color: #{{ state_attr(entity, 'filament_color_hex') }}
}
‚filament_color_hex‘ returns a value like 223344
The code above doesn‘t change color of the icon. If i write #223344 behind —card-mod-icon-color: it works fine. Any idea ?
Did you try removing the #? I’d also verify the mod field
An example with my entities to change the background…
entity: sensor.p1s_ams_tray_3
type: entities
name: Sunlu Black PETG
secondary_info: last-changed
toggle: true
state_header: Anwahl
icon: mdi:printer-3d-nozzle
entities:
- entity: sensor.p1s_ams_tray_3
type: attribute
name: Restgewicht
attribute: remaining_weight
- entity: sensor.color
type: attribute
name: ID
attribute: filament_id
- entity: sensor.p1s_ams_tray_3
type: attribute
name: Ort
attribute: location
card_mod:
style: |
ha-card {
background-color: {{ state_attr('sensor.p1s_ams_tray_3', 'color') }}
}