How can I override the CSS of a site in Firefox with userContent.css?
- Open Firefox and press Alt to show the top menu, then click on
Help
→Troubleshooting Information
- Click the
Open Folder
button beside theProfile Folder
entry - Create a folder named
chrome
in the directory that opens - In the
chrome
folder, create a CSS file with the nameuserContent.css
Copy the following code to
userContent.css
, replacing "example.com" with the website you want to modify and your own custom CSS, and restart Firefox:@-moz-document domain(example.com) { img { opacity: 0.05 !important; } }
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.