Thank you a ton!!
The horizontal and vertical stacks are the cards Iām using all the time, I;m not so good at card-mod therefore I used your option with no borders.
Finally, I think my Mobile dashboard is ready !
The buttons on top navigates to Power, Network, Weather etc, I removed names to have clear mobile view
Great, glad I could help! 
Hi, this is the title and the first card
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Riepilogo
- square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
secondary: Cucina e soggiorno
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: soggiorno
icon_color: blue
multiline_secondary: true
primary: Zona giorno
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperatura_soggiorno
icon_color: blue
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: entity
entity: sensor.umidita
icon_color: blue
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
Mushroom 1.7.3 is out!
Fastest Mushwroooom ever, thank you so much, @piitaya and collaborators!
What are those room cards made of? Is that stack-in-card with chips on top and then a mushroom-template-card?
For inspirationā¦
stack-in-card + (mushroom-template-card + custom:mushroom-chips-card) + box-shadow: 0px 0px and animation blink and rotation
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:shower
icon_color: blue
layout: vertical
tap_action: null
action: navigate
navigation_path: pokoje
primary: Åazienka
multiline_secondary: true
secondary: >-
Temp: {{
state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_temperature')|float}}Ā°C
WilgotnoÅÄ: {{
state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_humidity')|float}}%
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.lazienka_swiatlo
content_info: none
use_light_color: false
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: light
entity: light.lazienka_led
content_info: none
use_light_color: false
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
entity: light.lazienka_led
content_info: none
use_light_color: false
card_mod: null
icon: mdi:fan
icon_color: |2-
{% set state=states('light.lazienka_led') %}
{% if state=='on' %}
green
{% elif state=='off' %}
black
{% endif %}
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
box-shadow: 0px 0px;
animation: rotation linear infinite;
{% if states('light.lazienka_led') == 'on' %}
animation-duration: 3s;
{%- else -%}
{%- endif %}
template
- type: template
entity: light.lazienka_led
content_info: none
use_light_color: false
card_mod: null
icon: |2-
{% set state=states('light.lazienka_led') %}
{% if state=='on' %}
mdi:radiator
{% elif state=='off' %}
mdi:radiator-disabled
{% endif %}
icon_color: |2-
{% set state=states('light.lazienka_led') %}
{% if state=='on' %}
red
{% elif state=='off' %}
black
{% endif %}
style: |
ha-card {
{% if states('light.lazienka_led') == 'on' %}
animation: blink 0.1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{%- else -%}
box-shadow: 0px 0px;
{%- endif %}
ha-card {
box-shadow: 0px 0px;
alignment: center
please share your yaml codeā¦
Thanks for your wonderful work. I see some users are able to add temperatures under their buttons/rooms, do you have an example of how to do this?
To just add text, use a template card and then you can use templates in the primary and secondary text. Iām using this for temp and humidity. This can be done with just one card.
{{ states("sensor.ble_temperature_sensor") }} Ā°C - {{states("sensor.ble_humidity_sensor") }}%
Some other people are using stack-in-card and vertical-stack-in-card to put chips instead.
Thanks for getting me somewhere. Right now i have this as result;
- type: custom:mushroom-template-card
primary: light.kitchen
name: Kitchen
show_brightness_control: true
use_light_color: true
icon: mdi:spotlight-beam
multiline_secondary: true
layout: vertical
secondary: >
{{ states("sensor.philips_sml001_c6710202_temperature") }} Ā°C -
{{states("sensor.philips_sml001_fde90002_illuminance") }} lux
However, brightness control, color control and name āKitchenā wont get applied, am i missing something?
You are using a mushroom-template-card but values that is from the light card.
https://github.com/piitaya/lovelace-mushroom/blob/4a65c3946c1ce7422805784a60e7b72458a60ec7/docs/cards/template.md
Bummer, i canāt have the slider + the addition information(?) temp, lux etc etc?
Thank you and yes. Itās the first card and as I mentioned Iāve a room specific view behind every room and person card.
All uppercase words are based on my personal entities or gusto.
kiosk_mode:
mobile_settings:
hide_header: true
ignore_entity_settings: true
custom_width: 812
views:
- theme: Google Theme
title: Home
icon: mdi:home
visible:
- user: PERSON_1
- user: PERSON_!
badges: []
cards:
- type: custom:swipe-card
cards: []
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.home
show_conditions: true
show_temperature: true
- type: entity
entity: sensor.count_LIGHTS_ON
icon: mdi:lightbulb-alert
name: LIGHT
icon_color: amber
hold_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.WHOLE_HOUSE
alignment: center
- type: custom:mushroom-template-card
primary: |-
{% set time = now().hour %}
{% if (time >= 18) %}
EVENING_GREETING, {{user}}!
{% elif (time >= 12) %}
DAY_GREETING, {{user}}!
{% elif (time >= 5) %}
MORNING_GREETING, {{user}}!
{% endif %}
secondary: |-
{% set time = now().hour %}
{% if (time >= 18) %}
MOTIVATIONAL_EVENING_QUESTION
{% elif (time >= 12) %}
MOTIVATIONAL_DAY_QUESTION
{% elif (time >= 5) %}
MOTIVATIONAL_MORNING_SAYING
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: horizontal
multiline_secondary: false
- type: custom:state-switch
entity: user
default: default
states:
PERSON_!:
type: conditional
conditions:
- entity: calendar.GOOGLE_BIRTHDAY_CALENDAR
state: 'on'
card:
type: custom:mushroom-template-card
layout: horizontal
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:cake
primary: '{{ state_attr(''calendar.GOOGLE_BIRTHDAY_CALENDAR'', ''message'') }}'
- type: conditional
conditions:
- entity: sensor.ORGANIC_WASTE
state: TOMORROW
card:
type: custom:mushroom-title-card
subtitle: INFORMATIONS
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.ORGANIC_WASTE
state: TOMORROW
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ORGANIC_WASTE
icon_color: deep-orange
name: 'TRASH_WILL_BE_PICKED_UP_TOMORROW:'
content_info: name
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:delete-circle-outline
alignment: justify
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.YELLOW_BAG
state: TOMORROW
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.YELLOW_BAG
icon_color: yellow
name: YELLOW_BAG
icon: mdi:delete-empty
tap_action:
action: none
hold_action:
action: none
target: {}
double_tap_action:
action: none
content_info: none
alignment: center
- type: conditional
conditions:
- entity: sensor.PAPER_WASTE
state: TOMORROW
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.PAPER_WASTE
icon_color: blue
icon: mdi:delete-empty
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
content_info: none
alignment: center
- type: conditional
conditions:
- entity: sensor.ORGANIC_WASTE
state: TOMORROW
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ORGANIC_WASTE
icon_color: green
name: ORGANIC_WASTE
icon: mdi:delete-empty
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
content_info: none
alignment: center
- type: conditional
conditions:
- entity: sensor.RESIDUAL_WASTE
state: TOMORROW
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.RESIDUAL_WASTE
icon_color: grey
name: RESIDUAL_WASTE
icon: mdi:delete-empty
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
content_info: none
alignment: center
- type: custom:mushroom-title-card
subtitle: FAMILY
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.PERSON_1
name: PERSON_1
use_entity_picture: true
layout: vertical
hold_action:
action: navigate
navigation_path: PERSON_1
- type: custom:mushroom-person-card
entity: person.PERSON_2
name: PERSON_2
use_entity_picture: true
layout: vertical
hold_action:
action: navigate
navigation_path: PERSON_2
hide_name: false
- type: custom:mushroom-person-card
entity: device_tracker.MY_CAR
name: MY_CAR
use_entity_picture: true
layout: vertical
hold_action:
action: navigate
navigation_path: car
hide_state: false
hide_name: false
- type: custom:mushroom-title-card
subtitle: ROOMS
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: light.OFFICE
tap_action:
action: navigate
navigation_path: OFFICE
icon_color: amber
layout: horizontal
hold_action:
action: toggle
primary_info: name
secondary_info: none
icon: hue:room-office
name: OFFICE
- type: custom:mushroom-entity-card
entity: light.BATHROOM
name: BATHROOM
icon_color: amber
layout: horizontal
tap_action:
action: navigate
navigation_path: BATHROOM
icon: mdi:bathtub
secondary_info: none
hold_action:
action: toggle
primary_info: name
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: light.BEDROOM
icon_color: amber
tap_action:
action: navigate
navigation_path: BEDROOM
hold_action:
action: toggle
layout: horizontal
secondary_info: none
- type: custom:mushroom-entity-card
entity: light.NURSERY
icon_color: amber
layout: horizontal
tap_action:
action: navigate
navigation_path: NURSERY
secondary_info: none
hold_action:
action: toggle
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
entity: light.LIVING_ROOM
icon_color: |-
{% if is_state('light.LIVING_ROOM', 'on') %}
amber
{% else %}
#646464
{% endif %}
primary: LIVING_ROOM
secondary: |-
{% if is_state('select.HARMONY_HUB_activities', 'PowerOff') %}
{% elif is_state('select.HARMONY_HUB_activities', 'HARMONY_ACTIVITY_1') %}
HARMONY_ACTIVITY_1
{% elif is_state('select.HARMONY_HUB_activities', 'HARMONY_ACTIVITY_2') %}
HARMONY_ACTIVITY_2
{% elif is_state('select.HARMONY_HUB_activities', 'HARMONY_ACTIVITY_3') %}
HARMONY_ACTIVITY_3
{% else %}
{% endif %}
hold_action:
action: call-service
service: light.toggle
service_data: {}
target:
entity_id: light.LIVING_ROOM
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: LIVING_ROOM
- type: custom:mushroom-entity-card
entity: light.DINING_ROOM
icon_color: amber
layout: horizontal
tap_action:
action: navigate
navigation_path: DINING_ROOM
secondary_info: none
icon: hue:room-dining
hold_action:
action: toggle
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: light.KITCHEN
icon_color: amber
layout: horizontal
tap_action:
action: navigate
navigation_path: KITCHEN
name: KITCHEN
icon: ''
secondary_info: none
primary_info: name
hold_action:
action: toggle
- type: custom:mushroom-template-card
entity: light.decke_PANTRY
secondary: " {% if is_state('vacuum.VACCUM_NAME', 'docked') %}
{% elif is_state('vacuum.VACCUM_NAME', 'cleaning') %}
VACUUM IS CLEANING
{% elif is_state('vacuum.VACCUM_NAME', 'returning') %}
VACUUM IS RETURNING
{% elif is_state('vacuum.VACCUM_NAME', 'error') %}
VACUUM ERROR
{% elif is_state('vacuum.VACCUM_NAME', 'paused') %}
VACUUM IS PAUSED
{% else %}
{% endif %}
primary: PANTRY
tap_action:
action: navigate
navigation_path: PANTRY
hold_action:
action: toggle
double_tap_action:
action: none
icon_color: |-
{% if is_state('light.PANTRY', 'on') %}
amber
{% else %}
#646464
{% endif %}
icon: mdi:food
card_mod:
style: |
ha-card {
--secondary-text-color: {{ 'red' if is_state('vacuum.VACUUM_NAME', 'error') else '' }};;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: hue:room-laundry
entity: light.UTILITY_ROOM
icon_color: >-
{% if is_state('input_select.washing_machine_state', 'ready') and
is_state('input_select.dryer_state', 'ready') %}
#646464
{% elif is_state('input_select.washing_machine_state', 'washing') and is_state('input_select.dryer_state', 'drying') %}
blue
{% elif is_state('input_select.dryer_state', 'ready') and is_state('input_select.washing_machine_state', 'washing') %}
green
{% elif is_state('input_select.washing_machine_state', 'ready') and is_state('input_select.dryer_state', 'drying') %}
purple
{% else %}
none
{% endif %}
primary: UTILITY_ROOM
secondary: >-
{% if is_state('input_select.washing_machine_state', 'ready') and
is_state('input_select.dryer_state', 'ready') %}
{% elif is_state('input_select.washing_machine_state', 'washing') and is_state('input_select.dryer_state', 'drying') %}
WASHING & DRYING
{% elif is_state('input_select.dryer_state', 'ready') and is_state('input_select.washing_machine_state', 'washing') %}
WASHING
{% elif is_state('input_select.washing_machine_state', 'ready') and is_state('input_select.dryer_state', 'drying') %}
DRYING
{% else %}
none
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: UTILITY_ROOM
- type: custom:mushroom-template-card
icon: |-
{% if is_state('cover.GARAGE_DOOR', 'closed') %}
mdi:garage-variant-lock
{% elif is_state('cover.GARAGE_DOOR', 'open') %}
mdi:garage-open-variant
{% elif is_state('cover.GARAGE_DOOR', 'opening') %}
mdi:garage-alert-variant
{% elif is_state('cover.GARAGE_DOOR', 'closing') %}
mdi:garage-alert-variant
{% else %}
{% endif %}
entity: cover.GARAGE_DOOR
icon_color: |-
{% if is_state('cover.GARAGE_DOOR', 'closed') %}
#646464
{% elif is_state('cover.GARAGE_DOOR', 'open') %}
red
{% elif is_state('cover.GARAGE_DOOR', 'opening') %}
yellow
{% elif is_state('cover.GARAGE_DOOR', 'closing') %}
yellow
{% else %}
{% endif %}
primary: GARAGE
secondary: |-
{% if is_state('cover.GARAGE_DOOR', 'closed') %}
{% elif is_state('cover.GARAGE_DOOR', 'open') %}
OPEN
{% elif is_state('cover.GARAGE_DOOR', 'opening') %}
IS OPENING
{% elif is_state('cover.GARAGE_DOOR', 'closing') %}
IS CLOSING
{% else %}
{% endif %}
tap_action:
action: navigate
navigation_path: GARAGE
hold_action:
action: none
double_tap_action:
action: none
Can you share your person card code please? It it just a stack-in card with no border? Looks great!
@piitaya do any of the cards support the header/footer options like the lovelace cards to add buttons at the bottom? Didnāt seem to like it for me on the light card
Hi, I have a TADO binary sensor which is created by the integration and shows in HA as window open or closed but in developer tab itās classed as on or off. In my mushroom card, it shows binary sensor as off.
How can I get it to show window as open or closed in the mushroom card as it should as device class is window ?
I tried adding a customization but it already knows itās a window ? I donāt want to duplicate the entity
Thanks
Martyn
I use this for my door sensors to convert from on/off to open/close. Thereās probably a better way to do it but this works in a mushroom template card. I use it as my secondary info line
{% set state=states(entity) %}
{% if state=='on' %}
open
{% elif state=='off' %}
closed
{% endif %}
Great work! Do you mind sharing your sidebar code?