How can I override the CSS of a site in Firefox with userContent.css?

Question

In Mozilla Firefox, I want to create userContent.css which overrides the CSS of a site.

Where should I create the file (Windows 7)?

Answer 1

1. Open Firefox and press Alt to show the top menu, then click on Help → Troubleshooting Information

2. Click the Open Folder button beside the Profile Folder entry

3. Create a folder named chrome in the directory that opens

4. In the chrome folder, create a CSS file with the name userContent.css

5. Copy the following code to userContent.css, replacing "example.com" with the website you want to modify and your own custom CSS. The !important is important.

   @-moz-document domain(example.com) {
       img { opacity: 0.05 !important; }
   }
   

6. Open another tab in Firefox, go to about:config, and set toolkit.legacyUserProfileCustomizations.stylesheets preference to true.

7. Restart Firefox.

Answer 2

There was an old extension called ChromEdit, which added a simple button to easily open user CSS for editing.

This was apparently compromised or withdrawn. Stylish was an alternative, but similarly this now appears to be defunct.

At the moment you just have to remember where the file is supposed to go.