Hello
I’m looking for to modify this card because with last update (probably, because conditional card are modified) it’s dismiss…
Can you help me ?
Hello i’ve been trying to make my own custom mushroom looking room card that i want to use on my main dashboard. attached is a picture of what im trying to make the card look like and another picture of how far i got. No matter what i try i cant see to get it layed out the way i want. Any help anyone can provide is extremely appreciated!
square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:mushroom-template-card
entity: light.master
view_layout:
grid-area: RoomIcon
layout: grid
icon: mdi:bed
icon_color: |
{% if is_state(entity, 'on') %}
#3ae431
{% else %}
grey
{% endif %}
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
left: -22px;
top: -24px;
padding-top: 0px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 2.5px;
display: flex !important;
align-items: end !important;
}
.: |
:host {
--ha-card-background: transparent;
--ha-card-border-color: transparent;
--mush-icon-size: 80px;
--mush-icon-symbol-size: 0.80em;
- type: custom:mushroom-template-card
entity: light.master
view_layout:
grid-area: RoomName
layout: grid
primary: Master Bedroom
secondary: >-
{{ states('sensor.master_bedroom_motion_temperature') }}°C |
{% set all = expand('light.master')| list -%}
{% set ND1 = all | selectattr('state','eq','on')|list|count%}
lights ON:{{ND1}}
badge_icon: ''
badge_color: ''
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: 0px;
left: 0px;
overflow: visible !important;
white-space: nowrap !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: 10px;
left: 0px;
}
.: |
:host {
--ha-card-background: transparent;
--ha-card-border-color: transparent;
margin-top: 0px !important;
margin-left: -50px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
width: 0px;
--secondary-text-color:
{% if is_state_attr('climate.master_bedroom', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.master_bedroom', 'hvac_action', 'cool') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light1
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light2
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light2
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light3
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light4
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light5
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
layout:
grid-template-columns: >-
minmax(20px, 60px) minmax(20px, 60px) minmax(20px, 60px)
minmax(20px, 60px) minmax(20px, 60px) minmax(20px, 60px)
minmax(20px, 60px) minmax(20px, 60px)
grid-template-rows: minmax(20px, 60px) minmax(20px, 60px) minmax(20px, 60px)
grid-template-areas: >
"RoomIcon RoomIcon RoomName RoomName RoomName RoomName
ClimateIcom ."
"RoomIcon RoomIcon TempStats TempStats TempStats TempStats
Motion ."
"Left Light1 Light2 Light3 Light4 Light5 Right ."
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:mushroom-template-card
entity: light.master
view_layout:
grid-area: RoomIcon
layout: grid
icon: mdi:bed
icon_color: |
{% if is_state(entity, 'on') %}
#3ae431
{% else %}
grey
{% endif %}
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
left: -22px;
top: -24px;
padding-top: 0px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 2.5px;
display: flex !important;
align-items: end !important;
}
.: |
:host {
--ha-card-background: transparent;
--ha-card-border-color: transparent;
--mush-icon-size: 80px;
--mush-icon-symbol-size: 0.80em;
- type: custom:mushroom-template-card
entity: light.master
view_layout:
grid-area: RoomName
layout: grid
primary: Master Bedroom
secondary: >-
{{ states('sensor.master_bedroom_motion_temperature') }}°C |
{% set all = expand('light.master')| list -%}
{% set ND1 = all | selectattr('state','eq','on')|list|count%}
lights ON:{{ND1}}
badge_icon: ''
badge_color: ''
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: 0px;
left: 0px;
overflow: visible !important;
white-space: nowrap !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: 10px;
left: 0px;
}
.: |
:host {
--ha-card-background: transparent;
--ha-card-border-color: transparent;
margin-top: 0px !important;
margin-left: -50px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
width: 0px;
--secondary-text-color:
{% if is_state_attr('climate.master_bedroom', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.master_bedroom', 'hvac_action', 'cool') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light1
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light2
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light2
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light3
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light4
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
- type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb
view_layout:
grid-area: Light5
layout: grid
icon_color: '#e82127'
fill_container: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 0rem;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 0rem;
}
layout:
grid-template-columns: >-
minmax(20px, 60px) minmax(20px, 60px) minmax(20px, 60px)
minmax(20px, 60px) minmax(20px, 60px) minmax(20px, 60px)
minmax(20px, 60px) minmax(20px, 60px)
grid-template-rows: minmax(20px, 60px) minmax(20px, 60px) minmax(20px, 60px)
grid-template-areas: >
"RoomIcon RoomIcon RoomName RoomName RoomName RoomName
ClimateIcom ."
"RoomIcon RoomIcon TempStats TempStats TempStats TempStats
Motion ."
"Left Light1 Light2 Light3 Light4 Light5 Right ."
columns: 1
2 Likes
I’d love to see the code for just the bottom bar if it’s truly a well working sticky bar. Struggling to find one that actually sticks and overlays properly.
1 Like
I would love to see your full code. It looks amazing! Thank you for the inspiration and looking forward to look at your github 
@FedeL16 . Could you share the code for your persons card? I have 4 people and I would like to implement yours if it is ok. Thank you.
Hi Berkan, i have another question. how can i translate the conditions to Dutch?
secondary: |2-
{% set en = states('weather.home') %}
{% set conditions = ['clear-night:helder',
'cloudy:bewolkt',
'fog:mist',
'hail:hagel',
'lightning:bliksem',
'lightning-rainy:bliksem',
'partlycloudy:deels bewolkt',
'pouring,rainy:regen',
'snowy:sneeuw',
'snowy-rainy:natte sneeuw',
'sunny:zonnig',
'windy:wind',
'windy-variant:wind',
'exceptional:buitengewoon'] %}
this is what i try, but is not working.
Thanks in advance
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
content: '{{ now().strftime("%A, %-d %B") }}'
card_mod:
style: |
/* Style date & time */
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
- type: template
entity: input_boolean.notifiche
icon: mdi:bell
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
/* Notification indicator */
ha-card:after {
/* Turn on indicator if there is a notification */
{% set notifications = (expand(states.light.tutte_le_luci) | selectattr('state', 'eq', 'on') | list | count)
+ (expand(states.sensor.tapparelle_aperte) | selectattr( 'state', 'eq', 'open') | list | count)
+ (expand(states.media_player.tutte_le_tv) | selectattr( 'state', 'eq', 'on') | list | count)
+ states('sensor.prese_accese') | int %}
{% if notifications > 0 %}
content: "";
{% endif %}
/* Position & style notification */
position: absolute;
background: rgb(var(--rgb-red));
border-radius: 50%;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
}
alignment: justify
- type: conditional
conditions:
- entity: input_boolean.notifiche
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- null
- type: template
entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
icon: >-
{{ 'mdi:door-closed-lock' if is_state(entity, 'off') else
'mdi:lock-open' }}
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''red'' }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Front Door
content:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- camera_view: live
type: picture-glance
title: Entrata
entities: []
camera_image: camera.videocamera
- type: custom:mushroom-lock-card
entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
card_mod:
style: |
.content {
}
- type: conditional
conditions:
- entity: switch.tutte_le_prese
state: 'on'
chip:
type: template
icon: mdi:power-plug
entity: switch.tutte_le_prese
content: >
{{ expand(states.switch.tutte_le_prese) | selectattr('state',
'eq', 'on') | list | count }}
icon_color: yellow
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Prese Accese
content:
type: custom:auto-entities
filter:
include:
- group: switch.tutte_le_prese
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
- entity_id: switch.tutte_le_prese
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
/* Style & position All Lights button */
ha-card {
background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
}
:host {
margin: 0px 0px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: media_player.tutte_le_tv
state: 'on'
chip:
type: template
icon: mdi:television
entity: media_player.tutte_le_tv
content: >
{{ expand(states.media_player.tutte_le_tv) | selectattr('state',
'eq', 'on') | list | count }}
icon_color: green
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: TV Accese
content:
type: custom:auto-entities
filter:
include:
- group: media_player.tutte_le_tv
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
- entity_id: media_player.tutte_le_tv
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
/* Style & position All Lights button */
ha-card {
background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
}
:host {
margin: 0px 0px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: media_player.tutte_le_tv
state: open
chip:
type: template
entity: media_player.tutte_le_tv
content: >
{{ expand(states.media_player.tutte_le_tv) | selectattr('state',
'eq', 'on') | list | count }}
icon_color: green
icon: mdi:television
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: TV Accese
content:
type: custom:auto-entities
filter:
include:
- group: media_player.tutte_le_tv
state: open
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: state
icon_color: blue
tap_action:
action: toggle
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px
}
- type: conditional
conditions:
- entity: light.tutte_le_luci
state: 'on'
chip:
type: template
icon: mdi:lightbulb
entity: light.tutte_le_luci
content: >
{{ expand(states.light.tutte_le_luci) | selectattr('state', 'eq',
'on') | list | count }}
icon_color: amber
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: light.tutte_le_luci
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
- entity_id: light.tutte_le_luci
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
/* Style & position All Lights button */
ha-card {
background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
}
:host {
margin: 0px 0px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: 8px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: sensor.tapparelle_aperte
state: open
chip:
type: template
icon_color: blue
icon: mdi:window-shutter
entity: sensor.tapparelle_aperte
content: >
{{ expand(states.sensor.tapparelle_aperte) | selectattr('state',
'eq', 'open') | list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Tapparelle Aperte
content:
type: custom:auto-entities
filter:
include:
- group: sensor.tapparelle_aperte
state: open
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: state
tap_action:
action: none
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: cover.tapparelle
state: open
chip:
type: template
entity: cover.tapparelle
content: >
{{ expand(states.cover.tapparelle) | selectattr('state', 'eq',
'open') | list | count }}
icon_color: blue
icon: mdi:window-shutter-open
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Tapparelle Aperte
content:
type: custom:auto-entities
filter:
include:
- group: cover.tapparelle
state: open
options:
type: custom:mushroom-cover-card
layout: horizontal
secondary_info: state
icon: mdi:window-shutter
icon_color: blue
show_position_control: true
tap_action:
action: toggle
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: 8px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: sensor.battery_low
state_not: '0'
chip:
type: template
entity: sensor.battery_low
content: |
{{ states(config.entity) | int }}
icon_color: red
icon: mdi:battery-alert
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Batterie Scariche
content:
type: custom:auto-entities
filter:
include:
- attributes:
device_class: battery
state: < 30
options:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: >
{% set battery_level = (states(entity) | int / 10)
| round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: horizontal
tap_action:
action: none
badge_icon: >-
{{ 'mdi:exclamation-thick' if states(entity) | int
< 10 }}
badge_color: red
exclude: null
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: sensor.prese_accese
state: 'on'
chip:
type: entity
entity: sensor.prese_accese
content: >
{{ expand(states.sensor.prese_accese) | selectattr('state', 'eq',
'on') | list | count }}
icon_color: blue
icon: mdi:power-plug
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Prese Accese
content:
type: custom:auto-entities
filter:
include:
- group: sensor.prese_accese
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: state
icon_color: yellow
tap_action:
action: toggle
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
alignment: end
card_mod:
style: |
/* Set margins on notification chips */
ha-card {
margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
transition: all 0s;
}
card_mod:
style: |
/* Remove styling from top card with chips */
ha-card {
/* Allow pseudo elements to display outside card */
overflow: visible !important;
/* Remove gap at top of card */
margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 4;
top: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: absolute;
top: 0px;
/* Adjust height when notifications visible */
height: {{ '104px' if is_state('input_boolean.menuconsumi', 'on') else '60px' }};
/* Set width to match */
width: 100%;
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
/* Center element on page */
left: 50%;
transform: translateX(-50%);
/* Position between chips and background pseudo elemnt */
z-index: -1;
/* Match background to main card */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
}
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
/* Position & size card behind chips */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
/* Adjust width to account for border */
width: 100%;
/* Position card at back */
z-index: -1;
/* Blur content behind card */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Adjust opacity of card */
background: rgba(var(--rgb-card-background-color), 0.8);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
//box-shadow: var(--ha-card-box-shadow);
box-shadow: 30px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #
Like that:
{% set weather = {
'clear-night': "açık-gece",
'cloudy': "bulutlu",
'exceptional': "olağanüstü 🌞",
'fog': "sisli",
'hail': "dolu",
'lightning': "şimşek 🌩",
'lightning-rainy': "şimşek ve yağışlı ⛈",
'partlycloudy': "parçalı bulutlu ⛅",
'pouring': "sağanak yağışlı ☔",
'rainy': "yağmurlu ☔",
'snowy': "kar ☃️",
'snowy-rainy': "karla karışık yağmurlu",
'sunny': "güneşli ☀️",
'windy': "rüzgarlı 💨",
'windy-variant': "rüzgar varyantlı 💨"
} %}
Thanks, do i put that on line 154?
@NovaG @Vasco @bedar89 I have uploaded my config to github:
Just the home and devices view for now in terms of dashboard, will add the rest of the views later. Added automations.yaml and scripts.yaml too. Feel free to comment, do suggestions etc!
@burg93 Yes, the bottom navigation bar works 
Credits belong to @theandouz (post). You can find it in the decluttering templates as bottom-nav but of course it also works without the decluttering template.
5 Likes
Sorry I didn’t get that. Which code do you mean by 154 ?
Sorry, but where do i put this code?
It’s not showing the frog images.
I want to use the wind direction map. I have a sensor sensor.wind_direction. The sensor shows the degree. Code but it doesn’t work
please help
type: custom:mushroom-template-card
entities:
- sensor.wind_direction
card_mod:
style: |
ha-card {
background-color: transparent;
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
}
content_template: |
<ha-icon
icon="mdi:arrow-up-bold"
style="transform: rotate({{ states['sensor.wind_direction'].state }}deg);"
></ha-icon>
Found already what the issue is. In which config file i have to configure the template?
Hello everyone!
I am almost happy with my 3D printing front end.
Unfortunately the 2 buttons for pause and stop are not working. Can anyone tell me what I have done wrong?
Code
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 4
cards:
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.ams_tray_1'',''type'') }}'
secondary: ''
icon: mdi:circle
tap_action:
action: more-info
hold_action:
action: more-info
icon_color: |-
{% if state_attr('sensor.ams_tray_1','empty') == false %}
{{ state_attr('sensor.ams_tray_1','color') }}
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: false
entity: sensor.ams_tray_1
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 50px;
{% if state_attr('sensor.ams_tray_1','active') == true %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.ams_tray_2'',''type'') }}'
secondary: ''
icon: mdi:circle
tap_action:
action: more-info
hold_action:
action: more-info
icon_color: |-
{% if state_attr('sensor.ams_tray_2','empty') == false %}
{{ state_attr('sensor.ams_tray_2','color') }}
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: false
entity: sensor.ams_tray_2
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 50px;
{% if state_attr('sensor.ams_tray_2','active') == true %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.ams_tray_3'',''type'') }}'
secondary: ''
icon: mdi:circle
tap_action:
action: more-info
hold_action:
action: more-info
icon_color: |-
{% if state_attr('sensor.ams_tray_3','empty') == false %}
{{ state_attr('sensor.ams_tray_3','color') }}
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: false
entity: sensor.ams_tray_3
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 50px;
{% if state_attr('sensor.ams_tray_3','active') == true %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.ams_tray_4'',''type'') }}'
secondary: ''
icon: mdi:circle
tap_action:
action: more-info
hold_action:
action: more-info
icon_color: |-
{% if state_attr('sensor.ams_tray_4','empty') == false %}
{{ state_attr('sensor.ams_tray_4','color') }}
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: false
entity: sensor.ams_tray_4
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 50px;
{% if state_attr('sensor.ams_tray_4','active') == true %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
Code
type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bambulab X1C
secondary: |-
{% set status = states('sensor.y1_print_status') %}
{% if is_state('sensor.y1_print_status','running') %}
{{ (states("sensor.y1_print_progress") |float ) | round(0) }}% |
{% if status == 'finish' %} Fertig {% endif %}
{% if status == 'running' %} Drucken {% endif %}
{% if status == 'idle' %} Standby {% endif %}
{% if status == 'pause' %} Pause {% endif %}
{% if status == 'failed' %} Fehler {% endif %}
{% if status == 'prepair' %} Vorbereiten {% endif %}
{% else %}
{% if status == 'finish' %} Fertig {% endif %}
{% if status == 'running' %} Drucken {% endif %}
{% if status == 'idle' %} Standby {% endif %}
{% if status == 'pause' %} Pause {% endif %}
{% if status == 'failed' %} Fehler {% endif %}
{% if status == 'prepair' %} Vorbereiten {% endif %}
{% endif %}
icon: mdi:printer-3d-nozzle
icon_color: |-
{% if is_state('sensor.y1_print_status','running') %}
blue
{% endif %}
badge_color: red
badge_icon: null
entity: light.y1_chamber_light
collapsible_controls: true
tap_action:
action: none
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
{% if is_state('sensor.y1_print_status','running') %}
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(rgb(var(--rgb-blue)) {{ states('sensor.y1_print_progress') }}% 0%,
var(--card-background-color) 0% 100%);
{% endif %}
z-index: 1;
}
.shape:after {
{% if is_state('sensor.y1_print_status','running') %}
content: '';
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
{% endif %}
}
.: |
mushroom-state-info {
z-index: 1;
}
mushroom-badge-icon {
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: button.y1_pause_printing
icon_color: white
icon: mdi:pause
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-grey' }}), 0.7);
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.y1_stop_printing
icon_color: white
icon: mdi:alert-octagon
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' }}), 1);
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.y1_nozzle_temperature
icon: mdi:printer-3d-nozzle-heat
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-grey), 0.2)
}
- type: entity
entity: sensor.y1_bed_temperature
icon: mdi:heating-coil
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-grey), 0.2)
}
- type: template
content: >-
{% set ct = states('sensor.y1_remaining_time') | int %}
{{ (ct | float // 60) | round(0) }}h {{ (ct | float % 60) | round(0)
}}m
icon: mdi:alarm
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-grey), 0.2)
}
Try:
type: custom:mushroom-template-card
entity: sensor.wind_direction
icon: mdi:arrow-up-bold
card_mod:
style: |
ha-card {
background-color: transparent;
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
rotate: 90
}
ha-state-icon {
transform: rotate({{ states['sensor.wind_direction'].state }}deg);
}
Has anyone tried to restyle the basic more-info windows using card_mod to look more like mushroom? Can you please share your code?
bottom-nav:
dynamic or static menu?
You need to use conditions for that.
For example in my code at line 153
You can use it like this
secondary: |
{% if is_state('weather.forecast_home', 'partlycloudy') %}
deels bewolkt
{% elif is_state('weather.forecast_home', 'sunny') %}
zonnig
{% else %}
none
{% endif %}
And the result will look like this
and of course there are some other ways but this is the easiest.