How To Customize Firefox 57+ UI with user Chrome.css?

Customize Firefox 57+ UI with user Chrome.css | Arkansas

Customize Firefox 57+ UI with user Chrome.css with the help of Firefox 57 and Web Extensions, the ability to customize the UI via extensions and complete themes has ceased. However, it is still possible to customize the UI of Firefox 57 + by adding code snippets to the user Chrome.css file.

In addition, changes to the appearance of websites can be made using the user Content.css file.

#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:

/*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.

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:

/*Sample Code Snippet that will turn UI text to red…
* { color: red !important; }*/

(ON)

CODE:

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

, , , ,
Posted on

45 thoughts on “How To Customize Firefox 57+ UI with user Chrome.css?”

Leave a Reply

Your email address will not be published.