Please read the first post!
Best regards
Thekholm
1 Like
Conditional Chip card, if the lights are on, show how many lights are on and place them on the chip card. Powered by 
rhysb
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.office_all_lamps
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.office_all_lamps, states.light.master_bedroom_l)
| selectattr( 'state', 'eq', 'on') | list | count }}
entity: group.office_all_lamps
icon_color: amber
tap_action:
action: none
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
span {
position: relative;
right: 6px;
top: -6px;
width: 0px;
font-size: 10px;
margin-right: -5px;
}
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
span {
position: relative;
right: 6px;
top: -6px;
width: 0px;
font-size: 10px;
margin-right: -5px;
}
.: |
ha-card {
height: 36px !important;
}
15 Likes
Adding this to the vertical stack will anchor it to the bottom of the screen
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
11 Likes
Conditional Chip Card to show whether it is garbage or recycling today or tomorrow. Hidden other days.
You need the Garbage Collection integration in HACS: Garbage-Collection/README.md at master · bruxy70/Garbage-Collection · GitHub
When you create the helper, make sure to check “Verbose state” and in the code change sensor.garbage_recycling and sensor.trash_collection to your helper you create.
Code
type: conditional
conditions:
- entity: sensor.garbage_recycling
state: today
chip:
type: template
icon: mdi:recycle
icon_color: green
content: Today
type: conditional
conditions:
- entity: sensor.garbage_recycling
state: tomorrow
chip:
type: template
icon: mdi:recycle
icon_color: green
content: Tomorrow
type: conditional
conditions:
- entity: sensor.trash_collection
state: tomorrow
chip:
type: template
icon: mdi:trash-can
icon_color: grey
content: Tomorrow
type: conditional
conditions:
- entity: sensor.trash_collection
state: today
chip:
type: template
icon: mdi:trash-can
icon_color: grey
content: Today
19 Likes
Wow! This is great. Did some searching and also found below. Sticky back arrow at the left top of the page. Great for mobile use.
type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: home
alignment: justify
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
top: var(--header-height);
}
ha-card {
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
}
10 Likes
My Input-time Card: This card is used with automations to start an alarm, light or anything that you want to control inside of Mushroom! This is very handy and a nice looking card.
This is the same card but with and without background on the buttons. This Card is done by ArenaCloser, so special thanks to him, THANKS! I just changed the the card to fit my needs.
This one is a little tricky to get right, look at the code and also read ArenaCloser input on the Mushroom topic.
ArenaCloser
What you need is the following;
- DateTime Helper (time only).
- One script for the plus button.
Plus Script:
service: input_datetime.set_datetime
data:
time: >-
{{as_timestamp(as_datetime(state_attr('input_datetime.mushroom','timestamp'))
+ timedelta(minutes=+15))| timestamp_custom('%H:%M', false) }}
target:
entity_id: input_datetime.mushroom
- One script for the minus button.
Minus Script:
service: input_datetime.set_datetime
data:
time: >-
{{as_timestamp(as_datetime(state_attr('input_datetime.mushroom','timestamp'))
+ timedelta(minutes=-15))| timestamp_custom('%H:%M', false) }}
target:
entity_id: input_datetime.mushroom
- One automation (to turn on/or do something).
Simple Automation:
alias: Mushroom - Datetime Auto
description: ""
trigger:
- platform: time
at: input_datetime.mushroom
condition: []
action:
- service: light.turn_on
data: {}
target:
entity_id: light.sovrum
mode: single
- The code for the card (two cards in a grid)
DateTime Card:
square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Väckning
secondary: |-
{% if is_state('automation.mushroom_datetime_auto', 'on') %}
På
{% else %}
Av
{% endif %}
icon: mdi:alarm
entity: ''
icon_color: |-
{% if is_state('automation.mushroom_datetime_auto', 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.mushroom_datetime_auto
hold_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 221
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, 0px 0px 0px)
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:minus
tap_action:
action: call-service
service: script.mushroom_datetime_minus
- type: template
entity: input_datetime.mushroom
content: >-
{{(state_attr('input_datetime.mushroom','timestamp')) |
timestamp_custom('%H:%M', false) }}
- type: template
icon: mdi:plus
tap_action:
action: call-service
service: script.mushroom_datetime_plus
alignment: center
card_mod:
style: |
ha-card {
margin: -2px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-border-width: 0;
--chip-border-radius: 12px;
--chip-height: 40px;
--chip-padding: 12px;
--chip-spacing: 1px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Väckning
secondary: |-
{% if is_state('automation.mushroom_datetime_auto', 'on') %}
På
{% else %}
Av
{% endif %}
icon: mdi:alarm
entity: ''
icon_color: |-
{% if is_state('automation.mushroom_datetime_auto', 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.mushroom_datetime_auto
hold_action:
action: more-info
card_mod: null
style: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-disabled), 0.2);
margin: 15px 0px -12px;
}
- type: custom:layout-card
layout_type: masonry
layout:
width: 221
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, 0px 0px 0px)
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:minus
tap_action:
action: call-service
service: script.mushroom_datetime_minus
- type: template
entity: input_datetime.mushroom
content: >-
{{(state_attr('input_datetime.mushroom','timestamp')) |
timestamp_custom('%H:%M', false) }}
- type: template
icon: mdi:plus
tap_action:
action: call-service
service: script.mushroom_datetime_plus
alignment: center
card_mod:
style: |
ha-card {
margin: -1px 0px 5px;
--chip-border-width: 0;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 10px;
--chip-spacing: 1px;
}
17 Likes
How do I get 3 lights in one row. somtinhing with vertical stack card and colums? Can you post the code of lights also
Hello,
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: entity
entity: sensor.office_motion_sensor_temperature
icon_color: green
- type: conditional
conditions:
- entity: binary_sensor.office_right_window_sensor
state: 'on'
chip:
type: entity
entity: binary_sensor.office_right_window_sensor
icon_color: red
icon: mdi:window-open-variant
- type: conditional
conditions:
- entity: binary_sensor.office_motion_sensor_motion
state: 'on'
chip:
type: entity
entity: binary_sensor.office_motion_sensor_motion
icon_color: red
content_info: none
- type: conditional
conditions:
- entity: group.office_all_lamps
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.office_all_lamps,) | selectattr( 'state',
'eq', 'on') | list | count }}
entity: group.office_all_lamps
icon_color: amber
tap_action:
action: none
alignment: start
- square: false
columns: 3
type: grid
title: Lights
cards:
- type: custom:mushroom-light-card
entity: light.table_lamp_1
use_light_color: true
show_brightness_control: true
name: Work
- type: custom:mushroom-light-card
entity: light.table_lamps_office
use_light_color: true
show_brightness_control: true
icon: hue:table-shade
name: Table
- type: custom:mushroom-light-card
entity: light.office_all_lamps
show_brightness_control: true
use_light_color: true
icon: mdi:lightbulb-group-outline
name: All Lamp
1 Like
This is amazing.
Any way to identify actual page and highlight on navigation bar?
1 Like
Just change the background of the respective icon for each individual page
2 Likes
This is my Apple-inspired overview for the current fuel prices.
It uses this integration in HACS (for The Netherlands): GitHub - metbril/home-assistant-brandstofprijzen: Home Assistant component for fuel prices from United Consumers
Code
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.brandstofprijs_euro95
primary: Euro 95
secondary: ''
icon: mdi:currency-eur
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.brandstofprijs_euro95
primary: '{{states(entity)}}'
secondary: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 2px -6px 0px;
box-shadow: none;
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 0px 0px 66px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.brandstofprijs_super
primary: Super
secondary: ''
icon: mdi:engine
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.brandstofprijs_super
primary: '{{states(entity)}}'
secondary: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 2px -6px 0px;
box-shadow: none;
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 0px 0px 66px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.brandstofprijs_diesel
primary: Diesel
secondary: ''
icon: mdi:gas-station
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.brandstofprijs_diesel
primary: '{{states(entity)}}'
secondary: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 2px -6px 0px;
box-shadow: none;
}
5 Likes
i´ve added it, still it doesn´t stick to the bottom. is there a way to move it all the way down or do i have to so it with empty cards?`
3 Likes
type: custom:gap-card
height: 1000
throw this in the middle of your screen
3 Likes
Your page needs to be scrollable so as @alexandrechoske said adding a gap card before the nav bar will work.
Also simplified the code for the nav bar a little
Sticky Nav Bar
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: home
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
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
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
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: 15px;
margin: 0px -8px -10px -8px;
border-radius: 0px;
}
14 Likes
i just modified the ios-tapbar-theme from minimalist ui to match it for my needs.
---
ios-tapbar:
# version 1.0.1
# By LRvdLinden
# Journal
state-icon-color: "rgb(var(--color-theme))"
border-radius: "20px"
ha-card-border-radius: "var(--border-radius)"
ha-card-border-width: 0
error-color: "var(--google-red)"
warning-color: "var(--google-yellow)"
success-color: "var(--google-green)"
info-color: "var(--google-blue)"
divider-color: "rgba(var(--color-theme),.12)"
accent-color: "var(--google-yellow)"
card-mod-theme: "ios-tapbar"
card-mod-root: |
app-toolbar {
display: none;
}
header-height: "58px"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
# Move navbar
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
app-toolbar {
padding-right: 0px;
padding-left: 0px;
}
}
ha-app-layout{
transform: initial;
padding: 0 !important;
margin: 0 !important;
width: 100%;
height: 100% !important;
}
app-header {
top: auto;
bottom: 0;
box-shadow: var(--footer-shadow);
position: fixed;
height: var(--header-height) !important;
}
app-toolbar {
height: var(--header-height) !important;
padding: 10px 10px !important;
background: var( --ha-card-background, var(--card-background-color) );
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
--mdc-icon-size: 24px;
display: flex;
justify-content: space-between;
padding: 10px;
margin-top: 15px;
height:var(--header-height) !important;
}
paper-tab[aria-selected=true] {
color: var(--google-blue);
}
paper-tab {
color: var(--header-all-tabs-color);
border-radius: 5px;
height: 32px;
padding: 0 20px;
}
# Color themes
modes:
light:
# main interface colors
primary-color: "#434343"
google-red: "#F54436"
google-green: "#01C852"
google-yellow: "#FF9101"
google-blue: "#3D5AFE"
google-violet: "#661FFF"
google-grey: "#BBBBBB"
color-red: "245, 68, 54"
color-green: "1, 200, 82"
color-yellow: "255, 145, 1"
color-blue: "61, 90, 254"
color-purple: "102, 31, 255"
color-grey: "187, 187, 187"
color-pink: "233, 30, 99"
color-theme: "51,51,51"
color-background-yellow: "250, 250, 250"
color-background-blue: "250, 250, 250"
color-background-green: "250, 250, 250"
color-background-red: "250, 250, 250"
color-background-pink: "250, 250, 250"
color-background-purple: "250, 250, 250"
color-yellow-text: "var(--primary-text-color)"
color-blue-text: "var(--primary-text-color)"
color-green-text: "var(--primary-text-color)"
color-red-text: "var(--primary-text-color)"
color-pink-text: "var(--primary-text-color)"
color-purple-text: "var(--primary-text-color)"
opacity-bg: "1"
# Header / Footer
header-active-tab-color: "rgb(var(--color-blue))"
header-active-tab-bg-color: "rgba(var(--color-blue), .3)"
header-all-tabs-color: "var(--paper-item-icon-color)"
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
# background and sidebar
card-background-color: "#FAFAFA"
primary-background-color: "#EFEFEF"
secondary-background-color: "#EFEFEF"
# text
primary-text-color: "#212121"
# slider
slider-color: "rgb(var(--google-blue))"
slider-bar-color: "rgba(var(--google-blue),0.38)"
# cards
box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.16)"
ha-card-box-shadow: "var(--box-shadow)"
# sidebar
sidebar-selected-text-color: "rgb(var(--color-blue))"
sidebar-selected-icon-color: "rgb(var(--color-blue))"
sidebar-text-color: "#80868b"
# switch
switch-checked-color: "rgb(var(--color-blue))"
# media player
mini-media-player-accent-color: "rgb(var(--color-blue))"
dark:
# main interface colors
primary-color: "#89B3F8"
google-red: "#F18B82"
google-green: "#80C994"
google-yellow: "#FCD663"
google-blue: "#2196F3"
google-violet: "#BB86FC"
google-grey: "#BBBBBB"
color-red: "241, 139, 130"
color-green: "128, 201, 148"
color-yellow: "252, 214, 99"
color-blue: "137, 179, 248"
color-theme: "221,221,221"
color-purple: "102, 31, 255"
color-grey: "187, 187, 187"
color-pink: "233, 30, 99"
color-amber: "255, 145, 1"
color-background-yellow: "var(--color-yellow)"
color-background-blue: "var(--color-blue)"
color-background-green: "var(--color-green)"
color-background-red: "var(--color-red)"
color-background-pink: "var(--color-pink)"
color-background-purple: "var(--color-purple)"
color-yellow-text: "var(--color-yellow)"
color-blue-text: "var(--color-blue)"
color-green-text: "var(--color-green)"
color-red-text: "var(--color-red)"
color-pink-text: "var(--color-pink)"
color-purple-text: "var(--color-purple)"
opacity-bg: "0.1"
# Header / Footer
header-active-tab-color: "rgb(var(--color-amber))"
header-active-tab-bg-color: "rgba(var(--color-amber), .3)"
header-all-tabs-color: "var(--paper-item-icon-color)"
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
# background and sidebar
card-background-color: "#1D1D1D"
primary-background-color: "#121212"
secondary-background-color: "#121212"
# text
primary-text-color: "#DDDDDD"
# floating button text color
mdc-theme-on-secondary: "var(--card-background-color)"
# Sidebar
sidebar-selected-text-color: "rgb(var(--color-amber))"
sidebar-selected-icon-color: "rgb(var(--color-amber))"
# Slider
slider-color: "rgb(var(--color-blue))"
slider-bar-color: "rgba(var(--color-blue),0.38)"
# card
box-shadow: "none"
# media player
mini-media-player-accent-color: "var(--google-blue)"
# Journal
state-icon-color: "rgb(var(--color-theme))"
9 Likes
these modifications are only on theme?
I mean, the code is the same but theme modify only the bar?
nah it also changes a few colors of HA itself. mushroom shouldn´t be affected tho.
1 Like
Playing Around with with Mushroom - Many things to do and clean up some code. But here is Version 0.03 for you if interested 
type: custom:vertical-stack-in-card
title: Wohnzimmer
style: |
.card-header {
padding: 6px 16px 2px !important;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temp_xx_humidity
- type: entity
entity: sensor.temp_xx_temperature
alignment: end
style: |
.chip-container {
padding-right: 14px;
margin-top: -40px
}
- type: custom:mushroom-light-card
entity: light.lampe_xx
show_brightness_control: true
collapsible_controls: true
layout: horizontal
name: Lampe Links
- type: custom:mushroom-light-card
entity: light.lampe_xx
show_brightness_control: true
collapsible_controls: true
layout: horizontal
name: Lampe Rechts
- type: custom:mushroom-media-player-card
entity: media_player.xx
layout: horizontal
show_volume_level: false
media_controls:
- on_off
volume_controls:
- volume_set
icon: mdi:television
name: Sony Fernseher
use_media_info: true
- type: custom:mushroom-climate-card
entity: climate.heizung_xx
layout: horizontal
fill_container: true
show_temperature_control: true
collapsible_controls: false
name: Thermostate
tap_action:
action: more-info
- type: custom:mushroom-chips-card
alignment: end
style: |
ha-card {
z-index:9;
}
.chip-container {
padding: 14px;
}
chips:
- type: template
entity: binary_sensor
icon: >
{% set state=states('binary_sensor.heizung_xx_window_open') %}
{% if state=='off' %}
mdi:window-closed-variant
{% elif state=='on' %}
mdi:window-open-variant
{% endif %}
icon_color: >
{% set state=states('binary_sensor.heizung_xx_window_open') %}
{% if state=='on' %}
orange
{% endif %}
content: >
{% set state=states('binary_sensor.heizung_xx_window_open') %}
{% if state=='off' %}
Fenster geschlossen!
{% elif state=='on' %}
Fenster offen!
{% endif %}
- type: template
entity: switch.heizung_xx_window_open_force
content: >
{% set state=states('switch.heizung_xx_window_open_force') %}
{% if state=='on' %}
Lüften Aktiv!
{% elif state=='off' %}
Lüften!
{% endif %}
icon: >
{% set state=states('switch.heizung_xx_window_open_force') %}
{% if state=='on' %}
mdi:window-open-variant
{% elif state=='off' %}
mdi:window-closed-variant
{% endif %}
icon_color: >
{% set state=states('switch.heizung_xx_window_open_force') %}
{% if state=='on' %}
orange
{% endif %}
- type: template
entity: climate.heizung_xx
icon: >
{% set battery_level = state_attr('switch.heizung_xx_window_open_force','battery')|int('unknown') %}
{% set battery_round = (battery_level|int / 10)|int * 10 %}
{% if battery_level == 'unknown' %}
mdi:battery-unknown
{% else %}
{% if battery_round >= 100 %}
mdi:battery
{% elif battery_round > 0 %}
mdi:battery-{{ battery_round }}
{% else %}
mdi:battery-alert
{% endif %}
{% endif %}
content: '{{ state_attr(''climate.heizung_xx'',''battery'') }} %'
name: Battery
tap_action:
action: more-info
- type: custom:mini-graph-card
entities:
- sensor.temp_xx
animate: true
hour24: true
font_size: 75
line_width: 4
points_per_hour: 1
style: |
ha-card {
margin-top: -67px;
z-index: 1;
}
show:
name: false
icon: false
legend: false
labels: true
19 Likes
This is my first card of my dashboard:
home battery status, with percentage and solar input
Device status, from the left:
Link to the security page
doors status
windows status
lights status
Thermostat status
heated towel rails status
each of the status button light orange when something is on, if you touch one it open a popup with the list of entities on.
code:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Utilità
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 45% 55%
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-entity-card
entity: sensor.powerwall_solar_now
name: Batteria
icon: mdi:home-battery-outline
icon_color: teal
icon_type: icon
tap_action:
action: navigate
navigation_path: energia
- type: custom:bar-card
entity: sensor.powerwall_charge
severity:
- from: '0'
color: orange
to: '25'
- from: '26'
to: '49'
color: orange
- from: '50'
to: '100'
color: teal
name: ' '
height: 42px
min: '0'
max: '100'
entity_row: true
color: teal
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
- square: false
columns: 6
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:home-alert
tap_action:
action: navigate
navigation_path: sicurezza
icon_color: orange
multiline_secondary: true
badge_icon: mdi:link
badge_color: orange
fill_container: false
layout: horizontal
- type: custom:mushroom-entity-card
entity: binary_sensor.porte
primary_info: none
secondary_info: none
layout: vertical
icon_color: orange
fill_container: false
name: Porte
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Porte aperte
content:
type: custom:auto-entities
filter:
include:
- group: binary_sensor.porte
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
- type: custom:mushroom-entity-card
entity: binary_sensor.finestre
primary_info: none
secondary_info: none
layout: vertical
icon_color: orange
fill_container: false
name: Finestre
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Finestre aperte
content:
type: custom:auto-entities
filter:
include:
- group: binary_sensor.finestre
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
- type: custom:mushroom-entity-card
entity: light.luci
primary_info: none
secondary_info: none
layout: vertical
icon_color: orange
hold_action:
action: more-info
double_tap_action:
action: more-info
fill_container: false
name: Luci
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.luci
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
- type: custom:mushroom-entity-card
entity: binary_sensor.stato_termostati
primary_info: none
secondary_info: none
layout: vertical
icon: mdi:thermostat
icon_color: orange
fill_container: false
name: Termostati
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Termostati accesi
content:
type: custom:auto-entities
filter:
include:
- domain: climate
integration: knx
options:
type: custom:mushroom-climate-card
show_temperature_control: true
layout: horizontal
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude:
- attributes:
hvac_action: idle
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
- type: custom:mushroom-entity-card
entity: switch.termobagno
primary_info: none
secondary_info: none
icon_color: orange
fill_container: false
name: Termobagno
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Termobagno accesi
content:
type: custom:auto-entities
filter:
include:
- group: switch.termobagno
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude:
- attributes:
hvac_action: idle
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
EDIT:
just made the battery card more mushroom like:
added the badge when is charging, made the bar looking more like a mushroom card
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 45% 55%
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.powerwall_charge
primary: Batteria
secondary: '{{states(''sensor.powerwall_charge'') }}%'
icon: mdi:home-battery-outline
icon_color: teal
icon_type: icon
badge_icon: "{% if is_state('binary_sensor.powerwall_charging','on') %}\n\_\_mdi:arrow-up-bold\n{% endif %}"
badge_color: "{% if is_state('binary_sensor.powerwall_charging','on') %}\n\_\_teal\n{% endif %}"
tap_action:
action: navigate
navigation_path: energia
- type: custom:bar-card
entity: sensor.powerwall_charge
severity:
- from: '0'
color: gray
to: '0'
- from: '1'
to: '49'
color: teal
- from: '50'
to: '100'
color: teal
name: ' '
height: 42px
min: '0'
max: '100'
entity_row: true
color: teal
positions:
icon: 'off'
indicator: 'off'
value: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
16 Likes
i applied your theme now, but the slider for input_number disappeared hahaha
i did not tested on another helpers tho…
do you know the code to set a color for it?