Mozilla CSS Modifications

Overview

• https://www.userchrome.org/adding-style-recipes-userchrome-css.html

Activate CSS Usage In Firefox

New browser tab > enter about:config in the address bar and press enter/return > click the Accept the Risk and Continue button > in the 'Search preference name' field, enter the following:

toolkit.legacyUserProfileCustomizations.stylesheets

Set the above to true by double-clicking on the key.

Activate CSS Usage In Thunderbird

Settings/Options/Preferences > Advanced > General > Config Editor > in the 'Search preference name' field, enter the following:

toolkit.legacyUserProfileCustomizations.stylesheets

Set the above to true by double-clicking on the key.

userChrome.css

Should contain the line:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

Scrollbars: Widen & Change The Colour

• Locate your Thunderbird profile, an easy way to do this is to open the Help menu, More Troubleshooting Information, then under Application Basics locate Profile Directory and click the button 'Open Directory' to the right. This will, all things being equal, open your system's file browser at the correct location.
• Once in the profile, create a new folder called chrome
• Navigate in to the chrome folder and a blank document named:

userChrome.css

• Open the above file and copy and paste the following in to it, once done save and close:

scrollbar {
-moz-appearance: none !important;
background: orange !important;
width: 15px;
scrollbar-color: grey orange;
}

• Navigate in to the chrome folder and a blank document named:

userContent.css

• Open the above file and copy and paste the following in to it, once done save and close:

:root {
scrollbar-color: grey orange;
scrollbar-width: 25px;
}

• Restart.

Thanks to Mozilla.