I didnt reacreate, i just use an iframe for it !
Anyhow, i’m trying to do the same for the media tab too
any idea?
@DBuit
hi im using
matt8707/hass-config: A different take on designing a Lovelace UI (github.com)
as my dashboard
how do i add this sidebar in everytime ive tried i get errors i think because the dah im using uses a custom grid?
my sidebar code from lovelace-ui.yaml
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
- type: conditional
conditions:
- entity: sensor.bushey_way_uv_index
state: 'on'
card:
type: custom:button-card
entity: timer.laundry
hold_action:
action: call-service
service: input_boolean.turn_off
service_data:
entity_id: input_boolean.laundry_display
template: laundry
Hi!
Yesterday I had no issues with the bottomCard settings below but they’re gone completely today and I can’t for the life of me work out why. Anyone care to idiot check me?
bottomCard:
type: vertical-stack
cardOptions: null
cards:
- type: weather-forecast
entity: weather.smith_street
secondary_info_attribute: wind_speed
- type: horizontal-stack
cardOptions: null
cards:
- type: custom:mushroom-person-card
entity: person.tom
layout: horizontal
use_entity_picture: true
- type: custom:mushroom-person-card
entity: person.alex
layout: horizontal
use_entity_picture: true
I’ve had this card implement for sometime now, and it looks great on my desktop, but my ultimate plan was to cast to my Google Hub Max. So far I have been unable to cast successfully and end up with nothing more than a blank white screen.
I created a simple configuration with just one view containing one simple markdown card. The casted result did contain a blank area that was the expected size of the sidebar and the single markdown card.
The following is what I’ve been testing with:
sidebar:
digitalClock: true
twelveHourVersion: true
period: true
date: true
style: |
:host {
–sidebar-background: #081e45;
–sidebar-text-color: #ffffff;
–border-radius: 10px;
}
.sidebarMenu li {
line-height: 16px!important;
}
.sidebarMenu li ha-icon {
color: white!important;
}
.sidebarMenu li.active {
background-color: white!important;
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
color: yellow!important;
}
sidebarMenu:
- action: navigate
navigation_path: “/test-board/mainfloor”
name: “Perspective”
icon: mdi:floor-plan
active: true
- action: navigate
navigation_path: “/test-board/mainfloor”
name: “Outdoors”
icon: mdi:pine-tree
views:
- title: MainFloor
path: mainfloor
cards:- type: markdown
content: “### Kitchen”
- type: markdown
I have the same issues. Mostly bottomCard shows correctly. But at some time after refresh browser it doesn’t show again. When I refresh the view some times it comes back. The rest of sidebar Card works always fine.
What am I doing wrong? can someone help me?
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.openweathermap
show_current: true
name: Meisenthal
tap_action:
action: navigate
navigation_path: /mushroom-tablet/weather-info
- type: horizontal-stack
cards:
- type: custom:mushroom-template-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: >-
{% set list = states | selectattr('entity_id','in',
state_attr('group.garbage_collections','entity_id')) |
selectattr('state','eq','1') | map(attribute='name') | list %}
{% if list | length >= 1 %} mdi:delete-empty {% else %}
mdi:delete {% endif %}
icon_color: >-
{% set list = states | selectattr('entity_id','in',
state_attr('group.garbage_collections','entity_id')) |
selectattr('state','eq','1') | map(attribute='name') | list %}
{% if list | length >= 1 %} red{% else %} white {% endif %}
hold_action:
action: none
tap_action:
action: navigate
active: true
name: Information
icon: mdi:information-variant
navigation_path: /mushroom-tablet/garbage-collection
service_data:
transition: 5
target:
entity_id: scene.idle
missed bottomCard
correct bottomCard
I was able to fix my problem myself with the following link … but I set it to 1second instead of 5seconds. It also work’s fine for me 
Just to note: that puts a lot of load on your browser. If you try to use this dashboard on a low power device, eg. a Pi Zero with an added display or an old Amazon Fire tablet, you’ll likely be running into problems, because the one second is to short to redraw the dashboard, and the next run has already been started.
But in most cases, like modern phones or computers, you won’t get in any trouble. 
Just keep in mind, that you changed that value, so if problems come up, you know where to look.
Nice style btw.
1 Like
Awesome sidebar, love using this on my homeassistant dashboard,
Would it be possible to have a dismissable notification for the garbage collection ?
How did you get the weater widget into the sidebar?
Awesome!!
How did you get the button cards like that
i would love those icons and white glow when its on
Anyone having trouble with this under 2022.7?
1 Like
*** Deleted, as further testing has changed the situation… see new message below ***
Any ideas why I cant get the active menu item background to go fully transparent? Setting colours works, setting alpha levels work, but fully transparent still has a layer of “alpha” to it. Have tried different ways of setting transparent such as “transparent” “#00000000” etc.
Code snippet:
style: |
:host {
--sidebar-text-color: #000;
}
.sidebarMenu li.active {
background-color: transparent!important;
font-weight: bold!important;
}
.digitalClock {
text-align: center;
}
.date {
text-align: center;
}
.sidebarMenu li {
line-height: 80px !important;
text-align: center;
}
Screenshot:
1 Like
BTW, if you want to get a LEFT sidebar w/o using a custom sidebar - you may use a conventional sidebar + card-mod-theme:
Hi all, hoping someone might be able to point me in the right direction. I’ve added the sidebar to my config, and it seems to be working ok apart from the bottom bar.
I have added the below config, and the 3 buttons sometimes display, and sometimes don’t.
After some investigation, it appears like the following is happening:
- If the three buttons are also included in the ‘view/page’ that is opened, then the buttons appear in the side bar
- If the three buttons are not included in the view config, then the buttons don’t appear in the side bar
- If the three buttons are included in the view config, but in a different ‘view/page’ to that which was initially opened, the buttons don’t appear.
Have played around, cleared caches etc, also looked at this link which @markus78 had previously posted, but nothing seems to make a difference to the above behaviour
Any thoughts much appreciated!
Sidebar Config:
sidebar:
digitalClock: true
date: true
dateFormat: ddd DD MMMM
width:
tablet: 20
desktop: 20
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Home
icon: mdi:home
active: true
- action: navigate
navigation_path: /lovelace/music
name: Music
icon: mdi:music
- action: navigate
navigation_path: /lovelace/climate
name: Climate
icon: mdi:temperature-celsius
- action: navigate
navigation_path: /lovelace/cameras
name: Cameras
icon: mdi:cctv
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- type: button
entity: binary_sensor.bluey
name: Bluey
show_name: true
show_icon: true
show_state: false
tap_action:
action: none
theme: Sidebar Cats
- type: button
entity: cover.garage_door_msg100_main_channel
name: Garage
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
theme: Sidebar Garage
- type: button
entity: binary_sensor.bandit
name: Bandit
show_name: true
show_icon: true
show_state: false
tap_action:
action: none
theme: Sidebar Cats
cardStyle: |
:host {
width: 95%;
position: absolute;
bottom: 0;
left: 0;
}
template: |
<li>
{% if now().hour < 5 %} Good night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
style: |
:host {
--sidebar-background: rgba(43,55,78,1);
--digitalClock-font-size: 10px !important;
--digitalClock-font-weight: bold !important;
--border-radius: 25px;
box-shadow: inset -11px 0px 6px 1px #242e42;
}
h1 {
text-align:center;
}
h2 {
text-align:center;
}
.sidebarMenu li {
}
.sidebarMenu li.active {
font-weight: bold;
}
.digitalClock {
padding-top: 10%;
font-size: 50px !important;
}
.date {
padding-top: 1%;
font-size: 25px !important;
}
View Config (with the buttons configured, resulting in them to also be seen in the sidebar)
views:
- theme: noctis
title: Home
icon: mdi:home
path: home
badges: []
cards:
- square: false
columns: 1
type: grid
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.home_hourly
- type: horizontal-stack
cards:
- show_name: false
show_icon: false
type: button
entity: binary_sensor.bluey
name: Bluey
show_state: false
tap_action:
action: none
theme: Sidebar Cats
- show_name: false
show_icon: false
type: button
entity: cover.garage_door_msg100_main_channel
name: Garage
show_state: false
tap_action:
action: toggle
theme: Sidebar Garage
- show_name: false
show_icon: false
type: button
entity: binary_sensor.bandit
name: Bandit
show_state: false
tap_action:
action: none
theme: Sidebar Cats
Has anyone ever tried to put a top card in which replicates the function of the bottom card, just about the clock? I have a menu bar which shows the status of doors etc which I would love to have at the very top above the clock
I am trying to edit the JS file to remove the name element and change the size of the icons, but I have edited the file and it doesn’t seem to change anything. I am pretty sure I am editing the right elements, does HACS or HA cache the source file somewhere else so it can’t be edited?!?!?
Ok have worked out how to edit the margins to give the “effect” of having no names, so that will do for now on that! But hoping anyone can help with a few other questions I have, referring to the screenshot below (work in progress!):
- How do I make the icons bigger? Have tried editing the ha-icon element but doesn’t to change the size.
- What is the red oval and how do I remove it? Seems to be a background but can’t for the life of me work out what it is the background of?!?!
- Any font suggestions? Not happy with the current font
code:
sidebar:
clock: false
digitalClock: true
date: false
hideTopMenu: true
style: |
:host {
--sidebar-background: rgb(var(--color-grey-bg));
--sidebar-text-color: var(--primary-text-color);
--face-color: var(--primary-background-color);
--face-border-color: #FFF;
--clock-hands-color: var(--primary-color);
--clock-seconds-hand-color: var(--light-primary-color);
--clock-middle-background: var(--primary-background-color);
--clock-middle-border: #000;
}
.sidebarMenu li.active ha-icon {
color: var(--main-theme-hex) !important;
}
.sidebarMenu li ha-icon {
float: right;
}
.sidebarMenu li.active {
}
.sidebarMenu {
list-style: none;
margin-top: 0px !important;
padding-top: 0px !important;
padding-bottom: 20px !important;
margin-left: 15px !important;
padding-left: 0px !important;
padding-right: 0px !important;
border-top: none !important;
border-bottom: none !important;
}
.digitalClock {
text-align: center !important;
font-weight: bold;
font-size: 22px !important;
color: var(--main-theme-hex);
padding-bottom: 0px !important;
line-height: 20px;
padding-top: 0px !important;
}
.date {
text-align: left;
padding-top: 1px;
font-weight: bold;
line-height: 10px;
}
.bottom {
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
}
.sidebarMenu li {
line-height: 70px !important;
}
width:
mobile: 0
tablet: 7
desktop: 7
sidebarMenu:
- action: navigate
navigation_path: "/ui-lovelace-tablet/home"
# name: ""
active: true
icon: mdi:home-account
- action: navigate
navigation_path: "/ui-lovelace-tablet/presence"
# name: ""
active: true
icon: mdi:thermometer
- action: navigate
navigation_path: "/ui-lovelace-tablet/climate"
# name: ""
active: true
icon: mdi:map-marker
- action: navigate
navigation_path: "/ui-lovelace-tablet/settings"
# name: ""
active: true
icon: mdi:cog-outline
bottomCard:
type: custom:stack-in-card
cardOptions:
keep:
box_shadow: false
margin: true
border_radius: true
background: true
outer_padding: true
cards:
- !include 'favourites_bar_vert.yaml'
cardStyle: |
:host {
width: 95%;
position: absolute;
text-align: center;
bottom: 5px;
left: 5%;
}
ha-card {
background: transparent;
color: #FFF;
box-shadow: none !important;
width: 100% !important;
}
4 Likes
Can u please share your yaml? Looks great! 
try this
style: |
ha-icon {
--mdc-icon-size: 36px;
}