-
You have a
|after afterstyle:that shouldnt be there. -
It is not
--background-color:it is justbackground-color:or simply justbackground:either work.
1 Like
Hi Dimitri,
Your guide helps me a lot in preparing the dashboard. But I’m stuck in one place, can you please help?
I have two grids and I’m trying to remove the gap between them. Im using padding for each card, but the size wont reduce for the entire grid.
First grid code:
square: true
type: grid
cards:
- features:
- type: vacuum-commands
commands:
- start_pause
- stop
- return_home
type: tile
entity: vacuum.roborock_s7_maxv
vertical: false
show_entity_picture: false
name: Vacuum
card_mod:
style: |
ha-card {
height:120px !important;
padding: 0px !important;
}
- features:
- type: cover-open-close
type: tile
entity: cover.kitchen_shades
name: Shades
card_mod:
style: |
ha-card {
height:120px !important;
padding: 0px !important;
}
- features:
- type: fan-speed
type: tile
entity: fan.family_room_fan
name: Fan
vertical: false
icon: mdi:fan
card_mod:
style: |
ha-card {
height:120px !important;
padding: 0px !important;
}
columns: 3
Second Grid code:
square: false
type: grid
cards:
- type: custom:button-card
entity: script.first_floor_off
card_mod: null
style: |-
ha-card {
--card-mod-icon-color: grey;
}
size: 25%
tap_action:
action: call-service
service: script.first_floor_off
service_data: null
entity_id: {}
- type: custom:button-card
entity: script.second_floor_off
card_mod: null
style: |-
ha-card {
--card-mod-icon-color: grey;
}
size: 25%
tap_action:
action: call-service
service: script.second_floor_off
service_data: null
entity_id: {}
- type: custom:button-card
entity: script.movie_time
card_mod: null
style: |-
ha-card {
--card-mod-icon-color: grey;
}
size: 25%
tap_action:
action: call-service
service: script.movie_time
service_data: null
entity_id: {}
- type: custom:button-card
entity: script.cozy
card_mod: null
style: |-
ha-card {
--card-mod-icon-color: grey;
}
size: 25%
tap_action:
action: call-service
service: script.cozy
service_data: null
entity_id: {}
columns: 2
Dashboard gap:
Thanks again
You could bring the bottom cards up a touch by just adding top: -10px; to each of your:
style: |-
ha-card {
--card-mod-icon-color: grey;
top: -10px;
}
Sections
2 Likes
Thank you, sir. But this is leaving an empty space at the bottom of the grid.
I’m trying to push the cards up a bit, so everything fits in a single screen on my tablet dashboard without scrolling the page up and down.
Can i delete the empty space at bottom of the cards somehow?
You can add the same amount of top: -10px; that you added to your last 2 cards as margin-bottom: -10px; that will remove the extra empty space.
So like this:
style: |-
ha-card {
--card-mod-icon-color: grey;
top: -10px;
margin-bottom: -10px;
}
But only for your last 2 cards.
1 Like
Wow thank you for the quick responses. You made CSS easy for me
1 Like
How do I combine
card_mod:
style: |
ha-card {
--ha-card-background: none;
--icon-size: 50px;
}
mushroom-shape-icon {
--shape-color: rgba(255,255,255,0.9) !important;
}
with
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
}
?
One of the most common questions:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
}
.: |
ha-card {
--ha-card-background: none;
--icon-size: 50px;
}
mushroom-shape-icon {
--shape-color: rgba(255,255,255,0.9) !important;
}
There is a section in the first post about what the .: | symbol does. Take a look at that 
2 Likes
So now I have rebuilt the “type: entities / button”
Is it possible to center the chips?
type: entities
entities:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: automation.heizung_anne
icon_color: amber
name: AUTO
use_entity_picture: false
content_info: name
card_mod:
style: |
ha-card {
background: rgb(144,144,144, 0.3)!important;
--chip-font-size: 11px;
--primary-text-color: rgb(211,211,211, 0.7);
--text-color: rgb(211,211,211, 0.7);
}
- type: entity
entity: switch.anne
icon_color: amber
name: TRV
use_entity_picture: false
content_info: name
card_mod:
style: |
ha-card {
background: rgb(144,144,144, 0.3)!important;
--chip-font-size: 11px;
--primary-text-color: rgb(211,211,211, 0.7);
--text-color: rgb(211,211,211, 0.7);
}
- type: entity
entity: input_boolean.heizung_anne_comfort
icon_color: amber
name: COMFORT
use_entity_picture: false
content_info: name
card_mod:
style: |
ha-card {
background: rgb(144,144,144, 0.3)!important;
--chip-font-size: 11px;
--primary-text-color: rgb(211,211,211, 0.7);
--text-color: rgb(211,211,211, 0.7);
}
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
name: ECO
use_entity_picture: false
content_info: name
card_mod:
style: |
ha-card {
background: rgb(144,144,144, 0.3)!important;
--chip-font-size: 11px;
--primary-text-color: rgb(211,211,211, 0.7);
--text-color: rgb(211,211,211, 0.7);
}
state_color: true
show_header_toggle: true
2 Likes
Built into the mushroom chips card.
type: custom:mushroom-chips-card
alignment: center
chips:
2 Likes
Oh so easy, I always tried it in the wrong place
I’m having a problem where I put in the card_mod code and nothing happens. I can’t get it to change no matter what I do. Does anyone have any ideas?
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
--chip-background: green;
}
- type: menu
First question, may seem really obvious, but have you downloaded card mod from hacs? 2nd question have you then cleared your cache on browser/app manually?
Yes on the downloading card mod. I even redownloaded to be sure. I use homekit-infused and I think the card-mods are working in that dashboard but the custom dashboard i’m trying to make it just ignores it. I even added it to configuration.yaml under front-end in hopes that would help but nothing.
I cleared the cache on two browsers and tried a different PC and my phone and still no luck.
I went into developer mode in the browser and set some variables and it worked for entire chips card but when I put it in yaml it ignored it again.
Hmmm, what version of HA are you on? the latest card mod version i dont think is compatible with some older HA versions.
I’m running the latest 2023.10.5 version.
I added a different card mod as a global and that one seems to work fine. It is the individual that seems to be ignored.
type: custom:mushroom-chips-card
card_mod:
style: |
ha-card { --chip-background: none; }
:host {
z-index:2;
position: fixed;
bottom: 0;
margin: 0 !important;
left: 50%;
background: white;
padding: 20px;
transform: translateX(-50%);
width: calc(100% - 40px);
box-shadow: 0 0 40px #cccccc
}
chips:
- type: back
- type: menu
- type: spacer
- type: template
icon: mdi:home
icon_color: red
card_mod:
style: |
ha-card { --chip-background: red; }
- type: template
icon: mdi:stairs-down
- type: template
icon: mdi:stairs-up
- type: template
icon: mdi:grass
for the individual one can you try and use this instead? does that work?
type: custom:mushroom-chips-card
chips:
- type: back
- type: menu
- type: spacer
- type: template
icon: mdi:home
icon_color: red
card_mod:
style: |
ha-card {
background: none !important;
}
- type: template
icon: mdi:stairs-down
- type: template
icon: mdi:stairs-up
- type: template
icon: mdi:grass
Same result, which is no change. I even tried to change icon size and that didn’t work either. The icon_color option works.
How do I get this “prettier” and more centered.
Gladly I am also grateful for any other space-saving solution.
There should be displayed per room 3 radiators mode.
alignment: center
alignment: left
square: false
type: grid
cards:
- type: custom:mushroom-title-card
title: WZ
subtitle: |-
com
eco
night
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1px outset rgb(255, 191, 0, 0.5) !important;
alignment: left
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_anne_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
alignment: left
- type: custom:mushroom-title-card
title: EZ
subtitle: |-
com
eco
night
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1px outset rgb(255, 191, 0, 0.5) !important;
alignment: left
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_anne_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
alignment: left
- type: custom:mushroom-title-card
title: BA
subtitle: |-
com
eco
night
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1px outset rgb(255, 191, 0, 0.5) !important;
alignment: left
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_anne_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
alignment: left
- type: custom:mushroom-title-card
title: KÜ
subtitle: |-
com
eco
night
card_mod:
style: |
ha-card {
--title-font-size: 18px !important;
--subtitle-font-size: 10px !important;
background-color: transparent !important;
border: 1px outset rgb(255, 191, 0, 0.5) !important;
alignment: left
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.heizung_anne_comfort
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
- type: entity
entity: input_boolean.heizung_anne_eco
icon_color: amber
use_entity_picture: true
content_info: none
alignment: left
columns: 8