Nice work @RodgerDodger
Could you please share the whole code 
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
5 Likes
Can you share your person card code please? It it just a stack-in card with no border? Looks great!
1 Like
@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 %}
2 Likes
Great work! Do you mind sharing your sidebar code?
what does fill_container do?
check my post history. im not at a pc to be able to share right now
You can check this if you want the card to take the full height (useful when you use it in a grid layout 
)
Interesting thanks, any plans to support it?
There is plan to add custom buttons on entity card but no footer, header.
I prefer to keep mushroom card simple for now 
:
- one icon
- one name
- one state
- one line of control
Advanced things can be done with card_mod, vertical stack in card, etc…
4 Likes
Yeah but they don’t look as pretty as yours 
How did you create the buttons on the room cards?
1 Like
this is based on the example provided by @dunner
It is a combination of stack-in-card, horizontal stacks + chips (templates and lights) + no borders
Salon example:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('media_player.sony_bravia_tv', 'off') %}
mdi:television-classic
{% else %}
mdi:television-classic-off
{% endif %}
icon_color: |
{% if is_state('media_player.sony_bravia_tv', 'off') %}
grey
{% else %}
indigo
{% endif %}
entity: light.kitchen_led
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: more-info
- type: template
icon: |
{% if is_state('light.kitchen_led', 'on') %}
mdi:lightbulb-spot
{% else %}
mdi:lightbulb-spot-off
{% endif %}
icon_color: |
{% if is_state('light.kitchen_led', 'on') %}
yellow
{% else %}
grey
{% endif %}
entity: light.kitchen_led
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: more-info
- type: template
entity: climate.saswell_gtz03
icon: |
{% if is_state('climate.saswell_gtz03', 'off') %}
mdi:radiator-off
{% elif is_state('climate.saswell_gtz03', 'auto') %}
mdi:radiator-disabled
{% else %}
mdi:radiator
{% endif %}
icon_color: |
{% if is_state('climate.saswell_gtz03', 'off') %}
grey
{% elif is_state('climate.saswell_gtz03', 'auto') %}
orange
{% else %}
red
{% endif %}
content: '{{ states(''climate.saswell_gtz03'',) }} '
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Salon
layout: vertical
icon: mdi:sofa
icon_color: '#a37208'
tap_action:
action: navigate
navigation_path: salon
hold_action:
action: more-info
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.ble_temperature_salon
icon: mdi:thermometer
icon_color: yellow
content: '{{ states(''sensor.ble_temperature_salon'',) }} °C '
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
entity: sensor.ble_temperature_salon
icon: mdi:water-percent
icon_color: teal
content: '{{ states(''sensor.ble_humidity_salon'',) }} % '
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
~~
2 Likes