Lovelace: custom sidebar card

Thanks a lot.
One more thing (I know I am demanding!) can you make the background of sidebarMenu items transparent? There is a grey background when the entity is on. If this is something I can control using CSS please let me know where. I tried to do

.sidebarMenu li.active {
  background-color: rgba(255,255,255,0);
}

but this had no effect

Css works add !important to make it overwrite the active css rule

so:

.sidebarMenu li.active {
  background-color: rgba(255,255,255,0)!important;
}

or

.sidebarMenu li.active {
  background-color: transparent!important;
}
2 Likes

Thank you Sir!

That definitely helped. But it cannot get it to display when the hideTopMenu is true. And the top menu wont hide.

Hi, Can you share your config.

Hi,

Please can someone help me with the config for this sidebar?

Literally driving me crazy

I have installed it via HACS and it has put the .js in the following location:
/config/www/community/sidebar-card/sidebar-card.js

I have referenced this in my raw config editor

Am I missing something?

I keep getting errors that custom:sidebar-card custom element cannot be found

I can’t see the sidebar in any lovelace view

Many thanks

I’ve used the manual install method and now I am getting somewhere. I’ll see how I get on :wink:

1 Like
resources:
  - type: module
    url: /community_plugin/weather-card/weather-card.js
  - type: module
    url: /community_plugin/lovelace-fold-entity-row/fold-entity-row.js
  - type: module
    url: /community_plugin/lovelace-slider-entity-row/slider-entity-row.js
  - type: js
    url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
  - type: module
    url: /community_plugin/mini-media-player/mini-media-player.js
  - type: moduleault
    url: /community_plugin/lovelace-card-mod/card-mod.js
  - type: module
    url: /community_plugin/roku-card/roku-card.js
  - type: module
    url: /community_plugin/spotify-card/spotify-card.js
  - type: js
    url: /community_plugin/monster-card/monster-card.js
  - type: module
    url: /community_plugin/button-card/button-card.js
  - type: js
    url: /community_plugin/lovelace-home-feed-card/lovelace-home-feed-card.js
  - type: js
    url: /community_plugin/light-entity-card/light-entity-card.js
  - type: module
    url: /local/custom_ui/dark-sky-weather-card.js?v=7.2
  - type: module
    url: /community_plugin/bignumber-card/bignumber-card.js
  - type: module
    url: /community_plugin/tv-card/tv-card.js
  - type: js
    url: /local/layout-card.js
  - type: js
    url: /local/card-tools.js
  - type: module
    url: /community_plugin/banner-card/banner-card.js
  - type: module
    url: /community_plugin/mini-media-player/mini-media-player-bundle.js
  - type: module
    url: /community_plugin/sidebar-card/sidebar-card.js
sidebar:
  clock: true
  hideTopMenu: true
  showTopMenuOnMobile: true
  digitalClock: true
  sidebarMenu:
    - action: navigate
      name: Home
      navigation_path: /lovelace/default_view
    - action: navigate
      name: Livingroom
      navigation_path: /lovelace/livingroom
    - action: navigate
      name: Master Bedroom
      navigation_path: /lovelace/master-bedroom
    - action: navigate
      name: Second Bedroom
      navigation_path: /lovelace/second-bedroom
    - action: navigate
      name: Diningroom
      navigation_path: /lovelace/dining-room
    - action: navigate
      name: Kitchen
      navigation_path: /lovelace/kitchen
    - action: navigate
      name: Terrace
      navigation_path: /lovelace/test-terrace
    - action: navigate
      name: Bathroom
      navigation_path: /lovelace/bathroom
    - action: navigate
      name: The Lab
      navigation_path: /lovelace/general-test
  title: MY HOME
  width:
    desktop: 20
    mobile: 0
    tablet: 25

Here are the relevant portions and some.

great plugin!
I tried to install it but it seems I’ve always the top of the bar “cut out”; how can this be fixed?
as well will be very nice to be able to change the font of the digital clock to make it bolder, for example.

This is bloody genius! Thanks for your work :wink:

Hi @papperone,

It looks a bit weird for you can you share your lovelace config?
If you want to change the font to make it more bold you can use the style options of the card to change the css rules for the clock, let me know if you need some help with the css.

It’s very simple, but I even tried removing either “style” and “width” sections and no changes.
If you could help a bit on font change will be great, but if I can’t solve the spacing problem this panel is useless for me…

sidebar:
  digitalClock: true
  clock: true
  hideTopMenu: false
  style: |
    :host {
        --sidebar-background: transparent!important;
        --sidebar-text-color: #EEE;
        --face-color: #333;
        --face-border-color: #EEE;
        --clock-hands-color: #FFF;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: transparent!important;
        --clock-middle-border: #EEE;
    }
  width:
    mobile: 0
    tablet: 25
    desktop: 20

can you share a bit more of you lovelace how you views are build.
Do you currently see your other cards in the view? and where are they positioned? maybe a fullscreen screenshot to get an idea of the problem.

all views are like this, I use nothing special and I’ve no idea what to check.

Like usual, your cards are amazing!
I use all of them, but these one (sidebar card) can I suggest to add the posibility to show the day, also in the bottom to can use another lovelace cards?
I post a picture of Mattias card like an example!

I have the same issue as papperone also, fyi.

Would be nice if you can target this sidebar to specific users or devices.
I’ve made an KIOSK user for my ipad which is mounted on the wall.

1 Like
resources:
  - url: /local/sidebar-card.js
    type: module   

sidebar:
  title: "Home"
  digitalClock: true
  hideTopMenu: true
  sidebarMenu:
    - action: navigate
      navigation_path: "/lovelace/home"
      name: "Home"
      active: true
      
  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;
    }
  template: |
    <li>
      {% if now().hour  < 5 %} Goede nacht {{'\U0001F634'}}
      {% elif now().hour < 12 %} Goedemorgen {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Goedenmiddag {{'\U0001F44B\U0001F3FB'}}
      {% else %} Goedenavond {{'\U0001F44B\U0001F3FB'}}{% endif %}
    </li>

views:
  - view:

doesnt hide the top menu for me…? any suggestions?

Yea hide top menu doesn’t seem to work right now, actually makes sidebar disappear for me.

1 Like

@Bowhuntr11, @papperone,

Just released V0.1.3 please update and see if it works now. If not check your browsers console. And see if it says: “Header found!” OR “Header not found!” AND if it says it’s will show or hide the header.

Let me know!
If you use HACS sometimes it works best to update and than reinstall the plugin to make sure all it uses latest version