Is there any way to either adjust (the width/colour) or hide the scrollbar on the sidebar when there is over-scroll content?
I know how to do this with CSS when building sites, but how can I tweak the CSS for the main UI of HA?
Check out card-mod.
You can style more than just cards.
So I already did have that installed for cards, I didn’t realize that it could do more than just cards.
That being said, it’s pretty confusing, and limiting. I did find the post that talked about modifying scrollbars but in order to modify the main UI it has to be done by using a custom theme.
I’m currently using mushroom and when I took a look at the theme files, it was stated that any changes made to that file would get wiped when mushroom gets updated.
Now I’m fairly new to HA and maybe there is a way to reference the mushroom theme files within another custom theme file and then add the wanted CSS edits and have it all work. But this is the problem I am finding with HA. Wanting to do one thing inevitably leads to having to figure out how to something else first which leads to having to learn another thing again.
Sorry about the rant but it would be really great if there was a simple section in the settings page to enter CSS overrides for simple changes. Much like how many Wordpress themes have a simple form field where you can paste your declarations.
I love the flexibility HA provides but in some situations things are way more complicated than they need to be.
- Styling a card on a Dashboard may be done by card-mod (thread).
- Styling SOME elements in other HA Frontend areas (like a common left sidebar) may be done by card-mod-themes (thread).
- As for styling a scrollbar particularly: I could not find a way either to change a width or a color - even by a Code ispector; it is probably hidden somewhere in browsers.
1 Like
It’s there in the css for one of the elements.
“paper-listbox” with the class “.ha-scrollbar”
Change the default value from ‘thin’ to none and the scrollbar goes away.
Now, if only there were a simple way to add that CSS “!important” override, we’d be done!
Seems that I tried the same.
But I failed to set any scrollbar-related property.
In my setup (Chrome, Win10) the “ha-scrollbar” element looks a bit different than in your screenshot:
When I try to add a scrollbar-related property - the browser allows to add only “scrollbar-gutter”:
And the added “scrollbar-color” property is not recognized:
I am not a CSS pro, mainly “try, fail, repeat”, so may be I am doing smth wrong.
What theme have you applied in your user account settings?
I had no theme applied and tried applying the Mushroom Shadow (my preferred), but that made no difference in removing the scrollbar.
Also, which browser are you using? I was showing results in FF. In FF, it shows those declarations I was referring to.
But the code changes in Chrome. The ‘scrollbar-width’ and ‘scrollbar-color’ declarations are not in the Chrome render vs the FF render.
Both browsers do share the ‘overflow-y’ declaration, though.
I know that different browsers ‘did’ different things with the same code. But those days are mostly behind us. I wonder why the difference here?
All in all, I’m left with the thought of who thinks having a scrollbar like this looks good? It wouldn’t have passed my QA.
All test are made with a default theme.
Chrome in Win10x64.
If you want the “old” style back in FF you can add below to about:config
layout.css.scrollbar-width-thin.disabled ( change false to true )
That would be a fix for that one PC/browser the edit was made on.
I can understand the use case for the current CSS modification approach, as its effects are mostly geared toward the dynamic content of the UI.
But there is another use case where we would just like to change simple things about the UI, like font faces or…the scrollbar look and feel!
Having this one way, which is not intuitive, laborious and relies on someone else’s development of a hack of the existing system, shouldn’t be the norm. I appreciate the effort that went into creating card-mod. I just question the need for there to be a 3rd party to create it in the first place.
I think that it is considered that UI is manly OK for majority of users.
And there are 3 ways of customization of UI:
- “Official”: UI contains plenty of CSS variables like “–primary-text-color” with some “factory” default values; users may override values of these vars in their custom themes.
- “Unofficial”: to change other UI things (not covered by those CSS vars) users may add “card-mod-theme” code into their themes.
- “Unofficial”: similarly to pt.2, but only for particular UI cards/elements - using card-mod.
i.e. deep customization is mainly possible by themes + card-mod.
Ofc some things cannot be easily changed (like I failed to style a scrollbar).
This would actually also work (slightly inconsistent !) in FF( from any devices), if added to your Theme
-If you refresh browser it will go back to “thin” thou, but when-ever clicking on a side-panel-tab, it comes back"
PS: not sure which of them, or if both needed
card-mod-root: |
.: |
.ha-scrollbar {
scrollbar-width: auto !important;
}
card-mod-sidebar: |
.: |
.ha-scrollbar {
scrollbar-width: auto !important;
}
yeah, the problem there is if you are using a 3rd party theme such as one of the Mushroom collection -like I am. Editing that theme file would be overwritten once a theme update is pushed out. That would wipe any customization such as this.
BTW, changing ‘auto’ to ‘none’ gets rid of the scrollbar altogether.
I understand where you’re coming from, but I gotta point out that a simple blank field on the settings page, where custom CSS can be entered, would allow anyone to target any DOM object and apply whatever styles we like.
Going another step, exposing access to CSS would open up CSS Grid which could mean we could move cards around on a page.
Adding support for custom JScript would open UI customization even more and allow for UI animations of DOM elements.
After all, the HA UI is basically just a webpage. Let’s get access to all those webdev tools that site builders use!
I am using a 3rd part Theme, such is not updated often, so it’s a peace of cake pasting/overwriting the 20-30 lines i “tampered” with
OR
As i do Copy/backup Your Theme (every time you add change in it )
When an update is announced, update(when you have a little time over) , Compare the 2 files (the new and your Modded-Copy), most likely, if your lucky it’s only a few lines you have to copy from the New, to your “Copy” … so copy these (if you find them relevant) or don’t … and replace the “updated” with your Modded-Copy,
This way you get rid of the Update-Note in HACS, and wont see another for Month, or more
PS: It could take 10-15min, if your not concentrated 
And BTW no Theme Updates is Pushed out, You choose whether/when you want to update or not
1 Like
Try custom:Layout-Card, you’ll love it … and there’s also custom:conditional-card
1 Like
So as far as I understood, there is no real option now to hide the scroll bar on the side bar of Home Assistant.
But can someone in simple terms explain to me where to put what code in my theme.yaml to make it go away.
Even if after an Update I have to redo it for now, that is fine, but I have no knowledge of CSS and I have no idea how to get it done.
I hope in the future there will be simply a toggle to disable the scroll bar.