Difference between revisions of "Mozilla CSS Modifications"

From Indie IT Wiki
(Created page with "== userChrome.css == Must contain the line: @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);")
 
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
== 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 ==
 
== userChrome.css ==
  
Must contain the line:
+
Should contain the line:
  @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
+
  @namespace url(<nowiki>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</nowiki>);
 +
 
 +
== userContent.css ==
 +
 
 +
== 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;
 +
}</code>
 +
* 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;
 +
}</code>
 +
* Restart.
 +
Thanks to [https://support.mozilla.org/en-US/questions/1337020 Mozilla].
 +
 
 +
== Signature Transparency ==
 +
 
 +
Alter the 'opacity' value to your liking. Test it here - http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_opacity_js
 +
 
 +
Create a folder in your profile folder called 'chrome' and then create a file called 'UserContent.css' with the following...
 +
 
 +
/*
 +
  * Disable TB22 style transparency
 +
  */
 +
.moz-txt-sig, .moz-signature {
 +
  opacity: 0.5 !important;
 +
}
 +
* Restart.

Latest revision as of 09:38, 21 February 2023

Overview

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);

userContent.css

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.

Signature Transparency

Alter the 'opacity' value to your liking. Test it here - http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_opacity_js

Create a folder in your profile folder called 'chrome' and then create a file called 'UserContent.css' with the following...

/*
 * Disable TB22 style transparency
 */
.moz-txt-sig, .moz-signature {
  opacity: 0.5 !important;
}
  • Restart.