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;
}
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 
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
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.
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.
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.
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