Lovelace: custom sidebar card

What are your tablet settings in the sidebar code ?

sidebar:
  active: true
  width:
    mobile: 0
    tablet: 25
    desktop: 11
  breakpoints:
    mobile: 768
    tablet: 768
    desktop: 1024

hey all, I tried to add a sidebar with just icons but the spacing was all over the bloody place, no matter what I tried, the only way to get it to look right was having words with it.
Has anyone managed to get it working with just icons, I basically want to maximise my tablet real estate.

Hi,

Do you have examples of use of the new possibilities added during update 0.1.9.7?

hi!
I’m having trouble coloring the sidebar.
I think I’m using the right codes but I can’t see the changes in the sidebar.
I also tried to put the original theme but I don’t notice any changes
is there any way to make the background transparent?

sidebar:
  clock: false
  digitalClock: true
  date: true
  dateFormat: DD/MM/YYYY
  hideTopMenu: false
  hideHassSidebar: false
  breakpoint:
    tablet: 1024
    desktop: 1024
  width:
    tablet: 30
    desktop: 20
  style: |
    :host {
      --sidebar-background: #6600FF;
      --sidebar-text-color: #000000;
      --face-color: #6600FF;
      --face-border-color: #FF0000;
      --clock-hands-color: #000;
      --border-radius: 5px;
      box-shadow: inset -38px -3px 11px -28px var(--light-primary-color);
      border-radius: 15px 0px 0px 15px;
1 Like

I struggled with transparency so I just made it the same colour as the rest.

    .sidebarMenu li {
        color: var(--sidebar-text-color, #000);
    }

Hope that helps

+1 for me too pls

I just installed this, great work. Is it possible to change the position of the template message? I would like it above the side menu.
I don’t have a title. Would it be possible to use template message as the title? So that good morning etc is shown at the top.

Hi.
Is there a possibility to set a good looking seperator inside the sidebar?

Hi, does anybody know how to open a browser mod popup window from the sidebar menu? The readme doesn’t go into too much detail on that. I can get it to work from the bottomCard but not from the main menu items.

I got it working in the end. For anyone that is stuck this is how I formatted mine. Obviously change the card type to suit your requirements.

- action: call-service
  service: browser_mod.popup
  service_data:
    content:
      type: custom:stack-in-card
      cards:
        - type: custom:stack-in-card

im having trouble with the icons, they are only visible when i click the names:

sidebar:
theme: Caule Black Green Glass
width:
mobile: 10
tablet: 10
desktop: 10
digitalClock: false
hideTopMenu: true
date: false
sidebarMenu:
- action: navigate
navigation_path: /koket-ny
name: home
active: true
icon: mdi:sofa
- action: navigate
navigation_path: /koket-ny/test-1
name: Huset
icon: mdi:ab-testing
active: true

and so on.

Look here : Icon of menu · Issue #104 · DBuit/sidebar-card · GitHub

1 Like

Where did you add this code?

I have managed to change the active icon colour and background colour but I can’t get the active font colour to work. Also trying to change size of clock and date, also make them bold but can’t get this to work either.

Any help appreciated. This is my code

Edit: I got the time and date in bold, there was a ; missing. Still can’t get the selected menu text to change colour. This is what I have:

Edit: Got it working, changed text-color to color.

kiosk_mode:
  kiosk: true
sidebar:
  title: null
  digitalClock: true
  date: true
  bottomcard: true
  style: |
    :host {
        --sidebar-background: rgb(225, 225, 225)!important;
        --sidebar-text-color: rgb(0, 0, 0)!important;
        --sidebar-icon-color: rgb(0, 0, 0)!important;
    }
    .sidebarMenu li.active {
      background-color: #000000!important;
      text-color: #FFFFFF!important;
      font-weight: bold;
    }
    .sidebarMenu li.active ha-icon {
      color: #FFFFFF!important;
    }
    .digitalClock {
      text-align: center;
      padding-bottom: 1px;
      padding-top: 20px;
      font-size: 80px!important;
      font-weight: bold;
      line-height: 100px;
    }
    .date {
        text-align: center;
        font-weight: bold;
    }
    h1 {
         text-align:center;
      }

How did you make the sensor to show how many lights or media players are on?
are just helpers or did you use some kind of intigration.

Also intressted in the one about the bins

how do i get the custom card to show under goedenmiddag? now it shows at the bottom and is only visible on desktop on tablet it just drops of and is not visible.

hi…how is it possible to make the weather and the graph, transparent? what iam doing wrong?


Hello. How to use the sidebar with the new sections functionality? Thank you

              background: none;

Is there a way to put weather under the clock?