Lovelace: custom sidebar card

weemaba999 · December 20, 2021, 11:51pm

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 .”
‘’’

dlsnet · December 22, 2021, 12:32am

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:

Luitertje · December 22, 2021, 8:01am

As mentioned a few posts up:

Gilles

Another people with this bug : Bottom card issue · Issue #45 · DBuit/sidebar-card · GitHub ?

sshaun_10 · January 8, 2022, 1:16am

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
        }

jsmith · January 29, 2022, 7:24am

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?

Marcus_Lundblad · February 17, 2022, 12:35pm

Do u mind sharing your code? clean!! :)))

xisio · March 15, 2022, 11:01am

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.

Gilles_C · March 16, 2022, 10:54am

With a lovelace page with card : Energy Cards - Home Assistant
You need to recreate a page.

xisio · March 18, 2022, 8:29am

Done, next question… how done this same with Media tab ?

xisio · March 29, 2022, 12:26pm

any idea ?

pimp1310 · April 2, 2022, 6:07pm

have you a solution? i have the same problem

Akira · April 2, 2022, 6:25pm

Hey, do you mind sharing your sidebar config? I like the css styling for your dashboard

Steveuk · April 3, 2022, 9:25pm

No sorry i stopped using this method as it was quite buggy.
I use the card-mod and custom layout cards instead now.

MLux · April 20, 2022, 11:45am

Hi, can you tell me how you do that?

Thx,

MLux

Steveuk · April 20, 2022, 12:40pm

You need to know how to work with yaml files and writing in them.
If so you start with creating a yaml dashboard and installed card mod and the custom:layout-card card.

MLux · May 3, 2022, 10:03am

How do i get a sidebar now with the diffrent cards?
Do you have a example?

Steveuk · May 3, 2022, 10:28am

Not really a example but my yamls are on HERE
It’s mainly everything that’s in the main Lovelace folder and the tablet.yaml.
The sidebar is in the components folder.

chench0 · May 4, 2022, 2:24am

Pardon for being a newbie but I am new to HACS and custom repos/modifying my lovelace etc. and I was wondering if someone could help me install this. I got as far as adding the custom repo and installing it to HA but not sure where to place configuration code.

Steveuk · May 4, 2022, 6:41am

I’ve not really used this in a while but I think you put it in your raw configuration.
So on your dashboard you will see 3 dots top right click then edit dashboard it may ask you about taking control just press yes.
Then click the dots again and click the raw configuration.
That’s where this code goes, I recommend creating a new dashboard to do all your testing on as you could easily mess things up in the raw config.

adzybee · May 11, 2022, 6:28am

Same issue here.
Any luck getting this issue sorted?