Many thanks that works!! The problem was indeed on ios devices.
Thanks for sharing!
1 Like
Could you share the welcome card? With the dropdown. 
did anybody try to merge the schedule card (or something similar for schedullling) with Mushroom cards ?
I know I could probably Template card, but I would like to keep scheduler card functionalliities
use case ?
Lookking for a nice way to schedule / automate turning off: TV, Decoder, Soundbar, and XBOX
2 Likes
Please, your yaml for the First floor cards (eg. Foyer) and the Jeff/Scenes card?
Thanks a lot in advance. Still not satisfied with room cards, even though I’m using Minimalistic UI Room Cards just for that and they are great…
That is done in the template. This line, select('le', 30) | select('ge', 0), returns all sensors that have a battery level of less than or equal to (le) 30 and greater than or equal to (ge) 0.
Do you want to change the whole card color, icon and slider, or just the icon?
1 Like
It’s kind of some nasty code that could probably be cleaned up but it works lol. You may have to adjust margins.
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: null
secondary: null
icon: mdi:door
fill_container: true
layout: horizontal
multiline_secondary: false
badge_icon: |-
{% set bl = states('sensor.door_lock_battery_level_2') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
badge_color: |-
{% set bl = states('sensor.door_lock_battery_level_2') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} disabled
{% endif %}
tap_action:
action: navigate
navigation_path: foyer
icon_color: deep-purple
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
background: #1f1f1f;
--mush-icon-size: 74px;
height: 66px;
margin-left: -26px !important;
}
mushroom-badge-icon {
left: 178px;
top: 17px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Foyer
secondary: null
icon: null
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: foyer
icon_color: deep-purple
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
background: #1f1f1f;
margin-top: 0px !important;
margin-left: -20px !important;
margin-bottom: -18px !important;
}
- type: custom:mushroom-light-card
entity: light.foyer_lights
fill_container: true
show_brightness_control: true
icon_type: none
primary_info: none
secondary_info: none
use_light_color: true
layout: horizontal
card_mod:
style: |
:host {
background: #1f1f1f;
margin-left: -22px !important;
margin-bottom: -18px !important;
}
ha-card {
--icon-size: 0px;
--control-height: 16px;
--control-top: 16px;
--control-border-radius: 5px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.foyer_lights
state: 'on'
chip:
type: entity
entity: light.foyer_lights
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.foyer_lights
content_info: none
icon: mdi:lightbulb
- type: template
entity: lock.door_lock_2
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-variant
{% else %}
grey
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
disabled
{% elif state=='unlocked' %}
red
{% else %}
amber
{% endif %}
- type: template
entity: binary_sensor.front_door_sensor_access_control_window_door_is_open
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:door-open
{% elif state=='off' %}
mdi:door-closed
{% else %}
mdi:door
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
red
{% elif state=='off' %}
disabled
{% else %}
amber
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 6px;
margin-top: -5px
}
card_mod:
style: |
ha-card {
height: 100px;
background: #1a1a1a;
{% if is_state('light.foyer_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
14 Likes
so i would like as now the color of the icon goes to red and i would like when it is on that it goes to blue only the icon ?
It’s build using the css grid layout:
Thank you! I did not know this add-on. I’m going to try and see if I can get it all together.
ıts over 32000. Communıty doesn’t allow me to post the code. I will add it to my github page later and will share the link
So I have finally finished my RSS page and the mobile interface has been completed. I will share the video and code details in my github page later. I have added more then 15 sources to one single page. I can swipe through between different sources with a single click to the chips. It has also been categorized and every category has its own chips which leads to news sources. As far as I know this kind of a project has never been implemented before.
Before starting the mobile interface my goal was to implement smart life instead of smart home. For now I think I have accomplished this.
1 Like
It’s ok, i was able to replicate it, but it might be helpful for other though
One question, the home/away chips, how did you manage to get them line up? Mine are lined up when away, but all messed up when home lol 
I used css I can share the code from the begining until the end of that part.
type: custom:stack-in-card
square: false
columns: 1
cards:
- type: conditional
conditions:
- entity: input_boolean.ana_menu_chip
state: 'on'
card:
type: custom:swipe-card
parameters: null
spaceBetween: 8
scrollbar: null
hide: false
draggable: true
snapOnRelease: true
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: ''
icon: mdi:menu
tap_action:
action: call-service
service: input_boolean.turn_on
data: {}
target:
entity_id: input_boolean.kiosk_mode
double_tap_action:
action: call-service
service: input_boolean.turn_off
data: {}
target:
entity_id: input_boolean.kiosk_mode
- type: template
entity: binary_sensor.ewelink_ds01_19b22025_ias_zone
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lock
{% elif state=='on' %}
mdi:lock-open-variant
{% else %}
grey
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='off %}
green
{% elif state=='on' %}
red
{% else %}
grey
{% endif %}
- type: template
entity: group.allhouse
content: |
{{ states('sensor.open_light_total') }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lightbulb
{% elif state=='on' %}
mdi:lightbulb
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
grey
{% elif state=='on' %}
amber
{% else %}
grey
{% endif %}
tap_action:
action: navigate
navigation_path: devices
double_tap_action:
action: call-service
service: light.turn_off
data: {}
target:
entity_id: light.all_house_lights
- type: template
entity: switch.all_house_switches
content: |
{{ states('sensor.open_switch_total') }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:light-switch-off
{% elif state=='on' %}
mdi:light-switch
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
grey
{% elif state=='on' %}
amber
{% else %}
grey
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: call-service
service: switch.turn_off
data: {}
target:
entity_id: switch.all_house_switches
- type: alarm-control-panel
entity: alarm_control_panel.ha_alarm
tap_action:
action: navigate
navigation_path: alarm
- type: conditional
conditions:
- entity: input_boolean.zone_google_maps
state: 'off'
chip:
type: template
content: |
{{ states('sensor.google_ev_is') }} dk.
entity: sensor.google_ev_is
icon: mdi:map
icon_color: amber
double_tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID:
- this
title: Trafik
card:
type: vertical-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: vertical-stack
cards:
- type: iframe
url: >-
https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d96336.99948573063!2d28.9780563504497!3d41.01363228367648!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x14cac706417cc3d9%3A0x510da53686119327!2zw4dvbGFrIMSwc21haWwgU2suLCBTdWFkaXllLCAzNDc0MCBLYWTEsWvDtnkvxLBzdGFuYnVs!3m2!1d40.962209!2d29.0830187!4m5!1s0x14cab653d1296785%3A0x2af5a6a24d8d396a!2zR2F5cmV0dGVwZSwgWcSxbGTEsXogUG9zdGEgQ2QuLCBCZcWfaWt0YcWfL8Swc3RhbmJ1bA!3m2!1d41.065672299999996!2d29.008391099999997!5e0!3m2!1str!2str!4v1658418919304!5m2!1str!2str%22%20width=%22600%22%20height=%22450%22%20style=%22border:0;%22%20allowfullscreen=%22%22%20loading=%22lazy%22%20referrerpolicy=%22no-referrer-when-downgrade
title: Google Maps
aspect_ratio: 80%
tap_action:
action: call-service
service: script.turn_on
data: {}
target:
entity_id: script.browser_mode_pop_up_close
hold_action:
action: none
theme: Mushroom
tap_action:
action: more-info
- type: conditional
conditions:
- entity: input_boolean.zone_google_maps
state: 'on'
chip:
type: template
content: |
{{ states('sensor.google_is_ev') }} dk.
entity: sensor.google_ev_is
icon: mdi:map
icon_color: amber
double_tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID:
- this
title: Futbol
card:
type: vertical-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: vertical-stack
cards:
- type: iframe
url: >-
https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d96317.48438258945!2d28.966588200804775!3d41.02697580605618!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x14cab653d1296785%3A0x2af5a6a24d8d396a!2zR2F5cmV0dGVwZSwgWcSxbGTEsXogUG9zdGEgQ2QuLCBCZcWfaWt0YcWfL8Swc3RhbmJ1bA!3m2!1d41.065672299999996!2d29.008391099999997!4m5!1s0x14cac706417cc3d9%3A0x510da53686119327!2zw4dvbGFrIMSwc21haWwgU2suLCBTdWFkaXllLCAzNDc0MCBLYWTEsWvDtnkvxLBzdGFuYnVs!3m2!1d40.962209!2d29.0830187!5e0!3m2!1str!2str!4v1658419175388!5m2!1str!2str%22%20width=%22600%22%20height=%22450%22%20style=%22border:0;%22%20allowfullscreen=%22%22%20loading=%22lazy%22%20referrerpolicy=%22no-referrer-when-downgrade
title: Google Maps
aspect_ratio: 80%
tap_action:
action: call-service
service: script.turn_on
data: {}
target:
entity_id: script.browser_mode_pop_up_close
hold_action:
action: none
theme: Mushroom
alignment: justify
card_mod:
style: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-icon-size: 20px;
--chip-spacing: 2px;
margin-top: 5px;
padding-right: auto;
padding-top: 1px;
padding-left: auto;
padding-bottom: 1px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon_color: amber
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
hold_action:
action: none
- type: template
double_tap_action:
action: none
icon_color: amber
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: salon
hold_action:
action: none
- type: template
double_tap_action:
action: none
icon_color: amber
icon: mdi:laptop
tap_action:
action: navigate
navigation_path: ofis
hold_action:
action: none
- type: template
double_tap_action:
action: none
icon_color: amber
icon: mdi:bed
tap_action:
action: navigate
navigation_path: bedroom
hold_action:
action: none
- type: template
double_tap_action:
action: none
icon_color: green
icon: mdi:spotify
tap_action:
action: navigate
navigation_path: music
hold_action:
action: none
- type: template
double_tap_action:
action: none
icon_color: amber
icon: mdi:battery
tap_action:
action: navigate
navigation_path: batteries
hold_action:
action: none
alignment: justify
card_mod:
style: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-icon-size: 20px;
--chip-spacing: 2px;
margin-top: 5px;
padding-right: auto;
padding-top: 1px;
padding-left: auto;
padding-bottom: 1px;
}
- square: false
columns: 4
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.bedroom_klima
state: 'on'
chip:
type: template
entity: input_boolean.bedroom_klima
icon: mdi:snowflake-alert
icon_color: white
content: '{{ states(entity) }}'
tap_action:
action: more-info
alignment: justify
card_mod:
style:
div:
mushroom-template-chip$:
mushroom-chip: |
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.termosifon_dugme
state: 'on'
chip:
type: template
entity: input_boolean.termosifon_dugme
icon: mdi:water-thermometer-outline
icon_color: blue
content: '{{ states(entity) }}'
tap_action:
action: more-info
alignment: justify
card_mod:
style:
div:
mushroom-template-chip$:
mushroom-chip: |
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: media_player.fire_tv_192_168_1_86
state: playing
chip:
type: template
entity: media_player.fire_tv_192_168_1_86
icon: mdi:youtube
icon_color: red
content: '{{ states(entity) }}'
alignment: justify
card_mod:
style:
div:
mushroom-template-chip$:
mushroom-chip: |
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: -6px;
margin-bottom: -12px;
width: 400px
}
alignment: start
- type: custom:layout-card
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: markdown
content: |-
{% set time = now().hour %}
{% if (time >= 18) %}
İyi Geceler, {{user}}
{% elif (time >= 12) %}
Tünaydın, {{user}}
{% elif (time >= 5) %}
Günaydın, {{user}}
{% else %}
Merhaba, {{user}}!
{% endif %}
card_mod:
style: |
ha-markdown {
padding: 5px 0px 2px 0px !important;
font-size: 28px !important;
font-weight: normal !important;
line-height: 1.2 !important;
}
ha-card {
background-color: none;
box-shadow: 0px 0px;
}
- type: markdown
content: Bugün günlerden **{{ now().strftime('%d %B, %Y') }}**
card_mod:
style: |
ha-markdown {
padding: 0 0 10px 0px !important;
font-size: 14px !important;
font-weight: normal !important;
line-height: 1.4 !important;
}
ha-card {
background-color: none;
color: #9b9b9b;
box-shadow: 0px 0px;
}
card_mod:
style: |
ha-card {
background: transparent;
color: #e1e1e1;
box-shadow: 0px 0px;
width: 350px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.ali
state: saral
chip:
type: entity
entity: person.ali
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 12px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.ali
state_not: saral
chip:
type: entity
entity: person.ali
content_info: none
tap_action:
action: more-info
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.cavidan', 'not_saral') %}
--chip-background: rgba(var(--rgb-state-person-not-saral), 0.4);
{% elif is_state('person.cavidan', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 12px;
margin-bottom: 0px;
}
card_mod:
style: |
ha-card {
background-color: none;
color: #9b9b9b;
box-shadow: 0px 0px;
margin-left: 100px
}
alignment: end
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.cavidan
state: saral
chip:
type: entity
entity: person.cavidan
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 12px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.cavidan
state_not: saral
chip:
type: entity
entity: person.cavidan
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.cavidan', 'not_saral') %}
--chip-background: rgba(var(--rgb-state-person-not-saral), 0.4);
{% elif is_state('person.cavidan', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 12px;
margin-bottom: 0px;
}
alignment: end
card_mod:
style: |
ha-card {
background-color: none;
color: #9b9b9b;
box-shadow: 0px 0px;
margin-left: 75px
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.berkan_sezer
state: home
chip:
type: entity
entity: person.berkan_sezer
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 12px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.berkan_sezer
state_not: home
chip:
type: entity
entity: person.berkan_sezer
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.berkan_sezer', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.berkan_sezer', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 12px;
margin-bottom: 0px;
}
alignment: end
card_mod:
style: |
ha-card {
background-color: none;
color: #9b9b9b;
box-shadow: 0px 0px;
margin-right: 10px;
}
Thank you for the code, This is my issue,
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips: null
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: alarm-control-panel
entity: alarm_control_panel.verisure_alarm
content_info: none
name: Alarm
- type: conditional
conditions:
- entity: group.lights_on_count
state: 'on'
chip:
type: template
icon: mdi:lightbulb-group
content: >-
{{ expand(states.group.lights_on_count) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: group.lights_on_count
icon_color: amber
- type: template
entity: lock.hoveddor
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-variant
{% else %}
grey
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
green
{% elif state=='unlocked' %}
red
{% else %}
grey
{% endif %}
- type: template
entity: group.windows_open_count
content: >-
{{ expand(states.group.windows_open_count) | selectattr( 'state',
'eq', 'on') | list | count }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:window-closed-variant
{% elif state=='on' %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
green
{% elif state=='on' %}
red
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: conditional
conditions:
- entity: group.doors_open_count
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:door-open
content: >-
{{ expand(states.group.doors_open_count) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: group.doors_open_count
- type: template
entity: sensor.tibber_stromlast_hjemmet
content: >-
{{(states('sensor.tibber_stromlast_hjemmet')|float *
1/1000)|round(1)}}KWh
chip:
icon: mdi:lightning-bolt
icon_color: orange
card_mod:
style: |
:host {
--ha-card-background: var(--card-background-color);
}
- type: action
icon: mdi:dots-vertical
tap_action:
action: navigate
navigation_path: >-
https://ckpungoon7m9o0jyv969gdclrygt68x1.ui.nabu.casa/lovelace-panel/hjem?edit=1
hold_action:
action: none
double_tap_action:
action: navigate
navigation_path: /lovelace-panel/hjem
icon_color: white
alignment: justify
card_mod:
style: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.lights_on_count
state: 'on'
chip:
type: template
icon: mdi:lightbulb-group
content: >-
{{ expand(states.group.lights_on_count) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: group.lights_on_count
icon_color: amber
- type: conditional
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: markdown
content: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Hei, {{user}}
{% elif (time >= 12) %}
Hei, {{user}}
{% elif (time >= 5) %}
Hei, {{user}}
{% else %}
Hei, {{user}}!
{% endif %}
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10px !important;
font-size: 28px !important;
font-weight: normal !important;
line-height: 1.2 !important;
}
ha-card {
background-color: #111111;
color: #e1e1e1;
box-shadow: 0px 0px;
}
- type: markdown
content: Idag er det **{{ now().strftime('%d %B, %Y') }}**
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10px !important;
font-size: 14px !important;
font-weight: normal !important;
line-height: 1.4 !important;
}
ha-card {
background-color: #111111;
color: #9b9b9b;
box-shadow: 0px 0px;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.0);
color: #e1e1e1;
box-shadow: 0px 0px;
width: 350px
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.charlotte
state: home
chip:
type: entity
entity: person.charlotte
content_info: nam
use_entity_picture: true
square: false
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
- type: conditional
conditions:
- entity: person.charlotte
state_not: home
chip:
type: entity
entity: person.charlotte
content_info: none
use_entity_picture: true
square: false
card_mod:
style: |
ha-card {
{% if is_state('person.charlotte', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.cavidan', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 0px;
}
alignement: end
card_mod:
style: |
ha-card {
background-color: none;
color: #9b9b9b;
box-shadow: 0px 0px;
margin-left: 100px
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.tommy
state: home
chip:
type: entity
entity: person.tommy
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
- type: conditional
conditions:
- entity: person.tommy
state_not: home
chip:
type: entity
entity: person.tommy
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.berkan_sezer', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.berkan_sezer', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 12px;
margin-bottom: 0px;
}
alignment: end
card_mod:
style: |
ha-card {
background-color: none;
color: #9b9b9b;
box-shadow: 0px 0px;
margin-right: 10px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.benjamin
state: home
chip:
type: entity
entity: person.benjamin
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
- type: conditional
conditions:
- entity: person.benjamin
state_not: home
chip:
type: entity
entity: person.benjamin
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.benjamin', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.benjamin', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
alignment: end
card_mod:
style: |
ha-card {
margin: -57px 75px 0 0
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Hjem
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace-panel/hjem
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Lys
icon: mdi:lightbulb-group
icon_color: orange
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace-panel/lys
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Alarm
icon: mdi:shield
icon_color: grey
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace-panel/alarm
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Ungene
icon: mdi:face-man
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace-panel/ungene
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Rom
icon: mdi:sofa
layout: vertical
icon_color: brown
tap_action:
action: navigate
navigation_path: /lovelace-panel/rom
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.boolean_dashboard_welcome_dropdown
state: 'off'
chip:
type: weather
entity: weather.hjem
show_conditions: true
show_temperature: true
- type: conditional
conditions:
- entity: input_boolean.boolean_dashboard_welcome_dropdown
state: 'off'
chip:
type: entity
entity: sensor.moon
icon_color: yellow
- type: conditional
conditions:
- entity: input_boolean.boolean_dashboard_welcome_dropdown
state: 'off'
chip:
type: template
content: '{{state_attr(entity, ''current_temperature'')}} °F'
entity: sensor.verisure_rv_stua_fukt
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: -6px;
margin-bottom: -12px;
width: 400px
}
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.boolean_dashboard_welcome_dropdown
icon_color: disabled
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0px;
--chip-icon-size: 40px;
margin-right: -4px;
margin-bottom: -12px;
}
alignment: end
- type: conditional
conditions:
- entity: input_boolean.boolean_dashboard_welcome_dropdown
state: 'on'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Stua
icon: mdi:television
layout: vertical
icon_color: brown
tap_action:
action: navigate
navigation_path: /lovelace-panel/stua
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Kjøkken
icon: mdi:silverware-variant
layout: vertical
icon_color: purple
tap_action:
action: navigate
navigation_path: /lovelace-panel/kjokken
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: -5px;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Gang
icon: mdi:menu
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: /lovelace-panel/gang
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: -10px;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Vaskerom
icon: mdi:washing-machine
layout: vertical
icon_color: pink
tap_action:
action: navigate
navigation_path: /lovelace-panel/vaskerom
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: -15px;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:simple-weather-card
entity: ledig
name: ''
primary_info:
- wind_speed
- wind_bearing
- pressure
secondary_info:
- humidity
- precipitation_probability
- precipitation
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
padding: 0 28px 0 28px !important;
margin-left: 0px;
margin-right: 0px;
margin-top: 0;
margin-bottom: 0;
}
- type: grid
square: false
columns: 2
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Autolys
secondary: null
icon: mdi:home-lightbulb-outline
icon_color: blue
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:party-popper
icon_color: grey
layout: vertical
secondary: Benjamin
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.party
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:television
icon_color: grey
layout: vertical
secondary: Sebastian
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.chill
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:stairs
icon_color: grey
layout: vertical
secondary: Lillestua
tap_action:
action: call-service
service: input_boolean.turn_on
service_data: {}
target:
entity_id: input_boolean.god_natt
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: #1a1a1a;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Scener
secondary: Alle
icon: mdi:home-lightbulb-outline
icon_color: blue
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:party-popper
icon_color: grey
layout: vertical
secondary: Party
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.party
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:television
icon_color: grey
layout: vertical
secondary: Chill
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.chill
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:weather-night
icon_color: grey
layout: vertical
secondary: God Natt
tap_action:
action: call-service
service: input_boolean.turn_on
service_data: {}
target:
entity_id: input_boolean.god_natt
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: #1a1a1a;
}
2 Likes
Anyone know how to create a chip that acts as a home button but it navigates to a specific page per user? For example I have a home page specifically for user John and want to create a home button that navigates back to that page, but if another use is logged in that same home button navigates to their respective home page.
You can change just the icon (and shape) when on like this:
type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
style: |
mushroom-shape-icon {
{{ '--card-mod-icon: mdi:lightbulb;' if is_state(config.entity, 'on') else '--card-mod-icon: mdi:lightbulb-off;' }}
--icon-color-disabled: rgb(var(--rgb-red));
--shape-color-disabled: rgba(var(--rgb-red), 0.2);
--icon-color: rgb(var(--rgb-blue)) !important;
--shape-color: rgba(var(--rgb-blue), 0.2) !important;
}
1 Like
Is anyone interested in some icon animations?
10 Likes
Hello, I’ve tried it but I’m breaking my head it doesn’t come out, how do you do it? how do you leave the separators on the left and right? Only a central column and assigning a tab?
Forgive me 
3 Likes
