Nope srry impossible 
only with custom background thing maybe 
i could check that out for now not possible
Thx anyway
Hello, i apologize for this noob’s question but where do you put the code in order to set up a sidebar-card.
I tried in the yaml file configuration of my lovelace dashboard, but nothing appears after saving the file and restart.
Can someone help me to understand ?
Hi @guims78,
Where did you put the sidebar in your lovelace config? can you share your configuration?
Hello,
i put it here :
open the menu on the right to access the yaml configuration.
After, i pasted the code here, between “title” and “views”
This is great been that extra bit I needed for my config. I have one question. I have 3 dashboards. Dashboard 1 & 2 use a input select/automation for the theme and I am not using sidebar-card for them. Dashboard 3 I am working on a whole new setup which includes the sidebar-card. I do not want my theme from the other 2 dashboards. I created a theme called Dark and it is in the first view. In the page everything works as expected except the sidebar-card as it is loaded before the page and it is taking the theme from homeassistant as it is the main theme with the input select/automation.
Is there anyway to tell the sidebar-card to load a theme like some lovelace cards have? Or do I need to use style for every card/entity/text… in the sidebar-card. I use style for alot of cards so not a big deal just wondering if there is an easier way.
That should be good.
Can you check developer console of the browser? maybe an error?
And can you share your configuration?
Hi,
Right now i think you need to use the style
Hi guys,
Maybe an stupid question but how can I remove the top menu bar?
Or is this only removable with the custom header plugin?
Hi, where do you place the template code into. Ive been trying to get this to work all evening with no luck. Ive tested the template code with my light sensors in HA and its working in the test page, but i dont know where to place the code to get it to actually work in the side panel card.
custom_header:
compact_mode: true
fit_tabs: true
tab_icons_and_text: true
disable_sidebar: true
hide_header: true
theme: kibibit
template: |
sensors:
number_of_lights_on:
unit_of_measurement: 'on'
value_template: >
{% set lights = [
states.light.master_bedroom,
states.light.livingroom_2,
states.light.dining_room,
states.light.hall_light,
states.light.kitchen_light,
states.light.kitchen_cabinets,
states.light.stair_lights,
] %}
{{ lights | selectattr('state','eq','on') | list | count }}
sidebar:
title: null
width:
mobile: 0
tablet: 20
desktop: 20
clock: false
digitalClock: true
date: true
dateFormat: DD MMMM YYYY
style: |
:host {
--sidebar-background: #000;
--sidebar-text-color: #FFF;
--face-color: #81d8d0;
--face-border-color: #c9658f;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #000;
--clock-middle-border: #81d8d0;
}
template: >
<li>
{% 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 %}
</li>
{% if states('sensor.current_lights_on') | float > 0 %}
<li>{{states('sensor.current_lights_on')}} light on</li> {% endif %}
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
icon: 'mdi:home'
name: Home
active: true
- action: navigate
navigation_path: /lovelace/lights
icon: 'mdi:lamp'
name: Lights
active: true
- action: navigate
navigation_path: /lovelace/livingroom
icon: 'mdi:sofa'
name: Living room
- action: navigate
navigation_path: /lovelace/bedroom
icon: 'mdi:bed'
name: Bedroom
- action: navigate
navigation_path: /lovelace/downstairs
icon: 'bha:stairs'
name: Downstairs
active: true
views:
- panel: false
path: default_view
theme: kibibit
title: Home
icon: 'mdi:home'
REST OF CODE REMOVED
That code is for creating template sensors, which you can then call in the lovelace card. You need to add them in configuration.yaml View official docs for more instructions: https://www.home-assistant.io/integrations/template/
That code creates a sensor called sensor.number_of_lights_on that counts the lights included in the list. The state of that sensor reflects that counts. So when you use that created sensor in Lovelace, for instance with markdown you can create dynamic titles/sentences like Glass gave an example of:
There are currently {{states('sensor.number_of_lights_on')}} lights on.
Where {{states('sensor.number_of_lights_on')}} will give the number of lights on.
So if you have 3 lights on that are included in that code, it will say: There are currently 3 lights on.
Hope you this clears things up.
Hi thanks for your reply. I tried putting the code into configuration.yaml but this was throwing up an error when i checked the confing inside HA. This is my current configuration.yaml file. And im not getting anything showing in the frontend. Thanks
frontend:
themes: !include themes.yaml
themes: !include_dir_merge_named themes
javascript_version: latest
extra_module_url:
- /local/hass-bha-icons.js
frontend:
themes: !include themes.yaml
themes: !include_dir_merge_named themes
javascript_version: latest
extra_module_url:
- /local/hass-bha-icons.js
sensor:
- platform: template
sensors:
number_of_lights_on:
unit_of_measurement: 'on'
value_template: >
{% set lights = [
states.light.master_bedroom,
states.light.livingroom_2,
states.light.dining_room,
states.light.hall_light,
states.light.kitchen_light,
states.light.kitchen_cabinets,
states.light.stair_lights,
] %}
{{ lights | selectattr('state','eq','on') | list | count }}
#setting up google calendar integration
google:
client_id:
client_secret:
resources:
- type: js
url: /community/simple-weather-card/simple-weather-card-bundle.js
- type: css
url: https://fonts.googleapis.com/css?family=Comfortaa&display=swap
# Text to speech
tts:
- platform: google_translate
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
#setting up google calendar integration
google:
client_id: Removed for security
client_secret: Super secret security key removed
resources:
- type: js
url: /community/simple-weather-card/simple-weather-card-bundle.js
- type: css
url: https://fonts.googleapis.com/css?family=Comfortaa&display=swap
# Text to speech
tts:
- platform: google_translate
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
What was the error then? Paste the error log before people start guessing stuff, and wasting time 
Also, why do you have duplicated entries (google, tts, resources)?? Also, please hide your google account credentials in your post!
ooops, it looks as though some of the entries were duplicated and i missed that, thanks.
The check config isnt throwing up any errors now, bur its still not working, also as you can see from the screenshot, the sun badge isnt working now either.
Sorry im fairly new to this, so still trying to get my head around it all.
You just copy/pasted his code. I’m pretty sure your lights have different names right? Just a tip: never just copy/paste code from someone else. Use code to study it, so you understand what does and then replace it with your own entities. Also, if you add stuff like sensors, you have to restart Home Assistant server, otherwise you will not get the sensor.
Replace the entitiy names of the lights in his code, with your own.
Regarding to sun, most likely you changed some stuff you’re not aware of which caused it to be removed. You can add that manually: https://www.home-assistant.io/integrations/sun/
It’s ok if you’re new, we were all new at some point. I’ve been using HA for 9 months now (I didn’t have any programming skills) and have created some amazing stuff by studying code and just trying stuff for days. One thing to do note though: you need to really read the official documents of everything you want to use and understand what everything does by just trial and error. Otherwise, you’re just copying pieces of code and you will never understand why it doesn’t work.
1 Like
Hi, thanks
The light sensors are my own ones. I think ive found the issue, one of those dumb ’ OH MY GOD’ cant believe it was that all along, mistakes. A simple name difference between the sensor in the config file and the front end file. Got it finally working, now to fix what i broke with the sun sensor
Thank you for the help, all working now and back to normal.
Cheers
1 Like
When i’m at the tab ‘home’ the menu item is a bit darker, when i go to the tab ‘media’ some other random tab is getting darker. When i click ‘media’ again it gets darker. Any idea?
