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;
}
Thanks a bunch for this, will give it a try! Also, any idea how to remove the background behind the active menu item? Mine seems to come up as a red oval which I am trying to get rid of
Earlier I was using the custom sidebar on my desktop and my phone which has been working flawlessly. Today I bought my first Nest hub but when I try to cast my dashboard through the Google Cast-integration (since CATT doesn’t seem to work anymore) the sidebar doesn’t show up at all.
Any ideas? Anyone had the same issues?
sidebar:
digitalClock: true
date: true
width:
mobile: 25
tablet: 25
desktop: 25
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Home
icon: mdi:home-outline
active: true
- action: navigate
navigation_path: /lovelace/lampor
name: Lights
icon: mdi:lamps-outline
active: true
- action: navigate
navigation_path: /lovelace/scenes
name: Scenes
active: true
icon: mdi:palette-outline
- action: navigate
navigation_path: /lovelace/multimedia
name: Multimedia
active: true
icon: mdi:cast
- action: navigate
navigation_path: /lovelace/media
name: Media
active: true
icon: mdi:spotify
- action: navigate
navigation_path: /lovelace/automations
name: Automations
active: true
icon: mdi:home-automation
- action: navigate
navigation_path: /lovelace/oliver
name: Oliver
active: true
icon: mdi:guitar-pick
- action: navigate
navigation_path: /lovelace/linnea
name: Linnea
active: true
icon: mdi:cat
style: |
:host {
--sidebar-background: #2b2b2b;
--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;
Hey, no idea sorry, the only thing I can suggest is remove the lot and slowly add stuff in line by line, tats how I fixed my stuff LOL
1 Like
It doesn’t work for me at all on the Nest Hub, despite working on every other device.
Can someone give me a tipp, how i can change the border color and the mouseover color of the menu? It went to light blue but i don´t know why.
As an option under sidebar place this → Style:
It will change background.
The .sidebarMenu li.active gives the color when the link is active.
sidebar:
style: |
:host {
--sidebar-background: #000D29;
--sidebar-text-color: #BDC1C6;
--face-color: #00F031;
--face-border-color: #FFF;
background-image: linear-gradient(115051deg, #210443, #210c49, #21144e, #221b53, #222158, #1e285d, #1b2e61, #183464, #123c67, #124368, #184a68, #225068);
}
.sidebarMenu li.active {
background-color: rgba(35, 39, 41, 0.6)!important;
icon-size: 225px;
}
1 Like
Hey, this looks awesome, how did you manage to do the top part? thanks
Any possible way how to add also topcard? I would like to have a greeting on the top (I use mushroom title card for this.