Nice looking one! @gjaevert well done.
What does the house mode do? Curious 
Thank you
So far itâs only setting lights to a given level, but I also want to use it to set temperatures and basic presence/motion detection when Iâm not home.
this looks good, can you share your house mode card?
Hello everyone,
I think the dashboard is great and would like to use it for myself.
However, Iâm having trouble with the two different views.
PC and tablet work perfectly, but it doesnât switch to mobile on my iPhone.
When I change
mediaquery:
â(max-width: 400px)â:
to 800px I see the footer but not at the bottom of the screen but directly below the last card.
Can you share your complete code? That would be awesome.
Can you please share the YAML of the camera and energy cards? I really like them!
Sure, here you go:
Camera
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
cards:
- square: false
type: grid
columns: 1
cards:
- square: false
type: grid
columns: 1
cards:
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_all
card:
type: grid
square: false
columns: 2
cards:
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.voortuin_main
tap_action:
action: call-service
service: script.camera_1_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.oprit_main
tap_action:
action: call-service
service: script.camera_2_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.zijpad_main
tap_action:
action: call-service
service: script.camera_3_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.achtertuin_main
tap_action:
action: call-service
service: script.camera_4_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_1
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.voortuin_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_2
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.oprit_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_3
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.zijpad_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_4
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.achtertuin_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:microsoft-windows
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_all') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_all_selection
- type: template
icon: mdi:numeric-1-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_1') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_1_selection
- type: template
icon: mdi:numeric-2-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_2') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_2_selection
- type: template
icon: mdi:numeric-3-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_3') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_3_selection
- type: template
icon: mdi:numeric-4-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_4') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_4_selection
- type: template
icon: mdi:fullscreen
icon_color: disabled
content: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: fullscreen
content:
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
cards:
- square: false
type: grid
columns: 1
cards:
- square: false
type: grid
columns: 1
cards:
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_all
card:
type: grid
square: false
columns: 2
cards:
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.voortuin_main
tap_action:
action: call-service
service: script.camera_1_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.oprit_main
tap_action:
action: call-service
service: script.camera_2_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.zijpad_main
tap_action:
action: call-service
service: script.camera_3_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.achtertuin_main
tap_action:
action: call-service
service: script.camera_4_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_1
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.voortuin_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_2
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.oprit_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_3
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.zijpad_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_4
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.achtertuin_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:microsoft-windows
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_all') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_all_selection
- type: template
icon: mdi:numeric-1-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_1') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_1_selection
- type: template
icon: mdi:numeric-2-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_2') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_2_selection
- type: template
icon: mdi:numeric-3-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_3') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_3_selection
- type: template
icon: mdi:numeric-4-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_4') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_4_selection
- type: template
icon: mdi:fullscreen
icon_color: amber
content: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.close_popup
alignment: justify
card_mod:
style: |
.chip-container {
}
ha-card {
--chip-background: rgba(var(--cstm-rgb-on-secondary), 0.05);
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-radius: var(--mush-control-border-radius);
--chip-height: 50px;
}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
padding: 8px;
width: auto;
}
alignment: justify
card_mod:
style: |
.chip-container {
}
ha-card {
--chip-background: rgba(var(--cstm-rgb-on-secondary), 0.05);
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-radius: var(--mush-control-border-radius);
--chip-height: 45px;
}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
padding: 8px;
width: auto;
}
Energy:
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
cards:
- type: energy-date-selection
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- square: false
type: grid
columns: 1
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
cards:
- square: false
type: grid
columns: 1
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
cards:
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy1
card:
type: energy-distribution
link_dashboard: false
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy2
card:
type: energy-usage-graph
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy3
card:
type: energy-gas-graph
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy4
card:
type: energy-devices-graph
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy5
card:
type: energy-solar-graph
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:home-analytics
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy1') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_1_selection
- type: template
icon: mdi:lightning-bolt
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy2') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_2_selection
- type: template
icon: mdi:gas-burner
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy3') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_3_selection
- type: template
icon: mdi:solar-power
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy5') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_5_selection
- type: template
icon: mdi:chart-bar
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy4') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_4_selection
alignment: justify
card_mod:
style: |
.chip-container {
}
ha-card {
--chip-background: rgba(var(--cstm-rgb-on-secondary), 0.05);
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-radius: var(--mush-control-border-radius);
--chip-height: 45px;
}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
padding: 8px;
width: auto;
}
To make these work, you will need to add a couple of input_select helpers and scripts.
Here is a screenshot of the camera helper:
And the script. I am sure there is a way to have just one script for all camera or energy selections, but I have a script for each selection. To make it work I made a copies of this script and replaced camera_1 with camera_all, camera_2, etc.
alias: camera_1_selection
sequence:
- service: input_select.select_option
data:
option: camera_1
target:
entity_id: input_select.list_camera
description: ""
mode: single
1 Like
The footer navigation should stick to the bottom of the screen when thereâs enough content/cards to âpushâ it to the bottom
1 Like
I also like mini-graph card better but to have 48 separate sensors is too much for me, thatâs why I went with apex card in the end. Btw I have made some adjustments to mine (decreased the height, changed font), which I will upload to Github later.
For some reason your apex card doesnât work with my Nordpool sensor, but Iâll just adapt some of your code to mine then.
How to prevent the Menu Bar to be shown on my iPad.
kiosk_mode:
non_admin_settings:
hide_sidebar: true
hide_search: true
hide_assistant: true
custom_header:
hide_header: true
kiosk_mode: true
This settings I set on the top of this dashboard. This works for other Dashboard pretty well. Iâve already add the âcustom_headerâ to the resources of this dashboard. Any Idee ?
BR
Patrick
Its a mushroom input select card
type: custom:mushroom-select-card
entity: input_select.home
name: House Mode
icon: mdi:home-assistant
1 Like
Hi all! Iâm a completly noob on this⌠Iâm trying to start my first dashboard, but I have a problem just after starting⌠I add just a card on the first view:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Temperatura
- type: custom:mushroom-climate-card
entity: climate.riscaldamento
fill_container: false
primary_info: state
secondary_info: last-updated
But this is the result 
Any advice?
Did you use the view-layout correct of the card?
view_layout:
grid-area: left1
1 Like
It seems to work! Thanks!
Sorry for the late reply. I donât know why kiosk mode isnât working for you on the adaptive mushroom dashboard. I donât use it myself, as I donât find the top bar too disturbing. Perhaps other integrations that use that top section of the dashboard code interfere with the kiosk mode code? Did you try reordering them?
Hi Guys
First of all @ArenaCloser Thank you very much. I love your dashboard and I was able to build my own based on your code.
Iâm trying to tinker a bit with the weather frog and I have trouble understanding one part of the card / cardmod:
background: linear-gradient(to top, transparent, rgba(var(âfrog-rgb-{{states(âsensor.weather_frog_statusâ)}})) 10%), url({{states(âsensor.weather_frog_image_wideâ)}});
As far as I understand it the line â(to top, transparent, rgba(var(âfrog-rgb-{{states(âsensor.weather_frog_statusâ)}})) 10%)â is responsible for the tint of the weather card. At night it gets purple, at a sunny day light blue and so onâŚ
But where does the âfrogâ come from? (no pun intended) and where does he get the informatios for the colour tint? It plays togehter with the sensor but if I add a state to âsensor.weather_frog_statusâ like âcloudy_nightâ because I want to use different pictures for a cloudy night then the card stops working. And itâs because of this line. When I delete the line, the pictures for the state âcloudy nightâ show up in the card, but they dont look nice because the tint is gone.
So⌠Could you please help me understand how it works and how I could add another state to the sensor? I really would like different pictures for cloudy days and cloudy nights.
Thanks in advance for your help.
how do you generate the bottom navigation bar in mobile? looks good
Setup everything, but bottom bar does not lock to bottom. CSS its there, but not working. iOS issue?
I have the same issue, using Android (Pixel 7). Bottom Bar does not lock to bottom if I donât max out the cards to the bottom.
example:
would you mind to share the code for the âchipsâ in the top right corner?
thanks!
Sure ⌠that is:
square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.alle_lampen
icon: |2
{% set state=expand(states.person|selectattr('state','equalto','home'))|list|length %}
{% if state > 0 %}
fapro:home
{% else %}
fapro:home-blank
{% endif %}
tap_action:
action: navigate
navigation_path: familie
card_mod:
style: |
ha-card:after {
content: "{{ expand(states.person|selectattr('state','equalto','home'))|list|length }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: start
card_mod:
style:
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.alle_lampen
icon: |2
{% set state=expand(states.person|selectattr('state','!=','home'))|list|length %}
{% if state > 0 %}
fapro:home-blank
{% else %}
fapro:home-blank
{% endif %}
tap_action:
action: navigate
navigation_path: familie
card_mod:
style: |
ha-card:after {
content: "{{ expand(states.person|selectattr('state','!=','home'))|list|length }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
icon: mdi:account-tie-voice
tap_action:
action: assist
pipeline_id: preferred
start_listening: true
hold_action:
action: assist
pipeline_id: preferred
start_listening: true
alignment: end
card_mod:
style:
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 8px;
}
1 Like