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.
Wow thank you for the quick responses. You made CSS easy for me
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 
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
Built into the mushroom chips card.
type: custom:mushroom-chips-card
alignment: center
chips:
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
Thanks for the help. I think I figured out why it’s happening. Not sure how to fix it yet. It’s the theme that is set. I switch to a different theme and all the card_mods worked. My best guess is there is something defined in the HKI Default theme that is causing some sort of conflict
must be then. but !important should override most themes unless the theme itself has everything set to !important.
Something like this where you are making the chips slightly smaller to fit might work (but they are very small now, so might be hard to tap if that is your intention):
square: false
type: grid
cards:
- type: vertical-stack
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;
padding: 10px 0px 0px 1px !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- 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;
padding: 10px 0px 0px 1px !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- 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;
padding: 10px 0px 0px 1px !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
alignment: center
- type: vertical-stack
cards:
- 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;
padding: 10px 0px 0px 1px !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
icon: mdi:home-account
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
- type: entity
entity: input_boolean.alarm_skip
icon_color: amber
use_entity_picture: true
content_info: none
card_mod:
style: |
ha-card {
padding: 3px !important;
justify-content: center !important;
min-width: 18px !important;
width: 20px !important;
height: 20px !important;
}
alignment: center
columns: 4