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;
}
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
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)
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 */
}
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
}
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.
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!
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
Hello WebPower, which theme are you using? I love the colors. Great work Greetings Tom
Hi @ingo.niehues,
I don’t know why but my card looks different and not as expected.
This is my yaml:
type: custom:button-card
entity: sensor.gasverbrauch_monate
variables:
max_entity: sensor.gasverbrauch_monate_bis_ende
name: '[[[ return entity.attributes.friendly_name ]]]'
color: purple
units: '[[[ return entity.attributes.unit_of_measurement ]]]'
icon: mdi:calendar
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 3px
grid:
- grid-template-areas: '"mush bar"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 100%
custom_fields:
mush:
- filter: opacity(100%)
- overflow: visible
bar:
- filter: opacity(100%)
- overflow: visible
custom_fields:
mush:
card:
type: custom:mushroom-template-card
tap_action:
action: more-info
entity: '[[[ return entity.entity_id ]]]'
icon_color: '[[[ return variables.color ]]]'
secondary: '[[[ return variables.name ]]]'
primary: >-
[[[ return entity.state + "/" + states[variables.max_entity].state + " "
+ variables.units ]]]
icon: '[[[ return variables.icon ]]]'
card_mod:
style: |
ha-card {
padding: 0px !important;
padding-bottom: 3px !important;
text-align: left !important;
border: none !important;
box-shadow: none !important;
background: none !important;
}
bar:
card:
type: custom:bar-card
name: ' '
entity: '[[[ return entity.entity_id ]]]'
max: '[[[ return states[variables.max_entity].state ]]]'
min: 0
unit_of_measurement: >-
[[[ return "/ " + states[variables.max_entity].state + " " +
variables.units ]]]
color: '[[[ return variables.color ]]]'
decimal: 0
entity_row: true
positions:
icon: 'off'
indicator: 'off'
minmax: inside
title: 'off'
value: 'off'
style: |-
.contentbar-direction-right {
flex-direction: row;
}
bar-card-contentbar {
align-items: flex-end;
display: flex;
justify-content: space-between;
}
bar-card-backgroundbar, bar-card-currentbar {
left: 0px !important;
}
bar-card-iconbar {
color: white;
}
bar-card-name {
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
font-size: 1em;
font-weight: bold;
color: white;
}
bar-card-value {
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
font-size: 1em;
font-weight: bold;
color: white;
}
bar-card-max {
display: none;
}
bar-card-divider {
display: none;
}
.min-direction-right {
display: none;
}
Do you have any ideas what I’m doing wrong? Thanks in advance.
Cheers
I had the Same Problem after one of the Last Updates. I removed that Card.