I have custom header zo that is not the problem.
Can you check the browsers developer console for the messages?
Hello again @DBuit! For me it work like a charm on desktop and tablet, but on the IPhone I think something is not good!
Take a look at this picture and Maybe You can give me an ideea.
the code I use:
sidebar:
title: familia Duță
style: |
:host {
--sidebar-background: #081116 ;
--sidebar-text-color: #fff;
--face-color: #21353E;
--face-border-color: #21353E;
--clock-hands-color: #fff;
--clock-seconds-hand-color: #fff;
--clock-middle-background: #21353E;
--clock-middle-border: #21353E;
}
.sidebarMenu li.active {
background-color: #6A808D!important;
}
.digitalClock {
padding-left: 18px;
padding-bottom: 70px;
padding-top: 10px
}
.digitalClock {
font-size: 65px;
line-height: 65px;
}
template: |
<li>
{% if now().hour < 5 %} Buna seara {{'\U0001F634'}}
{% elif now().hour < 12 %} Buna dimineata {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Buna ziua {{'\U0001F44B\U0001F3FB'}}
{% else %} Buna seara {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
width:
mobile: 0
tablet: 25
desktop: 25
breakpoints:
mobile: 768
tablet: 1024
clock: false
hideTopMenu: true
showTopMenuOnMobile: false
digitalClock: true
digitalClockWithSeconds: false
sidebarMenu:
- action: navigate
navigation_path: "/lovelace/0"
name: "Acasa"
icon: mdi:home
active: true
- action: navigate
navigation_path: "/lovelace/1"
name: "Veranda"
icon: mdi:television-clean
- action: navigate
navigation_path: "/lovelace/2"
name: "Living room"
icon: mdi:sofa
- action: navigate
navigation_path: "/lovelace/dormitor"
name: "Dormitor"
icon: mdi:hotel
- action: navigate
navigation_path: "/lovelace/4"
name: "Baie"
icon: mdi:shower
- action: navigate
navigation_path: "/lovelace/5"
name: "Centrala"
icon: mdi:coolant-temperature
- action: navigate
navigation_path: "/lovelace/6"
name: "Device-uri"
icon: mdi:lan
- action: navigate
navigation_path: "/lovelace/7"
name: "Pagina test"
icon: mdi:format-list-bulleted-square
Hi @odiv,
What are you showing i see a weird tile? But you shared your sidebar config?
I think i need to see the view yaml of the tile
It is showing the sidebar in background, white text and the icons.
I use Google Light theme! With other template it is okay
Aaaah i see now, have to test this and see how to fix
@DBuit Do you think it is possible to strech the wallpaper behind the sidebar as illustrated in this image?
I saw that the sidebar is actually not within the same view looking at the CSS. Do you have any ideas on how we could elegantly find a solution for this? The only solution with current setup that I see is to cut my wallpaper at 25%/75% and apply a css background image for the sidebar and the other one for the view. 
My main idea is to make something like matthias has done (but then not using a picture element but have a fully responsive UI): A different take on designing a Lovelace UI
As you can see his sidebar is opaque… 
1 Like
custom_header:
hide_header: true
resources:
- url: /local/sidebar-card.js
type: module
- type: module
url: /local/custom-header.js
sidebar:
digitalClock: true
sidebarMenu:
- action: navigate
navigation_path: "/lovelace/home"
name: "Home"
active: true
hold_action:
action: none
style:
border-radius: 5vw
left: 11.7%
top: 26%
width: 20.5078125%
- action: navigate
navigation_path: "/lovelace/lights"
name: "Lights"
active: true
- action: navigate
navigation_path: "/lovelace/music"
name: "Music"
active: true
- action: navigate
navigation_path: "/lovelace/media"
name: "Media"
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 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Goodmorning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
views:
- view:
Kind of new to yaml…, but how do i associate a “page” with the side bar?
Hi @DBuit
Some suggestions / a wishlist:
Is there any news on getting non-light entities (e.g. lock) to show the correct status color in the sidebar?
Would it also be possible to use the default system icons (or customize.yaml icons) for entities to reflect their current state as well as colour?
What would also be great is if sidebar items could have a transparent background when they are active (like non-active items)
Thanks!!
Yeah newest update doesn’t seem to fix it still. Here is the error it gives in browser console.
If I get rid of hideTopMenu I do get the “Header not found!” Message.
I used custom_header custom component
david1, thanks custom header seems to be a good workaround.
I also have another issue, on mobile it seems that the 0 width is hiding it on my main tab but not my other tabs. I don’t know if it is just hiding it behind the other cards on my main tab, or if its really gone.
Main Tab:
2nd Tab:
custom_header:
hide_header: true
resources:
- url: /local/sidebar-card.js
type: module
- type: module
url: /local/custom-header.js
- url: /local/layout-card.js
type: module
- url: /community_plugin/light-popup-card/light-popup-card.js
type: module
- url: /local/homekit-panel-card.js
type: module
sidebar:
digitalClock: true
width:
mobile: 20
tablet: 25
desktop: 20
sidebarMenu:
- action: navigate
name: Home
icon: mdi:home
navigation_path: /lovelace/default_view
active: true
- action: navigate
name: Media
navigation_path: /lovelace/media_path
icon: mdi:youtube-tv
- action: navigate
name: Lights
navigation_path: /lovelace/lights_path
icon: mdi:floor-lamp
- action: navigate
name: Music
navigation_path: /lovelace/music_path
icon: mdi:speaker
style: |
:host {
--sidebar-background: #394254;
--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 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Goodmorning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
views:
####################
#### defualt tab ###
####################
- title: default_view
path: default_view
cards:
- type: entity-filter
entities:
- device_tracker.paulus
state_filter:
- 'home'
card:
type: glance
title: People that are home
- type: thermostat
entity: climate.main_floor
####################
#### Media tab #####
####################
- title: Media
path: media_path
####################
#### Lights tab ####
####################
- title: Lights
path: lights_path
cards:
- type: picture-elements
style: |
ha-card {
background: rgba(42, 46, 48, 1)
}
elements:
- enableColumns: true
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
rows:
- columns:
- column: 1
entities:
- entities:
- entity: light.table
icon: 'mdi:ceiling-light'
- entity: light.tv_light_1
- entity: light.tv_light_2
icon: 'mdi:lamp'
####################
#### Music tab ####
####################
- title: Music
path: music_path
Is it possible to have my “default_view” light up when i click my home-assistant link?
Any news to this?
Hi Guys,
Wasnt active for a week so im back to do some work on this now 
@tpx01 so you are right the background is set to a different element where all the cards in your views are rendered i could not get the sidebar in there so what you wan’t is not possible unless you do cut it up or something.
@david1 you asked “Kind of new to yaml…, but how do i associate a “page” with the side bar?” what do you wanna do?
@mkhattab will work on the offStates options to set for what state it should show off or on.
@Bowhuntr11 i didnt expect it to work but i wanted to now if the code could find the header and it can’t which is strange because it works for me with and without the custom header plugin… Do you know how google chrome inspecter works? and wanna check something for me?
And will see about the other tabs, the 0 width just makes it 0 px width so it should not be visible.
@david1 “Is it possible to have my “default_view” light up when i click my home-assistant link?” it the url in your browser for your default view the same as you filled in at the navigation_path? if yes it should light up.
@DBuit: have a look to my latest changes -> https://github.com/TPX01/sidebar-card
I’ve added the possility to either set the sidebar in ‘px’ or ‘%’. Do you see it likely that this option is added? If you want I can do a PR on you repo?
Issues I’ve experienced are mainly due to conflict with custom header. Although this plugin tries to solve it rather nicely I think the option should be removed. Typical issues you’ll see when the header is hidden is that a white space (size of header) is created under the ‘container’. It is way nicer to play with configuration of CH header to let it behave as you must. Like following example:
custom_header:
menu_hide: false
exceptions:
- conditions:
user_agent: Mobile
config:
menu_hide: true
If you really need to hide the custom header it seems better to active the kiosk mode. By doing so there’s no conflict and hassle between the two plugins and they happily co-exist. What’s you opinion on this?
I’ve been playing around with this sidebar card in it really has a lot of potential. Checking now how I can add a custom card (graph card, button card, …) in it similar to Floorplan UI with Color synced lights.
3 Likes
It looks like you’ve made a lot of progress to replicate the view without using a picture-elements card. Great work! Would you mind sharing your config?
Yup, indeed! My main goal is to have something fully scalable on tablet, mobile and desktop. It still needs a lot of polishing but it’s getting there pretty nicely.
I’l try to share it in upcoming weeks.
2 Likes
Good job, my friend.
I liked that way in the sidebar, how can I do it?
I tried to use the style but nothing changes on my bar …
Thanks
The script needs to be adapted still to allow this 