MozillaZine

How To Customise Firefox 57+ UI with userChrome.css

User Help for Mozilla Firefox
Frank Lion

User avatar
 
Posts: 20106
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 29th, 2018, 2:15 pm

With the introduction of Firefox 57 and WebExtensions, the ability to customise the UI (user interface) via extensions and Complete Themes has ceased. However, it is still possible (at the time of writing) to customise the UI of Firefox 57+ by adding code snippets to the userChrome.css file. In addition, changes to the appearance of websites can be made using the userContent.css file.

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/gatekeeper/there.is.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; }

Use the text editor to Save this code snippet to your userChrome.css file and then restart Firefox to see the result. Contrary to myth, Firefox does not need to be closed as you make these changes, but you must always restart to actually implement the changes.

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; }*/

ON :
Code: Select all
/*Sample Code Snippet that will turn UI text to red...*/
* { color: red !important; }

By moving that */ we are telling the program just to ignore that section of code enclosed by the /* */. The ON code will be in colour in the Programmers Notepad and in black when it's OFF. When adding code snippets, if you think you have messed up anything, then just EXIT from your Editor - do not 'save'. It will all be as it was before.


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) - viewtopic.php?p=13219133#p13219133
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 12 guests