If you click on the view edit button, right at the bottom is an area to add the code:
gotcha! You’re the best Martin! Thank you for the help!
1 Like
The conversations in this post are great! Lots of awesome detail in here and that is great. The one question I have not found an answer to is: can the background of the sidebar be made transparent?
I have an amazing photo of a lake very near our property that I’m wanting to use as the dashboard background. The visual look I’m going for is for the sidebar to be a mostly transparent white, around 25% or so…
The background is defined outside the views in the dashboard code so it is loaded on all views in the dashboard.
title: "Development Dashboard"
background: >-
center / cover no-repeat
url("/media/local/IMG_0003.jpg?authSig=<a long string>
fixed
sidebar:
title: Dev Dashboard
I’ve tried a couple different methods to style this but none have worked.
style: |
:host {
--sidebar-background: rgba(255,255,255,0.25);
}
I’ve also tried adding the ha-card style.
ha-card {
background: transparent !important;
}
I can get other solid colors to work, but nothing I try to apply any transparency has any affect on the outcome.
Has anyone had any success with this?
Hey, is there a way so you don’t have to repeat this on every page?
And there is the downside! It would be great if you could just have a master bit of code that would populate on every page.
Just spotted this - not used it yet, but could be the answer:
1 Like
looks promising, ill give it ago when I get some free time
Hi all! I have a minor issue. I set hideTopMenu to true in my main config. Now the top Menu is gone which is good. How can I get it back for example editing the Dashboards? Saw now that i can´t click the 3 dots anymore? Damn it or I have to go back and restore from a backup? And the same would apply for the sideMenu? Any Hack or Button I can add to get everything back? Thanks a lot!
P.s. how can i make it that my Huawei tablet runs in tablet mode and the phones to run for phones? Currently phone and tablet share the same size if the sidebar which is bad 
Hi all
We are some people who have problems with the bottom width.
Here is my example. I just want to have the weather card at the bottom of the side bar.
But as you see, there is a width problem.
I tried differents things, without result.
Here is my actually code :
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- show_current: true
show_forecast: true
type: weather-forecast
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
ha-card {
background: transparent;
color: #FFF;
overflow: hidden !important;
box-shadow: none !important;
width: 100%;
}
entity: weather.maison_veauche
theme: Animated Weather Card
secondary_info_attribute: pressure
tap_action:
action: navigate
navigation_path: /lovelace/Météo
Need som help please?
Did you ever get this two work? I’m also strugling to highlight the active tab…
This might help, this is my style config and the menu items highlight
style: |
ha-icon {
--mdc-icon-size: 36px;
}
.sidebarMenu li {
color: var(--sidebar-text-color, #000);
position: relative;
padding: 10px 20px;
border-radius: 12px;
font-size: 32px !important;
line-height: 32px !important;
font-weight: 300;
white-space: normal;
display: block;
cursor: pointer;
}
h1.digitalClock {
font-size: 100px !important;
line-height: 80px !important;
font-weight: 300 !important;
cursor: default;
}
h2 {
margin: 0;
font-size: 36px !important;
line-height: 32px !important;
font-weight: 200;
color: var(--sidebar-text-color, #000);
cursor: default;
}
Thanks for a quick reply and sharing the code!
I figured it out while applying your style, I had the path for each page done as
path: first
While it was suppose to be,
path: /lovelace-menuitem/first/
The links worked correctly but style did not recognize the paths.
1 Like
Hello, I am new to home assistant.
I would like to know how many lights are open
on my sidebar
can you help me
do you mean how many lights are on and you want to present it in your sidebar
Thanks for a very nice card - I see it mentioned above but is there any way to actually use this with casting the lovelace view (not CATT)? I can’t get it to show in my view, only the other cards in the dashboard. Anybody found a solution?
Can someone please assist me. I have been trying for days to get this card working for myself but nothing i do seems to work. I have googled for hours and still cannot find a solution. I basically cannot even get the sidebar up on the screen. I have followed instructions and added the repo url as a custom repo, added the resource url under dashboard → resources. I am adding the sidebar code under the raw config editor for a new dashboard i created but i cannot get the sidebar to even appear on the screen. Can someone please tell me what am i doing wrong
I use HACS to install to avoid anything going wrong with manual install. But assuming you’ve got it installed correctly, post us your dashboard yaml so we can see if there’s any issues there.
Hey,
Can anyone help me please? I am really struggling to remove the box around ‘Good Evening’ in the bottombar.
I have tried changing the CSS and card type etc but nothing will remove.
Thank you.
Nice man & can you share code pleas ?
Has anyone gotten a transparent background on this sidebar to work? I am able to change the color easily or even upload an image as a background, but I just can’t seem to get it transparent!