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)?

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, Jan 3, 2020 at 23:50

G-Man Says 'Reinstate Monica' · Accepted Answer · 2020-01-12 04:45:35Z

162

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; }
}
```

7,57722 gold badges39 silver badges85 bronze badges

answered Aug 5, 2011 at 4:48

Rauf

3,47710 gold badges25 silver badges36 bronze badges

9

A 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
Jan 3, 2013 at 10:38
9

You can remove @-moz-document domain("...") to apply the style to every pages.
– Nicolas
May 30, 2013 at 8:26
5

One 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
Dec 22, 2016 at 14:04
16

It it is necessary to restart Firefox for it to take effect.
– Peter Mortensen
Jul 18, 2018 at 8:32
36

Starting with Firefox 69, you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true due to bugzilla.mozilla.org/show_bug.cgi?id=1541233
– ThomasR
Sep 18, 2019 at 12:44

| Show 20 more comments

OrangeDog · Accepted Answer · 2019-01-26 15:40:20Z

8

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.

answered May 24, 2013 at 15:59

OrangeDog

1,13711 silver badges23 bronze badges

15

Based on recent reviews, Stylish should probably be avoided.
– KlaymenDK
May 31, 2017 at 8:59
2

An extension is not the same as an actual user stylesheet. That's why Chrome is worthless garbage now.
– Synetech
Jul 9, 2017 at 23:02
2

@Synetech what are you talking about? This extension adds a button to open the stylesheet for editing.
– OrangeDog
Jul 9, 2017 at 23:08
2

Stylish 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
Oct 3, 2018 at 23:14
2

@DmitryAlexandrov I have no idea about Stylish. My original answer was about ChromEdit, but years ago someone changed it.
– OrangeDog
Jan 26, 2019 at 15:35

| Show 4 more comments

2 Answers 2