Is it possible to set the weather card under the date?
Unfortunately, I’ve dropped the use of the sidebar entirely due to loading bugs and it wasn’t working that well for me. The code has been sent to the dark abyss 
1 Like
Hi!
is it posseble to add a card before the clock? i´d like to add home and not-home images of family members on top
Hi @DBuit
I’ve installed this and added some sample code to my raw configuration for my page and a sidebar appears only but it’s just a complete black sidebar with nothing showing no menus or clock etc.
this is the code i’ve tried so far have you any ideas ?
I’m not sure if i need to add any code anywhere else alongside the raw configuration.
Thanks
sidebar:
width:
mobile: 0
tablet: 25
desktop: 20
digitalClock: true
hideTopMenu: false
style: |
:host {
--sidebar-background: #FFF;
--sidebar-text-color: #000;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
sidebarMenu:
- action: navigate
navigation_path: lovelace-mobile/home
name: Home
active: true
- action: navigate
navigation_path: /lovelace-mobile/heating
name: Heating
active: true
- action: navigate
navigation_path: /lovelace-mobile/cameras
name: Cameras
- action: navigate
navigation_path: lovelace-mobile/ground-floor
name: Downstairs
- action: toggle
entity: light.room_lamp
name: Room Lamp
icon: mdi:led-strip-variant
Hi
I’m having an issue that my sidebar isnt always from top to bottom on mobile tablet.
If i hit refresh its from top to bottom , then after x time, it isnt anymore
on laptop theres no issue
any idea?
Edit: it seems only to happen on pages where panel is false,
when using homekit style card with panel true: it doesnt happen
I cant use the panel true on all pages cause i have multiple cards on those
Very nice, trying to get this working… BUT : is it possible to combine the sidebar with a grid-layout ?
This code doesn’t seem to work:
‘’’
sidebar:
title: null
clock: false
digitalClock: true
digitalClockWithSeconds: true
twelveHourVersion: false
period: false
date: true
hideTopMenu: false
hideHassSidebar: false
showTopMenuOnMobile: true
dateformat: dddd, DD MMMM YYYY
style: |
:host {
–sidebar-background: var(–primary-background-color);
–sidebar-text-color: var(–primary-text-color);
–border-radius: 5px;
–face-color: #FFF;
–face-border-color: #FFF;
–clock-hands-color: #000;
–clock-seconds-hand-color: #FF4B3E;
–clock-middle-background: #FFF;
–clock-middle-border: #000;
box-shadow: inset -38px -3px 11px -28px var(–light-primary-color);
border-radius: 15px 0px 0px 15px;
}
#customSidebar {
z-index: 9999!important;
}
.sidebarMenu li {
line-height: 35px!important;
color: var(–primary-text-color)!important;
}
.sidebarMenu li ha-icon {
color: white!important;
}
.bottom {
width: 100% !important;
}
.sidebarMenu li.active {
background-color: var(–light-primary-color)!important;
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
color: white!important;
}
.digitalClock {
padding-bottom: 5px;
padding-top: 15px
}
.digitalClock {
color: rgba(255, 255, 255, 0.7)!important;
font-size: 50px !important;
font-weight: 500!important;
letter-spacing: -0.05vw!important;
text-align: center;
}
.date {
padding-bottom: 10px;
color: rgba(255, 255, 255, 0.3);
font-size: 25px;
font-weight: 300;
text-align: center;
letter-spacing: -0.05vw;
}
.template li {
color: rgba(255, 255, 255, 0.7)!important;
font-size:.1.3vw!important;
font-weight: 200!important;
opacity: 0.3;
letter-spacing: -0.05vw!important;
text-align: center;
}
template: |
{% 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 %}{{user}}
views:
- type: custom:grid-layout
path: 1
layout:
#default
grid-gap: var(–custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
“sidebar . . . .”
“sidebar vardagsrum studio sovrum .”
“sidebar media övrigt hemma .”
“sidebar footer footer footer .”
‘’’
Hi. I run into an issue with bottomCard. Before today I was using UI mode and bottomCard was working just fine. Then I decided to switch to yaml mode as it is a way more convenient to edit and structure code. And immediately run into an issue with bottomCard component. When it is added and has horizontal or vertical stacks - it doesn’t seem to be working. (a single card works fine). Here is an example of code:
resources:
- url: /hacsfiles/sidebar-card/sidebar-card.js
type: module
sidebar:
style: |
:host {
--sidebar-background: --sidebar-background: #210443;;
background-image: linear-gradient(190deg, rgba(10,10,10,1) 0%, rgba(34,34,34,1) 58%, rgba(11,11,11,1) 100%);
--sidebar-text-color: red;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
.digitalClock {
padding-bottom: 5px;
padding-top: 50px
}
h1.digitalClock {
color: rgba(255, 255, 255, 0.7)!important;
font-size: 4.41vw!important;
font-weight: 500!important;
letter-spacing: -0.05vw!important;
text-align: center;
display:inline-block;
padding-left: 0px;
padding-top: 10px;
}
.date {
padding-bottom: 10px;
color: rgba(255, 255, 255, 0.4);
font-size: 1.3vw;
font-weight: 600;
text-align: center;
letter-spacing: -0.05vw;
display:inline-block;
}
digitalClock: true
clock: false
twelveHourVersion: true
period: true
hideTopMenu: false
date: true
dateFormat: dddd, DD MMMM YYYY
title: ' '
width:
desktop: 25
mobile: 0
tablet: 25
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- type: "custom:button-card"
color_type: card
color: rgb(255, 255, 255)
icon: mdi:home
- type: "custom:button-card"
color_type: card
color: rgb(255, 255, 255)
icon: mdi:lightbulb
cardStyle: |
:host {
width: 100%;
background-color:#FFF;
}
views:
- !include /config/UI/views/home.yaml
- !include /config/UI/views/spotify.yaml
HA doesn’t show any errors and stacks are working fine on a test dashboard. I would appreciate any suggestions. Thank you.
PS. There are following errors shown in dev mode:
As mentioned a few posts up:
Another people with this bug : Bottom card issue · Issue #45 · DBuit/sidebar-card · GitHub ?
Has anyone got a solid way to make the sidebar background transparent? I’ve had a read though the above replies, and can see some people have achieved it, however I can’t get mine working. I’ve tried messing around with the HTML code in developer console but couldn’t figure that out.
I want my blue gradient background (which is an image) to extend into the sidebar, and to have the sidebar background semi transparent.
Here is my sidebar config:
digitalClock: true
date: true
width:
desktop: 25
sidebarMenu:
- action: navigate
name: "Home"
navigation_path: "/lovelace-yaml/home"
active: true
- action: navigate
name: "Floorplan"
navigation_path: "/lovelace-yaml/floorplan"
active: true
- action: navigate
name: "Lights"
- action: navigate
name: "Cameras"
- action: navigate
name: "Internet"
navigation_path: "/lovelace-yaml/internet"
bottomCard:
style: |
:host {
--sidebar-background: rgba(255,255,255,0);
--digitalClock-font-size: 10px !important;
--digitalClock-font-weight: bold !important;
--border-radius: 25px;
}
.sidebarMenu li.active {
font-weight: bold;
}
.digitalClock {
padding-left: 5%;
padding-top: 10%;
font-size: 100px !important;
}
.date {
padding-left: 25%;
padding-top: 1%;
font-size
}
Is it possible to have the side bar pop out or “autohide” somehow? Mainly asking for mobile support. Adding the side bar for mobile makes it almost unusable. I know you can change the width of it, but I’d like it to pop out if I ever need to use it on my mobile. Maybe a tap in the top left corner or something?
Do u mind sharing your code? clean!! :)))
any idea how display Energy with Custom Sidebar Card ?
- action: navigate
name: Energia
navigation_path: /energy
It displays full screen all the time and the sidebar disappears.
any idea ?
have you a solution? i have the same problem