I would use a horizontal stack with 2 chips cards. The left one is aligned left and the other is aligned right. Or else you should try a spacer chip somewhere.
Thanks it worked!
Q1: How can i change the fonts weight / style, i will show how i did it and tell me if it is correct way.
"Photo | Code
- type: custom:mushroom-template-card
primary: >-
{{ as_timestamp(states('sensor.date'))|timestamp_custom('%A %d %B', true)
}}
secondary: ''
icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
font-weight: 100 !important;
}
.: |
ha-card {
--card-primary-font-size: 15px;
text-align: center;
font-variant: small-caps;
}
Q2: How can i make disappear all the borders?
1 Like
Hi There, I have created this little card that I have created, it’s static only at this moment. And please note im not a CSS wizard in any stretch of the imagination 
How can I better sort the icons so they dont do this?
type: custom:stack-in-card
mode: vertical
keep:
background: false
box_shadow: false
margin: false
outer_padding: true
border_radius: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Next Rubbish Collection
secondary: This Friday
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
--card-primary-font-weight: 400;
--card-secondary-font-weight: 400;!important;
margin-left:10px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:trash-can
icon_color: red
badge_icon: mdi:check-bold
badge_color: green
layout: vertical
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
position:relative;
left:15px;
margin: 0 -10px 0 0;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:trash-can
icon_color: green
badge_icon: mdi:check-bold
badge_color: green
layout: vertical
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
position:relative;
left:5px;
margin: 0 -10px 0 0;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:trash-can
icon_color: grey
badge_icon: mdi:close
badge_color: grey
layout: vertical
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
position:relative;
left:0px;
margin: 0 -10px 0 -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:bottle-wine
icon_color: grey
badge_icon: mdi:close
badge_color: grey
layout: vertical
multiline_secondary: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
position:relative;
margin: 0 10px 0 -10px;
}
3 Likes
You could do it with chips instead? then you know the scaling will work across screen sizes.
This solution does require you to have material icons font installed which can be found here:
and @rhysb has explained how to install here:
Code
type: custom:stack-in-card
mode: vertical
keep:
background: false
box_shadow: false
margin: false
outer_padding: true
border_radius: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Next Rubbish Collection
secondary: This Friday
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
--card-primary-font-weight: 400;
--card-secondary-font-weight: 400;!important;
margin-left:10px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: ''
icon: mdi:trash-can
icon_color: red
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-red), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "done";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
icon: mdi:trash-can
icon_color: green
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-green), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "done";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
icon: mdi:trash-can
icon_color: grey
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-grey), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "close";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-grey));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
icon: mdi:bottle-wine
icon_color: grey
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-grey), 0.2) !important;
border: none;
box-shadow: none;
}
ha-card:after {
content: "close";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-grey));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
alignment: end
card_mod:
style: |
ha-card {
top: 16px;
}
3 Likes
font weight numerical values go from 100 - 900 from light to extra bold.
for the border, put this below every one of you cards in the stack. or if you already have an ha-card just add the border: none !important; to it. (untested)
card_mod:
style: |
ha-card {
border: none !important;
}
1 Like
This is a very good looking card!
To make even better for my purposes. Is it possible to also include a toggle for lights in the upper right corner of the lower card?
Something like this
1 Like
Hello everyone,
I have a room overview that uses color codes to signal whether something is turned on (orange) or if there’s a critical alarm, such as a water leak or similar issues > red
So far, I’ve been handling this with conditional variables, which works, but depending on the situation, it doesn’t look very appealing. I would like to have the rooms listed in a grid of two columns in the order I specify.
Currently, only two rooms are displayed in a single column. Is there a way to list all the rooms one after another and then display them in two columns?
I understand that if only one room is critical, only one room will be displayed. However, when there are two or more critical rooms, I’d like the display to look “nicer.”
like so:
and not so:
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: 'Rooms: '
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Room 1
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_01
icon: mdi:table-furniture
icon_color: >-
{% if is_state('group.room_01critical', 'on') %}
red
{% elif is_state('group.room_01notify', 'on') %}
orange
{% elif is_state('group.room_01critical', 'off') and
is_state('group.room_01notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
double_tap_action:
action: none
hold_action:
action: none
badge_color: ''
- type: custom:mushroom-template-card
primary: Room 2
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_02
icon: mdi:door
icon_color: >-
{% if is_state('group.room_02critical', 'on') %}
red
{% elif is_state('group.room_02notify', 'on') %}
orange
{% elif is_state('group.room_02critical', 'off') and
is_state('group.room_02notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Room 3
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_03
icon: mdi:bed
icon_color: >-
{% if is_state('group.room_03critical', 'on') %}
red
{% elif is_state('group.room_03notify', 'on') %}
orange
{% elif is_state('group.room_03critical', 'off') and
is_state('group.room_03notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
- type: custom:mushroom-template-card
primary: Room 4
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_04
icon: mdi:toilet
icon_color: >-
{% if is_state('group.room_04critical', 'on') %}
red
{% elif is_state('group.room_04notify', 'on') %}
orange
{% elif is_state('group.room_04critical', 'off') and
is_state('group.room_04notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Room 5
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_05
icon: mdi:sofa
icon_color: >-
{% if is_state('group.room_05critical', 'on') %}
red
{% elif is_state('group.room_05notify', 'on') %}
orange
{% elif is_state('group.room_05critical', 'off') and
is_state('group.room_05notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
- type: custom:mushroom-template-card
primary: Room 6
secondary: ''
tap_action:
action: navigate
navigation_path: /lovelace/r_06
icon: mdi:balcony
icon_color: >-
{% if is_state('group.room_06critical', 'on') %}
red
{% elif is_state('group.room_06notify', 'on') %}
orange
{% elif is_state('group.room_06critical', 'off') and
is_state('group.room_06notify', 'off') %}
green
{% else %}
purple
{% endif %}
fill_container: false
multiline_secondary: true
layout: vertical
badge_icon: ''
badge_color: ''
Can you post some code on how you are making this work right now? hard to understand what you are wanting when i dont understand what you currently have.
sorry i forgot to attach it, i edited the post right away.
the examples below I didn’t exist I would have made it as I said simply with the “condition” card, but since it doesn’t look very nice I haven’t changed this yet so
Does this work for you?
Code
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.office_temperature_humidity_humidity
show_icon: false
name: Bedroom
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.bedroom_temperature_humidity_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.bedroom_temperature_humidity_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.bedroom_temperature_humidity_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.bedroom_temperature_humidity_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom_lights
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
3 Likes
arrrgh i just came up with the solution by myself. sometimes it helps to ask for help. don’t know why i didn’t come up with the idea of using the grid card as a base before.
1 Like
Almost, I can´t get the lights to toggle.
I tried tried to add tap_action without any luck, see below
Still I come to sensor history when I try to toggle the lights
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom_ceiling
tap_action:
action: toggle
icon: hue:bulb-classic
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
}
Stupid me… didnt even test that lol.
throw a z-index: 1; in there and it will work 
Code
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.office_temperature_humidity_humidity
show_icon: false
name: Bedroom
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.bedroom_temperature_humidity_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.bedroom_temperature_humidity_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.bedroom_temperature_humidity_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.bedroom_temperature_humidity_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom_lights
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
ive also edited my original response to include it
1 Like
Thanks again!
I got it working with that.
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px !important;
}
Like a Glove!
Thank you for your super support and quick responses.
1 Like
It is possible to put the text into the circle? Its a template card.
try like this:
2 Likes
thanks i did it!
1 Like
Simply amazing thank you!! This is a much better way and also thank you for the code. It’s given me lots of reference points that I did not know before.
@dimitri.landerloos now working!!! (animated gif)
8 Likes
I’m using this code for changing the icon colors on a light card
type: custom:mushroom-light-card
entity: light.office_ceiling_light
show_brightness_control: true
use_light_color: false
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
name: Ceiling Light
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2.5px solid;
--icon-color: orange !important;
--icon-color-disabled: rgba(255,255,255) !important;
--shape-color-disabled: rgb(0,0,0) !important;
--shape-color: rgb(35,35,41) !important;
}
Is there a way that I can change the shape border to change color when the light is on/ off?
Thanks in advance