Hey, i built a version of this specifically made to make this layout work neatly with different sizes.
check out my post here:
hopefully it works for your use case 
Wow, this has helped me a lot with some things, but here’s a question… I have, for example, an air purifier card and three chips underneath it. Is there any way to make it so that within the same vertical-stack, the purifier card and the chips are on the same line, not “underneath”? And that the card would occupy, for example, 75% of the width, and the chips would occupy 25%?
Now I have:
type: vertical-stack
cards:
- type: custom:mushroom-fan-card
entity: fan.ochistitel_vozdukha
icon_animation: true
fill_container: false
show_percentage_control: false
show_oscillate_control: false
collapsible_controls: false
secondary_info: state
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/1/
name: Очиститель воздуха
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,255,0,0.66);
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ochistitel_vozdukha_tvoc
name: AQI
use_entity_picture: false
icon: mdi:air-filter
icon_color: green
- type: entity
entity: sensor.ochistitel_vozdukha_filter_use
icon_color: green
icon: mdi:clock-remove-outline
- type: entity
entity: sensor.ochistitel_vozdukha_filter_life_remaining
icon_color: green
icon: mdi:percent-circle-outline
alignment: justify
Perhaps it can be done through horisontal-stack, but I have not tried it. Perhaps it is necessary to “influence” the mushroom-cards somehow…
Thank U!
you mean the issue you have is that you have this:
but you want this:
you can change to a horizontal stack and then play around with the widths of each card with card mod:
Code
type: horizontal-stack
cards:
- type: custom:mushroom-fan-card
entity: light.bedroom_chest_lamp
icon_animation: true
fill_container: false
show_percentage_control: false
show_oscillate_control: false
collapsible_controls: false
secondary_info: state
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/1/
name: Очиститель воздуха
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,255,0,0.66);
width: 150%;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.average_cost
name: AQI
use_entity_picture: false
icon: mdi:air-filter
icon_color: green
- type: entity
entity: sensor.average_cost
icon_color: green
icon: mdi:clock-remove-outline
- type: entity
entity: sensor.average_cost
icon_color: green
icon: mdi:percent-circle-outline
alignment: justify
card_mod:
style: |
ha-card {
position: relative;
left: 50%;
width: 50%;
}
or you could just install the layout card from Hacs. a little hard to understand at first, but actually way easier than modifying each card with card mod.
Code
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-fan-card
entity: light.bedroom_chest_lamp
icon_animation: true
fill_container: false
show_percentage_control: false
show_oscillate_control: false
collapsible_controls: false
secondary_info: state
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/1/
name: Очиститель воздуха
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,255,0,0.66);
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.average_cost
name: AQI
use_entity_picture: false
icon: mdi:air-filter
icon_color: green
- type: entity
entity: sensor.average_cost
icon_color: green
icon: mdi:clock-remove-outline
- type: entity
entity: sensor.average_cost
icon_color: green
icon: mdi:percent-circle-outline
alignment: justify
layout:
grid-template-columns: auto 27%
grid-template-rows: auto
max_cols: 2
options for this card are here:
Yes, I meant the second example. I realize that the thing is trivial, but I looked and tried to apply to the whole “type” of “stack”-s, but it didn’t work. There’s just a little bit of combing left to do (well, that’s just me) and everything will be fine.
Thank you very much!
Odd. Seems that you need to use background instead now for this card.
Ill look into it because --shape-color still works for the Template card for example.
EDIT: --shape-color still works. The light needs to be on for it to take effect. If you want to change the color whether light is off or on use background instead. The remaining syntax is the same. Ill update the guide to make this clear and check whether this also applies to things like the cover card.
1 Like
–background-color: doesn’t work in my light card.
–shape-color doesn’t even seem to work in a template card
-
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?