134

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

Where should I create the file (Windows 7)?

Peter Mortensen
  • 12,190
Rauf
  • 3,707

2 Answers2

177

  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.

Josh Davis
  • 103
Rauf
  • 3,707
  • 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 03 '13 at 10:38
  • 9
    You can remove @-moz-document domain("...") to apply the style to every pages. – Nicolas May 30 '13 at 08:26
  • 1
    Why is it supposed to be in the chrome folder? – Septagram Dec 18 '13 at 08:01
  • 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 Sep 27 '14 at 18:05
  • 1
    I know the OP asked about Windows 7, but for OS X users the path is ~/Library/Application Support/Firefox/Profiles/.default/chrome/ – rlovtang Dec 01 '14 at 15:54
  • 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 May 08 '15 at 11:39
  • 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 '16 at 14:04
  • 18
    It it is necessary to *restart* Firefox for it to take effect. – Peter Mortensen Jul 18 '18 at 08:32
  • 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 Jul 18 '18 at 08:33
  • Is a refresh required? That would help for trouble shooting.. – jcalfee314 Sep 05 '18 at 13:32
  • 41
    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 Sep 18 '19 at 12:44
  • 2
    Don't forget to: set toolkit.legacyUserProfileCustomizations.stylesheets to true (at this URL: about:config). Then restart Firefox. – zenekpiwko Dec 28 '19 at 14:23
  • 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 Jan 29 '20 at 22:44
  • 2
    @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 Jan 31 '20 at 17:03
  • 1
    @JohnO worked for me in firefox 72.0.2 as of today. – éclairevoyant Feb 11 '20 at 23:18
  • Is it possible to have multiple custom css files so that I can keep the css for different sites separate? – Moberg Apr 17 '20 at 07:48
  • 1
    @Moberg that is what @-moz-document domain(example.com) is for, it limits the enclosed CSS to only the domains listed between the brackets. – klaar May 17 '20 at 09:41
  • 1
    Also note: the "!important" is, in fact, important for this to work. :-) – Ben Oct 16 '20 at 22:32
  • as great as this is, it's annoying that I have to close and re-open the browser for styles to take effect. anyone know of a workaround for that? – Eaten by a Grue Jan 11 '22 at 06:55
  • @billynoah I'm wondering that still Mozilla follows this setup. – Rauf Jan 11 '22 at 09:33
  • @Rauf - I'm currently stuck on Firefox 78 and it definitely works. Just that It seems the file contents are cached or something because changes aren't shown until I restart the browser. – Eaten by a Grue Jan 11 '22 at 15:44
  • From what I can see !important doesn't work or doesn't work the usual way. I tried to change font-family, and in the Developer Tools it showed that font-family was overridden, but in reality it used the original font. Resolved it by making the selector more specific. – x-yuri Mar 12 '22 at 04:01
  • @Ben If site has no property defined for some element at all, than !important is no so important to include in your rule. – ScienceDiscoverer Jun 20 '22 at 07:46
  • @EatenbyaGrue Yes, you can press F12, and in stylesheet editor select you userContent.css and modify it, it will be applied in real time. You can also save it from there. – ScienceDiscoverer Jun 20 '22 at 07:47
  • EDIT: You will have to reload browser first time you apply userContent.css to some site, @-moz-document does not seem to resolve if you just import it to stylesheet editor manually. But global styles still apply after manual import. – ScienceDiscoverer Jun 20 '22 at 09:17
7

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
  • 1,241
  • 1
    I thought I'd got ChromEdit from the official list, but OK. – OrangeDog Jul 02 '15 at 19:57
  • 17
    Based on recent reviews, Stylish should probably be avoided. – KlaymenDK May 31 '17 at 08:59
  • 2
    An extension is not the same as an actual user stylesheet. That's why Chrome is worthless garbage now. – Synetech Jul 09 '17 at 23:02
  • 2
    @Synetech what are you talking about? This extension adds a button to open the stylesheet for editing. – OrangeDog Jul 09 '17 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 03 '18 at 23:14
  • 1
    @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 Jan 26 '19 at 15:15
  • 2
    @DmitryAlexandrov I have no idea about Stylish. My original answer was about ChromEdit, but years ago someone changed it. – OrangeDog Jan 26 '19 at 15:35
  • 1
    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 Apr 20 '19 at 18:08
  • Stylish (2.8 stars in Oct 2022): https://addons.mozilla.org/en-GB/firefox/addon/stylish/

    Stylus (4.6 stars, recommended by Firefox): https://addons.mozilla.org/en-GB/firefox/addon/stylish/

    Both are still available. I'd go with Stylus.

    I can also highly recommend Midnight Lizard for creating dark or tinted looks. https://addons.mozilla.org/en-GB/firefox/addon/midnight-lizard-quantum/

     – trebor Oct 26 '22 at 09:55