Worked like a charm. Thank you!!
It’s not possible to use templates in call-service ?
type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.dehu_guilherme_fan
icon: |-
{% if 'Low' in state_attr(entity, 'preset_mode') %}
mdi:fan-speed-1
{% elif 'Medium' in state_attr(entity, 'preset_mode') %}
mdi:fan-speed-2
{% else %}
mdi:fan-speed-3
{% endif %}
icon_color: green
tap_action:
action: call-service
service: fan.set_preset_mode
target:
entity_id: fan.dehu_guilherme_fan
data:
preset_mode: |-
{% if 'Low' in state_attr('fan.dehu_guilherme_fan', 'preset_mode') %}
Medium
{% elif 'Medium' in state_attr('fan.dehu_guilherme_fan', 'preset_mode') %}
High
{% else %}
Low
{% endif %}
double_tap_action:
action: none
hold_action:
action: more-info
Thanks, do you know if its possible to have it as a secound badge?
I have tried a little myself, and have gotten this result:
What i need is the left badge to be able to place it on the opposite side as the other badge, and to change the icon and for it to work with the binary_sensor entoty.-
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Trappa
secondary: >-
{{ states('sensor.verisure_rv_soveromsgang_temp') }}°C |
{{ states('sensor.verisure_rv_soveromsgang_fukt') }} %
{{ 'green' if is_state('binary_sensor.aqara_motion_trappa_motion_1', 'on')
else 'black' }}
icon: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Trappa'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 1
%}
mdi:stairs
{% else %}
mdi:stairs
{% endif %}
icon_color: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Trappa'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
amber
{% else %}
disabled
{% endif %}
card_mod:
style: |
ha-state-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Trappa')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Trappa'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-amber), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
}
ha-state-icon::before {
content: '{{ expand(states.binary_sensor) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Trappa')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
position: start;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.binary_sensor)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Trappa'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-amber), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
--chip-icon-size: 0.6em;
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
entity: light.trappa_dz
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/trappa
multiline_secondary: false
layout: horizontal
fill_container: false
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: climate.trappa
icon_color: |-
{% if is_state(config.entity, 'heat') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.trappa_1
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.trappa_2
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.trappa_3
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: conditional
conditions:
- entity: binary_sensor.aqara_motion_trappa_motion_1
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:walk
card_mod:
style: |
ha-card {
--chip-icon-size: 0.6em;
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
alignment: end
Could someone please advise me how to put the chip icons closer together?
Here is my script:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dětský pokoj
secondary: '{{ states(''sensor.detsky_pokoj_netatmo_temperature'') | round(0) }} °C '
icon: mdi:teddy-bear
entity: light.vypinac_svetlo_detsky_pokoj
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0);
--mush-icon-size: 76px;
height: 66px;
margin-left: -22px !important;
}
ha-card {
border: unset;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.senzor_pohyb_detsky_pokoj_occupancy
state: 'on'
chip:
type: template
icon_color: cyan
icon: mdi:motion-sensor
card_mod:
style: |
ha-card {
animation: blink 3s linear infinite;
border: unset;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.senzor_okno_detsky_pokoj_contact
state: 'on'
chip:
type: template
icon_color: deep-orange
icon: mdi:window-open
card_mod:
style: |
ha-card {
border: unset;
}
- type: conditional
conditions:
- entity: cover.roleta_detsky_pokoj
state: closed
chip:
type: template
icon_color: blue-grey
icon: mdi:roller-shade-closed
card_mod:
style: |
ha-card {
border: unset;
}
- type: conditional
conditions:
- entity: input_boolean.vd_co2_detsky_pokoj
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:molecule-co2
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
border: unset;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.vypinac_svetlo_detsky_pokoj', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
border: unset;
}
How to use a fan that rotated proportionally to the entity’s rotation.
type: custom:button-card
state:
- value: 'on'
color: blue
spin: true
entity: sensor.panasonic_heat_pump_main_fan2_motor_speed
show_state: tfalse
icon: mdi:fan
You can use negative values in your --chip-spacing: -10px;
1 Like
this is not the button card thread. please take this question there.
to position it how you want change this in your ha-state-icon:before { section:
position: absolute;
top: -11%;
left: -11%;
You cant add an icon really. but you can pretend if you add a font pack from the below to HA. then you can choose from limited selection of icons by adding the description name of the icon.
content: 'swap_horiz';
position: absolute;
font-family: 'Material Icons';
not sure what you mean by
these are the fan speeds, not the button
Ok, but your question is still not related to mushroom cards. If you have a general question make a topic with a general question.
Thank you, i mean how do i change the icon to show mdi:walk whenever the motion sensor is triggered, and hide the badge whenever the motion sensor is off. 
Like this?
Binary sensor on:
And off:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Trappa
secondary: >-
{{ states('sensor.verisure_rv_soveromsgang_temp') }}°C |
{{ states('sensor.verisure_rv_soveromsgang_fukt') }} %
{{ 'green' if is_state('binary_sensor.aqara_motion_trappa_motion_1', 'on')
else 'black' }}
icon: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Trappa'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 1
%}
mdi:stairs
{% else %}
mdi:stairs
{% endif %}
icon_color: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Trappa'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
amber
{% else %}
disabled
{% endif %}
card_mod:
style: |
ha-state-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Trappa')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Trappa'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-amber), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
}
{% if states('binary_sensor.hallway_motion_sensor_occupancy') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-amber), 0.5);
color: rgba(var(--rgb-amber), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
entity: light.trappa_dz
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/trappa
multiline_secondary: false
layout: horizontal
fill_container: false
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: climate.trappa
icon_color: |-
{% if is_state(config.entity, 'heat') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.trappa_1
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.trappa_2
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.trappa_3
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: conditional
conditions:
- entity: binary_sensor.aqara_motion_trappa_motion_1
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:walk
card_mod:
style: |
ha-card {
--chip-icon-size: 0.6em;
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
alignment: end
3 Likes
Wow, thanks alot. 
Thats perfect.
Hello dimitri could you help me?
I would like to move to the left and the date justify on center.
Thank you
This is the card:
This is my code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
icon: mdi:toggle-switch
entity: input_boolean.nascondi_barra_superiore
card_mode:
style: |
/* Center element on page */
left: 0%;
transform: translateX(-50%);
- type: template
content: '{{ states.sensor.pretty_date.state }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Calendario Mensile di Pupetti & C.
content:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: calendar
entities:
- calendar.il_calendario_di_pupetti
- calendar.calendario_impegni
- calendar.calendario_della_casa
- type: custom:mushroom-template-card
primary: Aggiungi Evento
icon: mdi:calendar
icon_color: pink
tap_action:
action: navigate
navigation_path: /calendar
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:
- 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: 8px 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: 8px 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: Luci Accese
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: 8px 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, 0px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: rgba(var(--rgb-card-background-color), 0);
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, 0px));
/* 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: rgba(var(--rgb-card-background-color), 0);
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);
/* 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, #
This work ok for you? All was possible with just changing alignment of chip cards and adding config to the template chips. Did need to change the mode of your stack in card.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
icon: |-
{% if states('binary_sensor.lounge_back_door_contact') == 'on' %}
mdi:toggle-switch
{% else %}
mdi:test-tube
{% endif %}
icon_color: |-
{% if states('binary_sensor.lounge_back_door_contact') == 'on' %}
green
{% else %}
red
{% endif %}
entity: input_boolean.nascondi_barra_superiore
- type: template
content: '{{ states.sensor.pretty_date.state }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Calendario Mensile di Pupetti & C.
content:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: calendar
entities:
- calendar.il_calendario_di_pupetti
- calendar.calendario_impegni
- calendar.calendario_della_casa
- type: custom:mushroom-template-card
primary: Aggiungi Evento
icon: mdi:calendar
icon_color: pink
tap_action:
action: navigate
navigation_path: /calendar
card_mod:
style: |
/* Style date & time */
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
alignment: start
- type: conditional
conditions:
- entity: input_boolean.notifiche
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- 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: 8px 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: 8px 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: Luci Accese
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: 8px 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;
}
- type: custom:mushroom-chips-card
alignment: end
chips:
- 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;
}
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, 0px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: rgba(var(--rgb-card-background-color), 0);
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, 0px));
/* 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: rgba(var(--rgb-card-background-color), 0);
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);
/* 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, #
}
1 Like
How about this:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
icon: |-
{% if states('binary_sensor.lounge_back_door_contact') == 'on' %}
mdi:toggle-switch
{% else %}
mdi:test-tube
{% endif %}
icon_color: |-
{% if states('binary_sensor.lounge_back_door_contact') == 'on' %}
green
{% else %}
red
{% endif %}
entity: input_boolean.nascondi_barra_superiore
- type: template
content: '{{ states.sensor.pretty_date.state }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Calendario Mensile di Pupetti & C.
content:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: calendar
entities:
- calendar.il_calendario_di_pupetti
- calendar.calendario_impegni
- calendar.calendario_della_casa
- type: custom:mushroom-template-card
primary: Aggiungi Evento
icon: mdi:calendar
icon_color: pink
tap_action:
action: navigate
navigation_path: /calendar
card_mod:
style: |
/* Style date & time */
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
alignment: start
card_mod:
style: |
ha-card {
width: 200% !important;
}
- type: conditional
conditions:
- entity: input_boolean.notifiche
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- 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: 8px 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: 8px 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: Luci Accese
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: 8px 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;
}
- type: custom:mushroom-chips-card
alignment: end
chips:
- 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;
}
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, 0px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: rgba(var(--rgb-card-background-color), 0);
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, 0px));
/* 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: rgba(var(--rgb-card-background-color), 0);
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);
/* 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, #
}
Not really. Because we have split the chip card into 2 to achieve this layout.
Hey. I tried to use your card but it’s stay dark. What other custom cards Do i need to install?
Ive mushroom, card-mod and hui-Element. But i guess i missed something?