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

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

Where should I create the file (Windows 7)?

Rauf

Posted 2011-08-04T08:30:14.687

Reputation: 2 685

Related: How can I change link colors in Firefox and Chrome, but leave all other colors and fonts as they are? (also about file userContent.css)

– Peter Mortensen – 2020-01-03T23:50:48.917

Answers

119

Open Firefox and press Alt to show the top menu, then click on Help → Troubleshooting Information
Click the Open Folder button beside the Profile Folder entry
Create a folder named chrome in the directory that opens
In the chrome folder, create a CSS file with the name userContent.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; }
}
```

Rauf

Posted 2011-08-04T08:30:14.687

Reputation: 2 685

2@Septagram I think it's just always been that way… as I remember, chrome could also contain userChrome.css, which would style the browser interface ("chrome"). – sam – 2014-09-27T18:05:27.157

1I know the OP asked about Windows 7, but for OS X users the path is ~/Library/Application Support/Firefox/Profiles/<profileid>.default/chrome/ – rlovtang – 2014-12-01T15:54:47.657

And updating for 2015 and Firefox 37, the Troubleshooting Information page has an Application Basics section, with a Profile Folder > Show Folder button. That launches Windows Explorer, in which you select the chrome folder (or create one if it's not there already). Place the userContent.css file therein. – gwideman – 2015-05-08T11:39:27.013

5One small note, make sure that the folder you create is named, "chrome", with a lowercase 'c', otherwise it will not work on Linux. – Oliver Burt – 2016-12-22T14:04:40.633

9It it is necessary to *restart* Firefox for it to take effect. – Peter Mortensen – 2018-07-18T08:32:02.057

Also, comment characters in file userContent.css should only be the fully CSS portable ones: /* */. For example, # will not work and will break it in unpredictable ways. – Peter Mortensen – 2018-07-18T08:33:50.433

Is a refresh required? That would help for trouble shooting.. – jcalfee314 – 2018-09-05T13:32:36.810

Starting with Firefox 69, you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true due to https://bugzilla.mozilla.org/show_bug.cgi?id=1541233

– ThomasR – 2019-09-18T12:44:34.727

Don't forget to: set toolkit.legacyUserProfileCustomizations.stylesheets to true (at this URL: about:config). Then restart Firefox. – zenekpiwko – 2019-12-28T14:23:29.783

Shortcut: If you open about:profiles you have the button to open your profile folder and a restart button to check if it works. Setting legacyUserProfileCustomizations beforehand is important, though.

– twigmac – 2020-01-29T22:44:46.693

1@twigmac Having carefully made all the changes and restarted Firefox, I don't see any effect. I'm quite familiar with css too, and can confirm the elements exist on the page in question. Mozilla probably broke this for good recently. – John O – 2020-01-31T17:03:52.670

1@JohnO worked for me in firefox 72.0.2 as of today. – éclairevoyant – 2020-02-11T23:18:46.447

7A small update / modification for step 1; the Troubleshooting Information opens up a link about:support and in my Firefox (v20 nightly build on Ubuntu) it has an entry named "Profile directory" with a button "Open Directory" which opens up the profile directory /home/tripleee/.mozilla/firefox/asdf1234.default/ in Nautilus. – tripleee – 2013-01-03T10:38:36.107

6You can remove @-moz-document domain("...") to apply the style to every pages. – Nicolas – 2013-05-30T08:26:47.480

1Why is it supposed to be in the chrome folder? – Septagram – 2013-12-18T08:01:04.467

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.

OrangeDog

Posted 2011-08-04T08:30:14.687

Reputation: 679

I thought I'd got ChromEdit from the official list, but OK. – OrangeDog – 2015-07-02T19:57:16.470

10Based on recent reviews, Stylish should probably be avoided. – KlaymenDK – 2017-05-31T08:59:20.507

1An extension is not the same as an actual user stylesheet. That's why Chrome is worthless garbage now. – Synetech – 2017-07-09T23:02:31.037

1@Synetech what are you talking about? This extension adds a button to open the stylesheet for editing. – OrangeDog – 2017-07-09T23:08:46.580

1Stylish didn't work for me. When I searched for help I found a forum topic in which a user said most users of Stylish have moved to Stylus because of better user support and more continual updates. Stylus is a fork of Stylish. Stylus worked for me without the need to restart Firefox. Usage of the plug-in is simple - navigate to the page you want to style, click the app icon at top-right of your browser, choose whether you want to apply styles to the current URL only or whole domain and write your styles. When you visit again, the icon shows number of styles being applied by the plugin. – youcantryreachingme – 2018-10-03T23:14:34.527

@OrangeDog, I was under impression, that Stylish and Stylus works by inserting <style> into DOM, i. e. they modify author stylesheet rather than user one. This is indeed a broken design, which makes it harder to use. – Dmitry Alexandrov – 2019-01-26T15:15:28.483

@DmitryAlexandrov I have no idea about Stylish. My original answer was about ChromEdit, but years ago someone changed it. – OrangeDog – 2019-01-26T15:35:25.640

Stylish extension works for me as of April 2019. Fresh download and install.. It does not require a restart for new or edited stylesheets to be applied, though It might take a second or so to update open pages. – SherylHohman – 2019-04-20T18:08:09.913