Getting started with userChrome.css

Firefox is a highly customizable browser, and you can change its interface by defining CSS rules in two files, userChrome.css and userContent.css.

Say you are interested in using the code I wrote to make Firefox look like Safari but you don’t know how to do so, this guide will help you with that.

1. Locate the Firefox profile folder

The folder will be called something like  xxxxxxxx.default  and it will be located here:

Mac
> Users
-> your userame
–> Library
—> Application Support
—-> Firefox
—–> Profiles

65-1.png

Windows
C:\Users\your userame\AppData\Roaming\Mozilla\Firefox\Profiles\

Mac & Windows (alternative)
If you are in Firefox, click on:

Help > Troubleshooting Information > Show in Finder

65-2.png

65-3.png

2. Create the chrome folder

Inside the Firefox profile folder, create a folder called  chrome 

65-4.png

3. Create the files

3.1. Launch the text editor

Mac
Launchpad > TextEdit

Windows
Start Menu > type notepad > Enter

3.2. Create two empty files called  userChrome  and  userContent  and save them somewhere (e.g. on the Desktop)

65-5.png

3.3. Unhide file extensions

Mac
Finder > Preferences > Show all filename extensions

65-6.png

65-7.png

Windows
Open any folder > View tab > File name extensions

65-8.png

The two files will now look something like this:

65.9.png

3.4. Rename the file and change the extension to  .css 

65.10.png

65.11.png

3.5. Move the two files in the  chrome  folder created at step 2.

65.12.png

4. Enable CSS customization

Starting from Firefox v69, userChrome.css and userContent.css are no longer loaded by default when you launch Firefox. To change that:

4.1. Launch Firefox and type  about:config  in the URL bar

65-13.png

4.2. Click on Accept the Risk and Continue

65-14.png

4.3. Set  toolkit.legacyUserProfileCustomizations.stylesheets  to  true 

4.4 Close the about:config tab

5. Populate the CSS files

Next time you launch Firefox, the rules defined in userChrome.css and userContent.css are going to be taken into account.

Those two files are empty at the moment, and if you want you can copy the code I wrote to make Firefox like Safari, or alternatively you can write some CSS rules yourself.

If you are interested in finding resources and tweaks on Firefox CSS customization, I’d recommend r/FirefoxCSS on reddit.

Related:
• Make Firefox look like Safari

Read also:
• How to back up Bitwarden using KeyPassXC on macOS
• How to change login screen wallpaper on macOS Catalina