[Fix] userChrome.css and userContent.css Codes Stopped Working After Firefox Upgrade

If you use userChrome.css and userContent.css files in Mozilla Firefox web browser to customize Firefox user interface (UI) and functionality and suddenly both files stopped working when you installed new version of Firefox or upgraded older version to latest Firefox version, this tutorial will help you in fixing the issue and make the files working again in Firefox.

userChrome.css and userContent.css files are used in Firefox browser to modify Firefox appearance and functionality. These files are created in Firefox profile folder and contain CSS code added by the user.

UserChrome_UserContent_CSS_Files_Profile_Folder_Mozilla_Firefox.png

Advertisement

You can check out following article to learn more about these files:

All About Mozilla Firefox Profile Folder and Configuration Files

We have posted several tutorials in past which utilize these files to enhance Firefox functionality and UI:

There are many Firefox users who take help of these CSS files to customize Firefox according to their requirements.

Now several Firefox users are facing a strange issue related to these files after upgrading to latest version of Firefox. Once they upgraded or installed new Firefox version, the code present in userChrome.css and userContent.css files stopped working. Now both files no longer work and the changes made by these 2 files automatically disappeared.

No matter what code the users put in these 2 files, Firefox no longer recognizes the code and doesn’t change UI or functionality which was working fine in previous versions.

If you are also facing this problem in Firefox browser, this tutorial will help you.

Advertisement

Actually Mozilla team has disabled support for these 2 CSS files in newer versions of Firefox browser. That’s why the code present in these files is no longer functional.

We told you about this move in UPDATE 135 in our exclusive Firefox Nightly Updates topic when Firefox 69.0 version was under development and testing.

The support for userChrome.css and userContent.css files has been disabled to speedup and improve Firefox loading/startup time and performance.

Fortunately Mozilla team has provided a built-in preference/flag to re-enable or restore support for userChrome.css and userContent.css files in Firefox so that interested users can again use both CSS files to change Firefox UI and functionality.

If you also want to bring back support for userChrome.css and userContent.css files in Firefox web browser and want to make them working again, following steps will help you:

1. Open Mozilla Firefox and type about:config in the addressbar and press Enter. It’ll show you a warning message, click on “I accept the risk!” button. It’ll open Firefox’s hidden secret advanced configuration page i.e. about:config page.

2. Now type stylesheets in Search filter box and look for following preference in the window:

toolkit.legacyUserProfileCustomizations.stylesheets

The preference value is set to false by default, which means the support for both CSS files is currently disabled in Firefox browser.

3. To restore support for both CSS files, double-click on toolkit.legacyUserProfileCustomizations.stylesheets preference and set it to true. Alternatively, you can right-click on the preference and select Toggle option.

Restore_Enable_Support_UserChrome_UserContent_CSS_Files_Mozilla_Firefox.png

That’s it. Restart Firefox browser and now both userChrome.css and userContent.css files will start working again in Firefox.

PS: If you decide to restore default settings and disable support for these CSS files in future, set the value of above mentioned preference to false.

Also Check:

[Fix e10s Issue] userChrome.css and userContent.css Codes No Longer Working in Mozilla Firefox

Published in: Mozilla Firefox, Troubleshooting Guides

About the author: Vishal Gupta (also known as VG) has been awarded with Microsoft MVP (Most Valuable Professional) award. He holds Masters degree in Computer Applications (MCA). He has written several tech articles for popular newspapers and magazines and has also appeared in tech shows on various TV channels.

Comments

NOTE: Older comments have been removed to reduce database overhead.

  1. Did all that and still not working. FireFox is either not seeing the .css or what I put in the .css is outdated and not working. No way to tell which one but I have added several changes just to see if it will work and nothing is having any affect. So this does not work in FF 78.

  2. ^^ I’m using both CSS files without any problem in latest Firefox version. The preference mentioned above works fine.

  3. About the 3rd time they broke my multiple row tabs in version 81. Made a clone before updating. I put 80 back. That setting was already true. Before I just found a new userchrome file. That won’t work now if they won’t load it. What does Firefox have against multiple row tabs? A lot of people were upset way back when they crippled Tab Mix Plus. Found a fix & they keep messing that up. I am using Ubuntu 18.04.

  4. My son gave me a newer css file at github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css . Told me to change the multirow-tab-dynamic-width to 0 & I changed the min-width to 160px. Guess this might hopefully survive the next few updates. Never understood why Firefox hasn’t made multi row an option. I remember the huge number of links complaining when they disabled Tab Mix Plus. Maybe the same reason most software comes with the WORST possible default settings you have to change! 🙂

  5. I am using FF 86 and cannot get the old address bar back. Have tried all the options above and still doesn’t work. Any help?

Leave a Comment

Your email address will not be published. Required fields are marked *

NOTE: Your comment may not appear immediately. It'll become visible once we approve it.