Lovelace: custom sidebar card

doktordoc · April 11, 2020, 9:09am

i was thinking about homekit card- solved
i try to reinstall sidebar but nothing, no bottom card
was there for couple seconds and then gone

tpx01 · April 11, 2020, 7:25pm

All seems good @DBuit! Bottom card working fine except with the decluttering card. Rather weird sinds the same decluttering card is working fine in homekit-card too. Found a small bug in your src code btw…

Before:

sidebarInner.style.height = (100 * _1vh) - header.offsetHeight + 'px';

Should be:

sidebarInner.style.height = (100 * _1vh) - headerHeight + 'px';

Would it be possible to recalculate the updateSidebarSize when a scroll is triggered on the view pane? I have a lot of light entities, when you scroll the bottom card remains locked in the same position

Flagun · April 16, 2020, 9:08am

I have an issue with the card. I use simple weather card and it changes it’s length depending on the weather status (which is a string). Is it possible to set a fix length?

doktordoc · April 16, 2020, 9:46pm

How did you implement weather card in sidebar
Can sidebar be transparent

doktordoc · April 17, 2020, 6:47pm

Can be weather be in sidebar
Transparent sidebar - is it possible ?
Anybody trying transparent

tpx01 · April 18, 2020, 8:39pm

@doktordoc Not possible due to current configuration. You can do a split of your background and set it on the sidebar though…

doktordoc · April 18, 2020, 9:45pm

And how to add background on sidebar
Thx

Yoinkz · April 20, 2020, 7:39am

Hi,
I really like the smooth view you created for your Nest Hub - and I tried using some of your code to my Hub as well.

Are the Home Assistant logo, Dinner and the Movie icons just buttons that sets scenes or what exactly does they do?

heartkingz · April 20, 2020, 8:20am

Thanks! These buttons are input booleans that start scenes based on the custom button card.

Yoinkz · April 20, 2020, 8:24am

Argh yes, then I understand
How come the last Movie icon is white and the others are blue - is that depending on whether the input boolean is True or False?

If so, when will all of them be blue, will it reset automatically or will the last button pressed just be shown as “active”?

Yoinkz · April 20, 2020, 8:35am

Hey,

When I enter the page where I’ve added the sidebar it doesn’t load at first. I need to hit F5 once in order to get it showing. It needs to be done every single time I enter it.

Do I need to add some preload thing or what am I missing?

heartkingz · April 20, 2020, 8:43am

Blue means on, white means off. When I press de home-assistent icon the lights in the living room go on including the dining table, the icon next to that. When I’m pressing the movie button, it start a more dimmed light scene and by automation the left two icons are turing off.

nathbullen · May 3, 2020, 4:00am

Hey guys, I’m really new to HA in general, I’ve just stumbled across this sidebar and I’m trying to integrated it into my setup. I’ve gotten it working, but the bottomCard doesn’t seem to work, regardless of which card I configure to appear there.
Also, I can’t seem to change the size of the digital clock, and can’t change the font of any of the template text below either. If anyone could help me out that would be much appriciated!

mmatesic01 · May 3, 2020, 5:56pm

Hello,

Can anyone confirm that calling service (action: call-service) as browser_mod.popup service, does not work when pressing sidebarMenu ?

I have tried it myself and I get po positive result. No error, but also no popup.

jwnesbitt · May 9, 2020, 6:55pm

Hello, I am trying to get my sidebar black, but cant seem to get it working, screenshot attatched.

code here

sidebar:
name: LEGACURRY
digitalClock: true
hideTopMenu: true
showTopMenuOnMobile: false
style: |
:host {
–sidebar-background: #111010 ;
–sidebar-text-color: #fae6e2;
}
.sidebarMenu li.active {
background-color: #cc3e22 !important;
}
.digitalClock {
padding-left: 28px;
padding-bottom: 70px;
padding-top: 10px
}
.digitalClock {
font-size: 65px;
line-height: 65px;
}
.sidebarMenu li.active {
background-color: #15232c !important;
}
sidebarMenu:
#rest of menu here
width:
desktop: 18
mobile: 0
tablet: 25
style:
background: #000000

Vintage89 · May 15, 2020, 5:59am

Is there a way of setting a background image instead of color?

doktordoc · May 15, 2020, 10:48am

Is there anyway that sidebar menu: action navigate automatically switch from one menu to another
My home screen is weather, then I navigate to light a, and then for example after 5 min turns back auto on weather

mrPling · May 21, 2020, 5:57am

Just to add some information to this solution: if you are using multiple dashboards, this will not load if the dashboard which it is added to is not set to default. Set it as the default dashboard, and it should load fine.

nathbullen · May 22, 2020, 2:22am

Just curious - how did you manage to make those horizontal divider lines? I’ve tried everything I can think of, and I’ve resorted to just a line of “_____” in the config text

doktordoc · May 24, 2020, 7:33am

Sorry for late response
what lines do you mean, in sidebar? They are automatic there