It’s not going to work that way, you need to learn how to use “Button Card Templates.” I have been using HA for 4 years now, unfortunately I haven’t been able to make button card templates to work for once.
Hello Everyone,
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: null
layout: vertical
icon: mdi:page-last
icon_color: blue
primary: Last
tap_action:
action: navigate
navigation_path: /dashboard-main/third
- type: custom:mushroom-template-card
entity: null
layout: vertical
icon: mdi:home-floor-1
icon_color: yellow
tap_action:
action: none
- type: custom:mushroom-template-card
entity: null
layout: vertical
icon: mdi:page-next-outline
icon_color: green
primary: Next
tap_action:
action: navigate
navigation_path: /dashboard-main/second
Please guide how to vertically position the second template card to middle and remove its background color ?
Thank you
As learning someone else’s room card took too long I decided to build my own. Just do note that I am using a panel with a grid to display my dashboard, so this card might not fit your purpose fully. I included as much comments as possible to make it easier for you to tailor to your needs.
Summary
# below I will define the main card and make it square (as that fits my dashboard better)
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
aspect-ratio: 1 / 1;
}
cards:
# this card defines the main card and defines the grid within the card
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 60% 40%
grid-template-rows: 4
grid-template-areas: |
"template zone1"
"template zone2"
"spacer zone3"
"icon zone4"
# this card defines the main title and secondary text and is placed in the top left grid-area called "template"
cards:
- type: custom:mushroom-template-card
primary: Laurens
secondary: >-
🌡️ {{ states('sensor.laurens_atc_temperature') | round(1) }}°C | 💧{{
states('sensor.laurens_atc_humidity') | round(0) }} %
badge_icon: ''
view_layout:
grid-area: template
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--chip-border-width: 0;
}
#the below cards define the icons on the left. There is room for 4 icons in total. Their placement is determined by the "grid-area"
- type: custom:mushroom-entity-card
entity: light.laurens_grote_lamp
icon_color: yellow
fill_container: false
primary_info: none
tap_action:
action: toggle
view_layout:
grid-area: zone1
card_mod:
style:
.: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-entity-card
entity: cover.rolluik_laurens
icon_color: blue
fill_container: false
primary_info: none
tap_action:
action: toggle
view_layout:
grid-area: zone2
card_mod:
style:
.: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-entity-card
entity: climate.laurens
icon_color: red
fill_container: false
primary_info: none
tap_action:
action: more-info
view_layout:
grid-area: zone3
card_mod:
style:
.: |
ha-card {
--ha-card-border-width: 0px;
}
#the below card is the icon on the bottom left. The css has been customized to fit my screen and dashboard so probably some tweaking is needed before you can leverage it yourself
- type: custom:mushroom-template-card
icon: mdi:bed
icon_color: blue
view_layout:
grid-area: icon
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: absolute !important!;
bottom: 40px !important;
left: -50px !important;
}
.: |
ha-card {
--ha-card-border-width: 0px;
}
:host {
--mush-icon-size: 120px;
--mush-chip-spacing: -2.9px
}
4 Likes
Hello, I’m a little new to this.This is fantastic, first of all, thank you for all this work. I have a question, when using this card there is a white space on the right margin. What could I do? Thank you so much
Used the grid card with 2 columns, but there is always the white space on the right
Thanks
I don’t seem to have that issue, but it may be related to screen size. The first thing I’d look at would be the weather card above them. Mainly because the people icons above seem to have the same gap.
What happens if you remove the weather card? You may also be able to look at increasing the size of the room card slightly which may fill that gap.
Thank you for your quick response, I tried to remove the weather card and people but it does not solve the problem.
When adding a second card leaves that white space on the right margin, I have tried in many ways and the same thing happens on all devices (PC, Tablet and Mobile) is like the grid card, If I make the card bigger it is very difficult to move on the mobile.
There might be an issue with the card_mod part of the card to make it square.
Try to change some parameters (I have had the same issue, but do not remember how I fixed it and do not use this card anymore)
Especially size, padding and margin parameters…
Good evening, thank you for your quick responses.
I am in no way able to eliminate the blank space 
I have tried editing the card-mod parameters but there is no way to make it work…
Hi, everyone.
Excited to share my newest Homekit-inspired dashboard for some inspiration!
Inspired by Future prototype of Home Assistant
views:
- title: Home
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0); /* Transparent background */
border: none; /* Remove border */
box-shadow: none; /* Remove shadow */
padding: 0; /* Adjust padding if needed */
}
chips:
- type: menu
- type: spacer
- type: action
icon: mdi:microphone
tap_action:
action: assist
- type: action
icon: mdi:plus
tap_action:
action: navigate
navigation_path: /config
- type: action
icon: mdi:dots-vertical
tap_action:
action: call-service
service: ui_lovelace_minimalist.reload
target: {}
- type: custom:button-card
tap_action:
action: none
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 6px
- margin-bottom: 0px
- padding: 2px
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: 2.5rem
label:
- justify-self: start
- font-weight: bold
- font-size: 1rem
- opacity: '0.4'
name: God dag Sebastian
- type: horizontal-stack
cards:
- type: custom:button-card
state:
- operator: template
value: |
[[[ return entity.state > '1' ]]]
styles:
card:
- background: null
styles:
grid:
- grid-template-columns: 40px 1fr
- grid-template-rows: min-content min-content
- grid-template-areas: '"i n" "i l"'
card:
- padding: 5px
img_cell:
- justify-self: start
- width: 30px
- height: 30px
- margin-left: '-3px'
icon:
- width: 22px
- color: '#FF9843'
name:
- justify-self: start
- font-size: 14px
- opacity: '0.7'
- font-weight: 500
- padding: 2px 0
label:
- justify-self: start
- font-size: 16px
- padding: 2px 0
name: Climate
entity: sensor.vindusensor_temperature
icon: mdi:thermometer
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-klima
label: |
[[[
return (entity.state) + '°C'
]]]
show_label: true
- type: custom:button-card
state:
- operator: template
value: |
[[[ return entity.state > '1' ]]]
styles:
card:
- background: null
styles:
grid:
- grid-template-columns: 40px 1fr
- grid-template-rows: min-content min-content
- grid-template-areas: '"i n" "i l"'
card:
- padding: 5px
img_cell:
- justify-self: start
- width: 30px
- height: 30px
- margin-left: '-3px'
icon:
- width: 22px
- color: '#FFDD95'
name:
- justify-self: start
- font-size: 14px
- font-weight: 500
- opacity: '0.7'
- padding: 2px 0
label:
- justify-self: start
- font-size: 16px
- padding: 2px 0
name: Lights
entity: sensor.current_lights_on
icon: mdi:lightbulb
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-lys
label: |
[[[
return (entity.state) + ' på'
]]]
show_label: true
- type: custom:button-card
state:
- operator: template
value: |
[[[ return entity.state > '1' ]]]
styles:
card:
- background: null
styles:
grid:
- grid-template-columns: 40px 1fr
- grid-template-rows: min-content min-content
- grid-template-areas: '"i n" "i l"'
card:
- padding: 5px
img_cell:
- justify-self: start
- width: 30px
- height: 30px
- margin-left: '-3px'
icon:
- width: 22px
- color: '#D24545'
name:
- justify-self: start
- font-size: 14px
- font-weight: 500
- opacity: '0.7'
- padding: 2px 0
label:
- justify-self: start
- font-size: 16px
- padding: 2px 0
name: Sikkerhet
entity: lock.dor_las_3
icon: mdi:lock
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-sikkerhet
label: |
[[[
return (entity.state)
]]]
show_label: true
- type: custom:button-card
tap_action:
action: none
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
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.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Kamera
- type: horizontal-stack
cards:
- camera_view: live
type: picture-glance
entities: []
camera_image: camera.demo_camera_png
aspect_ratio: '25'
theme: minimalist-mobile
- type: vertical-stack
cards:
- camera_view: live
type: picture-glance
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities: []
camera_image: camera.demo_camera_png
theme: minimalist-mobile
- camera_view: live
type: picture-glance
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities: []
camera_image: camera.demo_camera
theme: minimalist-mobile
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-inngang
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
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.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Inngang
- type: horizontal-stack
cards:
- type: custom:mushroom-lock-card
entity: lock.dor_las_3
fill_container: true
- type: vertical-stack
cards:
- type: tile
entity: light.inngang_bord_lampe
- type: tile
entity: light.ute_lys_inngang
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: tile
entity: alarm_control_panel.alarm
state_content:
- state
- last-changed
- type: tile
entity: cover.garasje_apner
state_content:
- state
- last-changed
- features:
- type: target-temperature
type: tile
entity: climate.trappegang_panelovn
vertical: false
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-pult
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
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.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Pult
- type: horizontal-stack
cards:
- type: tile
entity: light.color_temperature_light_1_2
features:
- type: light-brightness
- type: vertical-stack
cards:
- type: tile
entity: light.pult_skjermer_2
state_content:
- state
- last-changed
- type: tile
entity: media_player.pult_2
state_content:
- state
- last-changed
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: tile
entity: script.jazz
- type: tile
entity: script.mp3
- features:
- type: fan-speed
type: tile
entity: fan.ceiling_fan
vertical: false
name: Pultvifte
- type: horizontal-stack
cards:
- type: tile
entity: media_player.soverom_2
state_content:
- state
- last-changed
- type: tile
entity: media_player.hoytalere
state_content:
- state
- last-changed
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-soverom
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
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.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Soverom
- type: horizontal-stack
cards:
- type: tile
entity: climate.living_room
features:
- type: target-temperature
- type: vertical-stack
cards:
- type: tile
entity: light.color_temperature_light_1_3
vertical: false
features:
- type: light-brightness
- type: horizontal-stack
cards:
- features:
- type: target-temperature
type: tile
entity: light.nattbord_lampe
- features:
- type: target-temperature
type: tile
entity: light.color_temperature_light_1
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-benk
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
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.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Benk
- type: horizontal-stack
cards:
- type: tile
entity: fan.stavifte_socket_1
vertical: true
state_content:
- state
- last-changed
- type: vertical-stack
cards:
- type: tile
entity: light.benkbelysning_nanoleaf_light_strip
state_content:
- state
- last-changed
- type: tile
entity: switch.server_socket_1
state_content:
- state
- last-changed
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-stue
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
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.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Stue
- type: horizontal-stack
cards:
- features:
- type: target-temperature
type: tile
entity: climate.panelovn_stue
- type: vertical-stack
cards:
- type: tile
entity: light.taklampe_sofa_2
- type: tile
entity: light.stalampe
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: tile
entity: climate.panelovn_stue
state_content:
- state
- last-changed
- type: tile
entity: light.on_off_plug_1
- type: tile
entity: cover.markise
features:
- type: cover-open-close
- type: horizontal-stack
cards:
- type: tile
entity: light.color_light_1
state_content:
- state
- last-changed
- type: tile
entity: light.dimmable_light_1
state_content:
- state
- last-changed
- type: horizontal-stack
cards:
- type: tile
entity: light.sofa_reading_lamp
state_content:
- state
- last-changed
- type: tile
entity: light.dining_table_lamp
- type: horizontal-stack
cards:
- type: tile
entity: media_player.stua_2
state_content:
- state
- last-changed
- type: tile
entity: media_player.r_n602_stue_2
icon: mdi:amplifier
state_content:
- state
- last-changed
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-kjokken
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
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.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Kjøkken
- type: horizontal-stack
cards:
- type: tile
entity: climate.kjokken_ovn
features:
- type: target-temperature
- type: vertical-stack
cards:
- type: tile
entity: light.kjokken_spot
features:
- type: light-brightness
- type: horizontal-stack
cards:
- type: tile
entity: climate.kjokken_ovn
- type: tile
entity: light.0x50325ffffef534b2
state_content:
- state
- last-changed
- type: horizontal-stack
cards:
- type: tile
entity: climate.fryseskap_freezer
- type: tile
entity: light.kitchen_table_lamp
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-bad
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
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.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Bad
- type: horizontal-stack
cards:
- type: tile
entity: climate.bad
- type: horizontal-stack
cards:
- type: tile
entity: switch.hanklevarmer
state_content:
- power
- last-changed
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit-ute
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 10px
- margin-bottom: 0px
- padding: 2px
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.3rem
label:
- justify-self: start
- font-weight: bold
- font-size: 0.1rem
- opacity: '0.4'
name: Ute
- type: horizontal-stack
cards:
- features:
- type: target-temperature
type: tile
entity: switch.sprinkler_switch
icon: mdi:sprinkler
vertical: true
- type: vertical-stack
cards:
- type: tile
entity: light.veranda_lampe_venstre
state_content:
- state
- last-changed
- type: tile
entity: light.veranda_lampe_hoyre
state_content:
- state
- last-changed
- type: custom:weather-card
entity: weather.oslo
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/homekit
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Media
icon: mdi:play-box-multiple-outline
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/media
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Energy
icon: mdi:lightning-bolt-outline
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/energi
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Map
icon: mdi:map-outline
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/map
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
ha-card {
background: rgb(30,30,30);
padding-bottom: 20px;
margin: 0px -13px -10px -13px;
border-radius: 0px;
}
2 Likes
Hi all,
Firstly, I’ve really benefitted from all the posts and sharing on this thread and the other Mushroom card and general threads, so thank you to everyone, it’s been a huge source of help.
I thought I would share my current dashboards I’m developing in case they are of inspiration to anyone else.
My first dashboard is a general overview that I tend to check each morning and a few times a day. It gives me a summary of helpful info then some key controls and updates on weather and savings etc.
The other dashboards cover individual rooms our device types, for things like battery levels or network kit and servers in the home.
I’ve tried to keep things clean and clutter free, whilst adding some visual interest and reference points, like the background to battery and server cards etc. It’s primarily used on mobile but I’m in the process of developing a tablet overview for the rest of the family to use.
Regards,
Tom
6 Likes
Awesome ! Thanks for sharing
can you share your chance of raun card?
Sure, code below. It uses mushroom card for the header and the apex-chart card for the graph. The data’s coming from the accuweather integration so you might need to change the fields if you’re using a different weather provider maybe.
(Each bar is daily value for today + next 4 days)
The code below is inside a grid card hence the “view_layout” value, which you can remove depending how you use it.
- type: custom:vertical-stack-in-card
view_layout:
grid-area: right
card_mod:
style: |
:host { margin: 4px 0px 4px 4px !important; }
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card { border: none; }
primary: Chance of rain
secondary: >
{% set forc = state_attr('weather.home', 'forecast') | default([0]) %}
{{ forc[0].precipitation_probability | int(0) }}%
icon: mdi:water-percent
badge_icon: ''
icon_color: blue
- type: custom:apexcharts-card
card_mod:
style: |
ha-card { border: none; }
graph_span: 4d
span:
start: day
apex_config:
tooltip:
enabled: false
legend:
show: false
dataLabels:
enabled: true
enabledOnSeries:
- 0
formatter: |
EVAL:function (val) {
return val.toFixed(0)+"%";
}
background:
enabled: true
borderWidth: 0
yaxis:
- title: rain
opposite: false
axisTicks:
show: false
labels:
show: false
grid:
yaxis:
lines:
show: false
xaxis:
labels:
show: false
format: ddd d
axisTicks:
show: false
type: datetime
fill:
opacity: 0.2
header:
show: false
title: Chance of rain
series:
- entity: weather.home
type: column
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [entry.datetime.substring(0,10), entry.precipitation_probability];
});
color: rgb(33, 150, 243)
2 Likes
I can’t remove chips borders 
I try
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0); /* Transparent background */
border: none; /* Remove border */
box-shadow: none; /* Remove shadow */
padding: 0; /* Adjust padding if needed */
}
1 Like
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
}
3 Likes
I thought I would post my dashboard, it’s come along way in the 3/4 months since I started HS.
I found mushroom and immediately wanted to use it. so with the help of @LiQuid_cOOled examples from helping other people (I know there can be a language barrier but reading some of the posts it’s almost like some people will demand help, you’ve always been patient and helpful to the community !) and the amazing post by @dimitri.landerloos for customising nearly every aspect of mushroom cards.
I have this, sorry for the long screen shot but I mainly use the android HS app.
4 Likes
Looks really good!
Can you share the complete code for this?
anyone has a good batterycard? maybe one that fills the background of the card with the level of the battery…
Hi All,
Anyone has a nice media page for spotiy / youtube music etc to share? Currently using the lovelace spotify card but it looks kinda drab on my mobile. Thanks in advance!
1 Like
Here is my card. It is adapted from dimitri.landerloos. His card is posted here
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: null
icon: mdi:battery
icon_color: green
content: Batteries
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
}
- type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
padding-bottom: 0px;
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
filter:
exclude:
- entity_id: sensor.maintenance*
include:
- entity_id: sensor.*battery
options:
type: custom:bar-card
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 41px !important;
margin-top: -8px !important;
width: 101%;
right: 0.5%;
}
ha-icon {
position: relative;
padding: 11px;
border-radius: 50%;
--mdc-icon-size: 21px;
margin-top: -15px;
right: 4px;
}
bar-card-row, ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-name {
margin-top: -27px !important;
left: 0px;
color: black;
}
bar-card-value {
margin-top: 8px !important;
font-size: 11px;
right: 96.9%;
width: 0px;
color: black;
}
ha-card {
margin: -4px 0px !important;
height: 60px;
}
bar-card-row bar-card-currentbar,
ha-icon, bar-card-backgroundbar {
--bar-color:
{% if states(config.entity) == 'unavailable' or states(config.entity) == 'none' %}
var(--blue-color) !important;
--card-mod-icon: mdi:bug !important;
{% elif states(config.entity) | int <= 10 %}
#ff0026 !important;
--card-mod-icon: mdi:battery-10 !important;
{% elif states(config.entity) | int <= 20 %}
#ff4d00 !important;
--card-mod-icon: mdi:battery-20 !important;
{% elif states(config.entity) | int <= 30 %}
#ff9900 !important;
--card-mod-icon: mdi:battery-30 !important;
{% elif states(config.entity) | int <= 40 %}
#ffcc00 !important;
--card-mod-icon: mdi:battery-40 !important;
{% elif states(config.entity) | int <= 50 %}
#e7fc03 !important;
--card-mod-icon: mdi:battery-50 !important;
{% elif states(config.entity) | int <= 60 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-60 !important;
{% elif states(config.entity) | int <= 70 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-70 !important;
{% elif states(config.entity) | int <= 80 %}
#22c402 !important;
--card-mod-icon: mdi:battery-80 !important;
{% elif states(config.entity) | int <= 90 %}
#22c402 !important;
--card-mod-icon: mdi:battery-90 !important;
{% elif states(config.entity) | int <= 100 %}
#22c402 !important;
--card-mod-icon: mdi:battery !important;
{% else %}
var(--blue-color) !important;
--card-mod-icon: mdi:bug !important;
{% endif %}
}
bar-card-row ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent);
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
ha-card {
padding: 0px !important;
margin: -3px !important;
height: 60px;
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
sort:
method: state
numeric: true
ip: false
ignore_case: false
2 Likes