jksalvo
January 15, 2025, 3:24pm
42
You shouldn’t need card mod at all to style an entities card.
Instead of:
type: entities
card_mod:
style:
.: |
ha-card {
background: #d2d2d2;
border-top-right-radius: 0px !important;
border-color: transparent !important;
}
entities:
...
Remove your reliance on “hacky” solutions lol:
type: entities
style:
.: |
ha-card {
background: #d2d2d2;
border-top-right-radius: 0px !important;
border-color: transparent !important;
}
entities:
...
Simple as that!
EDIT: This is not totally correct, card mod is still somehow at work here and needs to be installed.
You sit on a throne of lies!
jksalvo
January 16, 2025, 4:05am
45
type: entities
style:
.: |
ha-card {
color: red;
}
div:nth-child(1)>hui-simple-entity-row$hui-generic-entity-row$: |
div.text-content.value.pointer > div {
display: none;
}
div:nth-child(2)>hui-simple-entity-row$hui-generic-entity-row$: |
div.text-content.value.pointer > div {
display: none;
}
div:nth-child(3)>hui-simple-entity-row$hui-generic-entity-row$: |
div.text-content.value.pointer > div {
display: none;
}
entities:
- entity: sun.sun
name: me sitting
icon: mdi:crown
- entity: sun.sun
name: throne
icon: mdi:chair-rolling
- entity: sun.sun
name: lies
icon: mdi:newspaper
What version of card_mod are you using?
The result of your posted code
With card_mod added
The need for card_mod was a change in card-mod 3
jksalvo
January 16, 2025, 4:24am
47
Ha, I guess I sit corrected, my apologies! I didn’t realize card mod was still at work under the hood.
I’m using card mod v3.3.0. The 3.4 update broke so many of my cards I had to roll it back. I’ve since been working on removing the old styling where I can, but I still can’t figure out how to use the new styling with horizontal stack cards.
If you do update card_mod, provide an example of a horizontal stack card and what you are looking to accomplish. I’d be happy to help!
jksalvo
January 16, 2025, 5:46am
49
I appreciate the offer!
This got me looking at the docs again
type: custom:mod-card
style:
.: |
ha-card {
background-color: red;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
So the above would simply need to become this:
type: custom:mod-card
card_mod:
style:
.: |
ha-card {
background-color: red;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
Is that really it? Will the second one work with card-mod v3.4+? Both work in 3.3.0:
I’m not sure why this seemed so hard the first time I looked at it, probably some dumb formatting typo
You should check out type: custom:stack-in-card and type: custom:layout-card
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: -10px 0px 0px 0px
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
card_mod:
style: |
ha-card {
background-color: red;
}
and to answer your question, Yes for the most part. Some card_mod code may need updated because the card code changed.
1 Like
Maybe you all can help me with this.
The borders around the button cards and the margins are not correct.
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: >-
'item1 item1' 'item2 item2' 'item3 item3' 'item4 item4' 'item5
item5'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content min-content min-content
- row-gap: 10px
custom_fields:
item1:
card:
type: custom:button-card
name: Tucson
tap_action:
action: none
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- border: none
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 18px
- margin-bottom: 0px
- padding: 6px
grid:
- grid-template-areas: "'n' 'l'"
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.5rem
label:
- justify-self: start
- font-weight: bold
- font-size: 1rem
- opacity: "0.4"
item2:
card:
type: custom:button-card
entity: device_tracker.2025_tucson_location
show_entity_picture: true
show_icon: false
show_name: false
entity_picture: /local/devices/car.png
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
styles:
entity_picture:
- width: 100%
- padding-bottom: 0%
item3:
card:
type: custom:button-card
custom_fields:
item1:
card:
type: tile
name: Engine
entity: binary_sensor.2025_tucson_engine
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
item2:
card:
type: tile
name: Lock
entity: lock.2025_tucson_door_lock
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
:host {
margin: 0px 12px 0 12px;
}
styles:
grid:
- grid-template-areas: "'item1 item2'"
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
card:
- border: none
- box-shadow: none
- padding: 0px
item4:
card:
type: custom:button-card
custom_fields:
item1:
card:
type: tile
name: Odometer
entity: sensor.2025_tucson_odometer
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
item2:
card:
type: tile
name: Range
entity: sensor.2025_tucson_fuel_driving_range
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
:host {
margin: 0px 12px 0 12px;
}
styles:
grid:
- grid-template-areas: "'item1 item2'"
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
card:
- border: none
- box-shadow: none
- padding: 0px
item5:
card:
type: custom:button-card
custom_fields:
item1:
card:
type: custom:fluid-level-background-card
card:
type: tile
name: Battery
entity: sensor.2025_tucson_car_battery_level
entity: sensor.2022_tucson_car_battery_level
level_color: hsl(115, 50%, 30%)
item2:
card:
type: custom:fluid-level-background-card
card:
type: tile
name: Fuel
entity: sensor.2025_tucson_fuel_level
entity: sensor.2025_tucson_fuel_level
level_color: hsl(217, 50%, 30%)
card_mod:
style: |
:host {
margin: 0px 12px 0 12px;
}
styles:
grid:
- grid-template-areas: "'item1 item2'"
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
card:
- border: none
- box-shadow: none
- padding: 0px
Tomm206
February 8, 2025, 9:18am
52
Hi all,
renaming the .gz file
checking the _renderEntity in www/community/lovelace-card-mod/card-mod.js
going back to card-mod version 3.4.3
uninstalling card-mod, restarting HA, and reinstalling either an older or the current version
changing the style from:
- type: entities
entities:
card_mod:
style:
.: |
#states > * {
margin: 2px -10px !important;
margin-left: -25px !important;
font-size: 10.5px;
--mdc-icon-size: 18px;
}
to
- type: entities
entities:
style:
.: |
#states > * {
margin: 2px -10px !important;
margin-left: -25px !important;
font-size: 10.5px;
--mdc-icon-size: 18px;
}
Nothing helped me.
Thanks.
The code you provided worked other than the fact you didn’t define an entity
type: entities
entities:
- entity: light.pc_lights
card_mod:
style:
.: |
#states > * {
margin: 2px -10px !important;
margin-left: -25px !important;
font-size: 10.5px;
--mdc-icon-size: 18px;
color: red;
}
The core should be on version 2025.2.1
Tomm206
February 9, 2025, 9:32am
54
Sorry, I copied only part of my code and accidentally deleted the entity.
type: custom:mod-card
style:
hui-horizontal-stack-card$: |
.card-header {
font-size: 18px !important;
margin-top: -20px !important;
margin-bottom: -15px !important;
margin-left: -10px !important;
}
card:
type: horizontal-stack
title: Baterie FVE
cards:
- type: entities
entities:
- entity: sensor.tpj4cjm04k_statement_of_charge_2
name: Teď
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.text-content:not(.info) {
color: {{'green' if states(config.entity) | int >= 50 else 'red' }}
}
- entity: sensor.max_baterie_fve_dnes_2
name: Max dnes
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- type: attribute
entity: sensor.cas_maxima_baterie_fve_dnes
attribute: datetime
format: time
name: Čas max
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
show_header_toggle: false
card_mod:
style:
.: |
#states > * {
margin: 2px -10px !important;
margin-left: -25px !important;
font-size: 10.5px;
--mdc-icon-size: 18px;
}
- type: entities
entities:
- entity: sensor.tpj4cjm04k_last_data_update_2
name: Update
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- entity: sensor.min_baterie_fve_dnes_2
name: Min dnes
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- type: attribute
entity: sensor.cas_minima_baterie_fve_dnes
attribute: datetime
format: time
name: Čas min
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
show_header_toggle: false
card_mod:
style:
.: |
#states > * {
margin: 2px -10px !important;
margin-left: -25px !important;
font-size: 10.5px;
--mdc-icon-size: 18px;
}
The problem is that there is too much space between entities:
I also tried to upgrade the Core to version 2025.2.1, and card-mod to 3.4.4. but it did not help.
Thanks
tvcsantos
August 13, 2025, 7:14pm
55
Hey there. Recently updated to 2025.8.1 and Card mod 3.4.5 seems to be broken with applying styles does anyone have the same?
A minimal example on what I have
type: picture-elements
elements:
- type: state-icon
style:
left: 50%
top: 90%
transform: translate(-50%,-50%)
"--paper-item-icon-color": var(--my-color-low-battery-warning)
entity: binary_sensor.low_battery_warning
state_color: false
card_mod:
style: |
ha-card {
--my-color-low-battery-warning: {% if is_state('binary_sensor.low_battery_warning', 'on') %} #CC0000 {% else %} darkgrey {% endif %};
}
tvcsantos
August 13, 2025, 7:43pm
56
Okay I was able to fix the issue, it seems that we can no longer use “–paper-item-icon-color” and should use “–state-icon-color” instead. I will leave it here for future reference in case someone needs it
type: picture-elements
elements:
- type: state-icon
style:
left: 50%
top: 90%
transform: translate(-50%,-50%)
"--state-icon-color": var(--my-color-low-battery-warning)
entity: binary_sensor.low_battery_warning
state_color: false
card_mod:
style: |
ha-card {
--my-color-low-battery-warning: {% if is_state('binary_sensor.low_battery_warning', 'on') %} #CC0000 {% else %} darkgrey {% endif %};
}
I don’t use card mod, and look at what the release did to my dashboard. This is by removing the ability to set row height on certain cards.
Please, I hope this is a bug, they will fix.
, and I think I got it to work now. Here’s a thrown together example of my old code (the card I’m looking at updating has 1878 lines so I won’t post that):
.
