Lovelace: custom sidebar card

[Darbos]

Just wanted to let you know I figured it out. I was using differnent dashboards, when I add tabs the “old” way prior to 107 it works.

Thanks for all the help

[heartkingz]

Glad you figured it out! What do you mean by adding tabs the “old” way?

[Flo.C (Flo)]

Sadly not. Happy for a solution

[Tomiam (Tom)]

Since moving to 0.107.7. The selected tab is no longer ‘highlighted’ any ideas?

Been messing with it on and off all day but this is what I have -

  style: |
    :host {
        --sidebar-background: 'rgba 50, 50, 50, .5';
        --sidebar-text-color: #ffffff;
        --border-radius: 5px;
    }
    .sidebarMenu li.active {
     background-color: #000000!important;
     }

TIA

[DBuit]

Hi man,

Did not know you could do that with custom header XD
Thanks for sharing.

I would like to add your additions if you can make the PR i will add it!

[DBuit]

Hi,

How is it going with the icons?
Maybe i can do something, most images shared last days are not shown for me…
What do you guys need in the sidebar?

[odiv (Duta Ovidiu)]

Hello @DBuit! Sincerrly I was asking If You are ok!
Can you include the Day under the clock?
Also If You can make a footer area where to put a card it Will be very use full!

[tpx01]

Ok, maybe we need to sync up as my code now does not contain any reference to cch anymore. Any conflict with reloading or ‘pre-loading’ is resolved in that way. That off course also means removing configuration properties. Maybe this is something you do or don’t want to do.

Next to that I’m looking into:

• getting the icons to work but do far no luck
• Integrating custom ha-card(s) on either top, middle or bottom of the sidebar

Should I create ‘issue/improvement’ on your GitHub so we can have the discussion over there?

[Darbos]

Anyway to make the clock 12 hour? And anyway to put a card in the sidebar?

Thanks!

[DBuit]

Yeah add it on github that is easier

[DBuit]

Hi guys,

Working on the date @odiv and make it possible to load custom card at the bottom of the sidebar.
Bottom card can also be used to make the icon.

Hope to get this ready tomorrow!

[DBuit]

Hello everyone,

Just released new version with 2 changes:

1. you can now add date: true to your config to show current date and you can add dateFormat to set a format how the date should be shown.
2. i also added option for custom card in the sidebar it is now only for the bottom so it is called bottomCard you can see some config options on github https://github.com/DBuit/sidebar-card

Let me know if it works! below quick screenshot with some buttons on the bottom of the sidebar and the date under the clock.

[dankitchen (Daniel)]

Hi, just trying using your example but doesn’t seem to load. I guess it might be the format of my code?

[DBuit]

Hi man,

It looks fine.
Any errors in the browser console maybe?
Just to be sure, you do have button-card installed?

[doktordoc (Sasa)]

it wont show bottom card
date is working
sorry for bad english

can you help
how to make templates, for good morning etc.
i dont understand templates

[dankitchen (Daniel)]

Yeah the button card is installed, I did wonder if it would be that but no, it’s there…

Just checked the console and I can’t even seen that it is loading the bottomCard unless I’m looking in the wrong place

[dankitchen (Daniel)]

Hi, sorry my fault, I still had a reference in my Lovelace resources to your very first release

I’ve removed it and I can now see it…cut of slightly, is that something I need to change?

Desktop View

Tablet View

sidebar settings (if they are related)

width:
mobile: 0
tablet: 25
desktop: 20
breakpoints:
mobile: 768
tablet: 1024

[DBuit]

Hi @dankitchen,

It is a problem with the card and different header heights. Gonna see of i van release a fix tomorrow!

[DBuit]

Hi @doktordoc,

Can you share your config?
Maybe An error in browser console?

[karma (karmah)]

I have the same problem … Stay out of the tablet screen.
But excellent work @DBuit