Is there a way to style or theme scrollbars?
-
I used Inspect to narrow it down to several pseudo elements under #webview-container but playing around with the different options or adding them to my personal css didn’t do anything. I just want to change the colors around to suit my dark theme and maybe get rid of -webkit-scrollbar-button completely since I don’t use those. Has anyone had any luck with this?
-
Are you on Vivaldi version 1.2 or 1.3?
-
Vivaldi 1.3.551.13 (Developer Build) (32-bit)
Revision 331825079e140af9b3ca54103e3ddd3996c5233a -
In that case, unless you want to hack CSS, you have access to the latest built-in mods. More will be along.
-
I’m fine with writing my own CSS, I just need help finding the right selector. I know it’s:
#webview-container >
But I’m lost after that.
-webkit-scrollbar-button was suggested by the Inspector, but I tried that and it didn’t work. I also tried #webview-container > scrollbar-button as a variant, but no dice.
-
Then you probably want to join the discussion here: https://vivaldi.net/forum/all/3073-vivaldi-ui-customisations
That's your best bet.
-
Cross-posted. Wish me luck!
-
So on a hunch I tried putting my CSS in Stylebot instead of the Vivaldi style folder, and… it worked!!
My code (designed for my custom dark theme, black background, dark grey scrollbar, no arrows):
::-webkit-scrollbar-button,::-webkit-scrollbar-track{display:none} ::-webkit-scrollbar-thumb{background-color:#555} ::-webkit-scrollbar{background-color:#000} ```For the URL I just wrote: ** (Two asterisks applies the style to any website in Stylebot.) But could someone please explain **why** this CSS only works within Stylebot? How come when I place this same exact code in my custom CSS in my Vivaldi folder, nothing works?
-
Weird that it comes up under #webview-container, then. It’s a sibling of tabs and panels and a parent of the status bar!
Thanks for the info.