It’s the “Custom sidebar card”: https://github.com/DBuit/sidebar-card
1 Like
Sure, on mobile all cards are 100% width, all rooms look like this:
Music like this (just the Squeezebox server):
The other views (weather, security etc) are still from my old setup and need to be redone
14 Likes
For consistency, the info zone and controls zone are 50%-50% to match most of usage (light controls, fan controls, alarm controls, etc…).
The problem is that we have 1 slider + 2 buttons in the control zone. We need to find a solution to improve switching experience between mode for light (brightness/rgb/temp color).
I seems that line break is not supported by HA templates.
I’d love to see your config for the sidebar card. I’m using it too but mine looks awful compared to yours. For example, how’d you get the clock and date centered? And the weather panel at the bottom… I need that too.
Awsome sidebar. Do you mind sharing your sidebar config?
Sure, it’s a bit messy:
sidebar:
title: null
clock: false
digitalClock: true
digitalClockWithSeconds: true
twelveHourVersion: false
period: false
date: true
hideTopMenu: true
hideHassSidebar: false
showTopMenuOnMobile: true
dateformat: dddd, DD MMMM YYYY
width:
desktop: 15
mobile: 0
tablet: 25
breakpoints:
mobile: 768
tablet: 1930
style: |
:host {
--sidebar-background: #000;
--sidebar-text-color: #FFF;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
#customSidebar {
z-index: 9999!important;
}
.sidebarMenu li {
line-height: 20px!important;
}
.sidebarMenu li ha-icon {
color: #FFF!important;
}
.sidebarMenu li.active {
background-color: #2C2E30!important;
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
}
.digitalClock {
padding-bottom: 5px;
padding-top: 15px
}
.digitalClock {
font-size: 50px !important;
font-weight: 500!important;
text-align: center;
}
.date {
padding-bottom: 10px;
font-size: 25px;
font-weight: 300;
text-align: center;
}
sidebarMenu:
- action: navigate
active: true
name: Home
icon: mdi:home
navigation_path: /dashboard-desktop2022/home
- action: navigate
active: true
name: Muziek
icon: mdi:music
navigation_path: /dashboard-desktop2022/muziek
- action: navigate
active: true
name: Beveiliging
icon: mdi:cctv
navigation_path: /dashboard-desktop2022/beveiliging
- action: navigate
active: true
name: Huishouden
icon: mdi:store-check
navigation_path: /dashboard-desktop2022/huishouden
- action: navigate
active: true
name: Diversen
icon: hass:cog
navigation_path: /dashboard-desktop2022/diversen
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: weather-forecast
style: |
ha-card {
background: transparent !important;
color: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: weather.huis
show_current: true
tap_action:
action: navigate
navigation_path: /dashboard-desktop2022/weerbericht
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:calendar-month
icon_color: grey
hold_action:
action: none
tap_action:
action: navigate
navigation_path: /dashboard-desktop2022/agenda
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:cart
icon_color: light-blue
hold_action:
action: none
tap_action:
action: url
url_path: app://com.icemobile.albertheijn
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:lightbulb-auto
icon_color: amber
hold_action:
action: none
tap_action:
action: call-service
service: scene.turn_on
service_data:
transition: 5
target:
entity_id: scene.ochtend
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:lightbulb-auto-outline
icon_color: brown
hold_action:
action: none
tap_action:
action: call-service
service: scene.turn_on
service_data:
transition: 5
target:
entity_id: scene.idle
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:power-standby
icon_color: deep-orange
hold_action:
action: none
tap_action:
confirmation:
text: Alles uitzetten?
action: call-service
service: script.alle_lampen_uit
service_data: {}
target: {}
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.state {
font-size: 8px;
}
28 Likes
Maybe one button to switch between the sliders, instead of button for every slider.
Any possibility of adding support for custom cards from Ui Lovelace Minimalist?
Hi,
Using the mushroom template card and i want to change the icon color based on entity state.
type: custom:mushroom-template-card
icon: mdi:audio-video
layout: vertical
tap_action:
action: call-service
service: browser_mod.more_info
service_data:
entity_id: media_player.home_theater
target: {}
hold_action:
action: call-service
service: media_player.toggle
service_data: {}
target:
entity_id: media_player.home_theater
double_tap_action:
action: none
multiline_secondary: true
secondary: '{{ states[''media_player.home_theater''].attributes.volume_level }} Volume
primary: denon
icon_color: |2-
"{{ 'green' if is_state('media_player.home_theater',
'on') else 'red' }}"
I don’t know how to write the icon color template…
Thanks
That is not a custom:button-card, so your secondary info has to be Jinja (same syntax as in Dev Tools → Template):
## one line format: quotes mandatory
secondary: '{{ state_attr(''media_player.home_theater'', ''volume_level'') }}'
or
## multi-line format: no quotes
secondary: |
{{ state_attr(''media_player.home_theater'', ''volume_level'') }}
Same with icon-color:
## one line format
icon_color: "{{ 'green' if is_state('media_player.home_theater','on') else 'red' }}"
## multi-line format
icon_color: |
{{ 'green' if is_state('media_player.home_theater','on') else 'red' }}
In visual mode you always use one line format.
6 Likes
great! thank you very much 
Thanks for this awesome addition. Just switched over a whole bunch of stuff. The fan card has been particularly useful for displaying all available features of a Dyson fan much better than anything else I’d tried so far.
How to get a button to call the top bar from the menu ?
type: custom:mushroom-chips-card
chips:
- type: menu
- type: ???????
1 Like
What do you mean with that?
For some reason, I can’t figure out the right expression to manipulate the card’s icon color by using card_mod.
card_mod:
style: |
$: |
.badge ha-icon { color: … }
or
card_mod:
style: |
.: |
:host .badge ha-icon { color: … }
won’t do the trick. Can anybody point me in the right direction?
1 Like
Ah, ok. At this point I’m out. 
title: Home
views:
- path: default_view
background: var(--background-image)
title: Home
icon: mdi:home
theme: ios-dark-mode-blue-red-alternative
badges: []
cards:
- type: grid
square: false
columns: 1
cards:
- type: weather-forecast
entity: weather.home
- type: thermostat
entity: climate.living_room
- type: entities
entities:
- entity: sensor.ir_remote_humidity
name: Living Humidity
- entity: sensor.ir_remote_temperature
name: Living Temp
- entity: sensor.pure_cool_formaldehyde_humidity
name: Master Humidity
- entity: sensor.pure_cool_formaldehyde_temperature
name: Master Temp
- entity: sensor.upstair_s_office_temperature
name: Office Temp
state_color: false
- type: grid
cards:
- type: custom:mushroom-entity-card
icon: mdi:power
entity: remote.ir_remote_remote
secondary_info: none
tap_action:
action: call-service
service: remote.send_command
service_data:
device: livingroomtv
command: power
target:
entity_id: remote.ir_remote_remote
icon_color: white
name: Living Room TV
- type: grid
cards:
- type: button
show_icon: true
show_name: false
icon: mdi:home
tap_action:
action: call-service
service: androidtv.adb_command
service_data:
command: HOME
entity_id: media_player.ccgtv_living_room
- type: button
tap_action:
action: call-service
service: remote.send_command
service_data:
device: livingroomtv
command: up
target:
entity_id: remote.ir_remote_remote
icon: mdi:arrow-up-bold
show_name: false
show_icon: true
show_state: false
- type: custom:mushroom-light-card
entity: light.bookshelf
show_brightness_control: true
icon: mdi:bookshelf
- type: button
tap_action:
action: call-service
service: remote.send_command
service_data:
device: livingroomtv
command: left
target:
entity_id: remote.ir_remote_remote
icon: mdi:arrow-left-bold
show_name: false
- type: button
icon: mdi:checkbox-blank-circle
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
device: livingroomtv
command: select
target:
entity_id: remote.ir_remote_remote
hold_action:
action: more-info
entity: camera.tv_ambilight
- type: button
tap_action:
action: call-service
service: remote.send_command
service_data:
device: livingroomtv
command: right
target:
entity_id: remote.ir_remote_remote
icon: mdi:arrow-right-bold
show_name: false
- type: button
show_name: false
show_icon: true
icon: mdi:undo-variant
tap_action:
action: call-service
service: androidtv.adb_command
service_data:
command: BACK
target:
entity_id: media_player.living_room_ccwgtv
- type: button
tap_action:
action: call-service
service: remote.send_command
service_data:
device: livingroomtv
command: down
target:
entity_id: remote.ir_remote_remote
icon: mdi:arrow-down-bold
show_name: false
- type: custom:mushroom-light-card
entity: light.tv_ambilight
show_brightness_control: true
use_light_color: true
name: Ambient
- type: button
tap_action:
action: call-service
service: remote.send_command
service_data:
device: livingroomtv
command: volumedown
target:
entity_id: remote.ir_remote_remote
icon: mdi:volume-minus
- type: button
tap_action:
action: call-service
service: remote.send_command
service_data:
device: livingroomtv
command: mute
target:
entity_id: remote.ir_remote_remote
icon: mdi:volume-off
- type: button
tap_action:
action: call-service
service: remote.send_command
service_data:
device: livingroomtv
command: volumeup
target:
entity_id: remote.ir_remote_remote
icon: mdi:volume-plus
square: true
- type: custom:mini-media-player
name: Living Room
shortcuts:
columns: 2
buttons:
- name: Prime Video
type: service
id: androidtv.adb_command
service: androidtv.adb_command
data:
entity_id: media_player.living_room_ccwgtv
command: >-
am start -a android.intent.action.VIEW -n
com.amazon.amazonvideo.livingroom/com.amazon.ignition.IgnitionActivity
- name: Disney+
type: service
id: androidtv.adb_command
service: androidtv.adb_command
data:
entity_id: media_player.living_room_ccwgtv
command: >-
am start -a android.intent.action.VIEW -d
https://www.disneyplus.com/
- name: CNN
type: service
id: androidtv.adb_command
service: androidtv.adb_command
data:
entity_id: media_player.living_room_ccwgtv
command: >-
am start -a android.intent.action.VIEW -d
https://tv.youtube.com/watch/PyRp1_3Ql70
- name: Big Bang Theory
type: service
id: androidtv.adb_command
service: androidtv.adb_command
data:
entity_id: media_player.living_room_ccwgtv
command: >-
am start -a android.intent.action.VIEW -d
https://play.hbomax.com/page/urn:hbo:page:GXdRsewUPO5uAuwEAABEI:type:series
- name: Fraiser
type: service
id: androidtv.adb_command
service: androidtv.adb_command
data:
entity_id: media_player.living_room_ccwgtv
command: >-
am start -a android.intent.action.VIEW -d
https://www.hulu.com/series/frasier-0cb9b63b-de82-4751-99c9-1cb12118ab9d
- name: Simpsons
type: service
id: androidtv.adb_command
service: androidtv.adb_command
data:
entity_id: media_player.living_room_ccwgtv
command: >-
am start -a android.intent.action.VIEW -d
https://www.disneyplus.com/series/the-simpsons/3ZoBZ52QHb4x
entity: media_player.living_room_tv
hide:
name: true
icon: true
info: false
power: false
source: false
sound_mode: false
controls: false
prev: false
next: false
play_pause: false
play_stop: false
jump: false
volume: true
volume_level: false
mute: false
progress: false
runtime: false
runtime_remaining: false
artwork_border: false
power_state: false
icon_state: false
shuffle: false
repeat: false
state_label: null
toggle_power: true
source: full
artwork: material
info: scroll
columns: 1
square: false
- type: grid
cards:
- type: custom:mushroom-light-card
entity: light.main_floor
name: First Floor
icon: mdi:floor-plan
layout: horizontal
show_brightness_control: true
- type: grid
cards:
- type: custom:mushroom-light-card
entity: light.living_room_main_lights
name: Living
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.kitchen_main_lights
name: Kitchen
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.breakfast_room_main_lights
name: Breakfast
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.kitchen_under_cabinet
name: Cabinet
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.kitchen_sink_light
name: Sink
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.butler_pantry_main_lights
show_brightness_control: true
name: Butler
- type: custom:mushroom-light-card
entity: light.dining_room_main_lights
name: Dining
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.dining_room_chandelier
name: Chandelier
icon: mdi:chandelier
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.stairs_main_lights
name: Stairs
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.front_foyer_main_lights
show_brightness_control: true
name: Foyer
- type: custom:mushroom-alarm-control-panel-card
entity: >-
alarm_control_panel.home_alarm_control_panel_alarm_control_panel
states: []
name: Alarm
layout: horizontal
- type: custom:mushroom-cover-card
entity: cover.living_room_shades
name: Shades
layout: horizontal
- type: custom:mushroom-light-card
entity: light.front_porch_overhead_light
name: Porch
- type: custom:mushroom-entity-card
entity: lock.front_door
columns: 2
square: false
columns: 1
square: false
- type: grid
cards:
- type: custom:mushroom-light-card
entity: light.master_bedroom
name: Master
icon: mdi:bed
layout: horizontal
show_brightness_control: true
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-light-card
entity: light.master_bedroom_main_lights
show_brightness_control: true
name: Bedroom
icon: mdi:bed
- type: custom:mushroom-light-card
entity: light.master_bedroom_accent_lights
show_brightness_control: true
name: Entry
- type: custom:mushroom-light-card
entity: light.master_bedroom_nightstands
show_brightness_control: true
name: Nightstands
icon: mdi:floor-lamp
- type: custom:mushroom-fan-card
entity: fan.pure_cool_formaldehyde
icon_animation: true
show_percentage_control: true
name: Fan
show_oscillate_control: true
- type: custom:mushroom-entity-card
entity: switch.in_wall_smart_switch
name: Bath Switch
icon: mdi:light-switch
tap_action:
action: toggle
hold_action:
action: more-info
vertical: true
- type: custom:mushroom-light-card
entity: light.master_bathroom
icon: mdi:shower
show_brightness_control: true
name: Bath
show_color_control: true
- type: custom:mushroom-light-card
entity: light.upstairs
name: Upstairs
icon: mdi:floor-plan
layout: horizontal
show_brightness_control: true
- type: grid
cards:
- type: custom:mushroom-light-card
entity: light.upstair_s_office
show_brightness_control: true
use_light_color: true
name: Office
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.upstair_s_office_lamp
name: Office Lamp
show_brightness_control: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.gym
use_light_color: true
show_brightness_control: true
show_color_control: true
- type: custom:mushroom-light-card
entity: light.hallway
show_brightness_control: true
columns: 2
square: false
columns: 1
square: false
5 Likes
Thanks for this awesome addition! Someone could point me to the right direction on how to change the text for the state section(secondary info) in lights and entity mushroom cards. Instead of the text ON or OFF i need to insert some custom text.
thanks a lot!
1 Like
Use the mushroom template card. I don’t think that entity card or light card is individually customizable.