This short tutorial covers how a non-technical user achieves that (as a bonus, the following instructions also apply to Thunderbird and SeaMonkey users). -
#1. Open the Profile folder - if your profile already contains a chrome folder with userChrome.css and userContent.css files within it, then skip to Section #3 below.
#2. Create the required chrome folder, userChrome.css and userContent.css files by following these links and using either the manual or automatic creation methods detailed there.
With manual creation, it should be noted that the naming of folders and files must be exactly as written here, and in the links, or else the computer program will ignore them.
#3. Editing of the userChrome.css and userContent.css files by adding code snippets -
Download and install a suitable text editor - Programmers Notepad is suggested for Windows users (gedit for Linux users and Eclipse Classic for Mac users)
A good text editor will show the important parts in various colours (syntax highlighting) which makes errors in your code much easier to notice, as well as line numbers and, most importantly, have almost unlimited undo and redo features.
This means that if the text editor is left open after editing and if the code changes are not as expected in result, then the code can be instantly reverted to exactly how it was before, just by using the Undo feature and saving the reverted change.
#4. Adding a sample code snippet to your userChrome.css file -
open the userChrome.css file with your text editor of choice and paste the following sample code snippet - just as it is written, below this line -
@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul");
(This is called the namespace line and should not be altered or it will not function correctly. The namespace line is only required once in the userChrome.css file)
Code: Select all
/*Sample Code Snippet that will turn UI text to red...*/
* { color: red !important; }
Notes : To disable, but retain, a particular code snippet then just move the second */ above onto the end of the final line, like this :
OFF:
Code: Select all
/*Sample Code Snippet that will turn UI text to red...
* { color: red !important; }*/
Code: Select all
/*Sample Code Snippet that will turn UI text to red...*/
* { color: red !important; }
Resources :
Many code snippets are already posted in these forums or just ask in the Support forums.
To get a general idea of how .css code works, then browse the files here - https://github.com/Aris-t2/CustomCSSfor ... er/classic
For a deeper understanding of .css, including advanced commands, then try here (this thread was written with Firefox 29 (Australis) in mind, so although most snippets given will still work in Firefox 57+, some will not) - http://forums.mozillazine.org/viewtopic ... #p13219133