[SOLVED] How to prevent website body background color from coloring my scrollbars?
I operate a website in which the body background is black. My background image has a black background. And inside the body, I place a white-background div, which carries the text. My issue is, the scroll trough is some shade of black and the scrollbar is a lesser shade of black.
On any white-body website, I have visible shades of grey and I can see my scrollbar controls.
Where do I go to apply !important CSS rules to my browser interface? I want to establish a suitable color scheme for my scrollbars that override website CSS.
//EDIT: I've found a few typos and fixed them, above. I have then added the text below:.
If I edit the stylesheet to change the body background color on the website, it affects the scrollbar coloring, and ruins the website appearance.
Only if some developer would use the Linux system colors in Firefox so that theme colors are the same in Firefox as they are in the Linux apps that follow the rules, then Firefox would be a much better browser. Is there an add-on that will resolve this issue?
Is there a CSS fix that I can apply? In past decades, websites wanted to color the scrollbars but they are the property of the user, not an extension of the website. What's become of that idea?
Modified by Linux_Mint_Firefox
Chosen solution
cor-el said
You can place code in userContent.css to apply CSS rules to a website (userChrome.css is for the user interface). You can enclose the code in a '@-moz-document domain(){}' block to apply he rules only to this domain.@-moz-document domain(support.mozilla.org){ /* add your style rules */ }
It took me awhile to find out what to put in the userContent.css, which I also had to enable in about:config.
FromVertical Scrollbar Too Small Issues I got the answer to my issue, from Cor-el, naturally! userContent.css:
- { scrollbar-color: auto! important; scrollbar-width: auto !important; }
The line of CSS I put in was:
- { scrollbar-color: red #9c6! important; scrollbar-width: 30px !important; }
I like the width of mine better than the auto, and the colors may change.
[Quote]In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
toolkit.legacyUserProfileCustomizations.stylesheets = true [Close Quote] -- Cor-el
This same answer that solved narrow scrollbars also solved my scrollbars' color issue.
On another note, where I know what to do with CSS, I did some work on my black-background site and put in a div that holds all the content of my page. I set a style with height: 99vh; . That's 99% of my viewport, and I put a scrollbar on the div, which I can color and set width on. Only Firefox users see the color and width, unless they have usurped my colors with the solution above. I tested on the Chromium browser and came up with the scrollbar but no styling.
Consider this one solved. Thank you.
Read this answer in context 👍 0All Replies (5)
cor-el said
See:
Cor-el, is there a place in my browser profile to put this CSS for my own use, or do I put this on my website and set every Firefox that visits me?
Thank you for your response.
You can place code in userContent.css to apply CSS rules to a website (userChrome.css is for the user interface). You can enclose the code in a '@-moz-document domain(){}' block to apply he rules only to this domain.
@-moz-document domain(support.mozilla.org){ /* add your style rules */ }
You can put scrollbar colours in a file userContent.css which you place in a folder chrome in your profile folder, thus ~/.mozilla/firefox/profile_folder/chrome
EDIT: the code does NOT work as well as it did prior to Firefox 89. The colour of my scrollbar thumb darkens when I hover or hold. Another user has reported a similar change of colouring.
Modified by Terry
Chosen Solution
cor-el said
You can place code in userContent.css to apply CSS rules to a website (userChrome.css is for the user interface). You can enclose the code in a '@-moz-document domain(){}' block to apply he rules only to this domain.@-moz-document domain(support.mozilla.org){ /* add your style rules */ }
It took me awhile to find out what to put in the userContent.css, which I also had to enable in about:config.
FromVertical Scrollbar Too Small Issues I got the answer to my issue, from Cor-el, naturally! userContent.css:
- { scrollbar-color: auto! important; scrollbar-width: auto !important; }
The line of CSS I put in was:
- { scrollbar-color: red #9c6! important; scrollbar-width: 30px !important; }
I like the width of mine better than the auto, and the colors may change.
[Quote]In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
toolkit.legacyUserProfileCustomizations.stylesheets = true [Close Quote] -- Cor-el
This same answer that solved narrow scrollbars also solved my scrollbars' color issue.
On another note, where I know what to do with CSS, I did some work on my black-background site and put in a div that holds all the content of my page. I set a style with height: 99vh; . That's 99% of my viewport, and I put a scrollbar on the div, which I can color and set width on. Only Firefox users see the color and width, unless they have usurped my colors with the solution above. I tested on the Chromium browser and came up with the scrollbar but no styling.
Consider this one solved. Thank you.