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
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
2. Create the chrome folder
Inside the Firefox profile folder, create a folder called chrome
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)
3.3. Unhide file extensions
Mac
Finder > Preferences > Show all filename extensions
Windows
Open any folder > View tab > File name extensions
The two files will now look something like this:
3.4. Rename the file and change the extension to .css
3.5. Move the two files in the chrome folder created at step 2.
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
4.2. Click on Accept the Risk and Continue
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
