Override Site CSS in Firefox with userContent.css

cssfirefox

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

Where should I create the file (Windows 7)?

Best Answer

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

Related Solutions

Firefox – Change Firefox theme locally with CSS (without any extension)

Go to your Firefox user profile directory. There, open the folder chrome (create it if it doesn't exist) and rename userChrome-example.css to userChrome.css (or create a copy and rename that, like it says right in the file).

Add the following CSS to the file userChrome.css:

.tabbrowser-tab:not([pinned]) {
   max-width: 100px !important;
}

Save, and you're done.

enter image description here

Some issue comments mention that all of the CSS changes have some flaws though, compared to the earlier preferences. On my system, they tabs to the right (and the new tab button) don't slide to the left when I close a tab at the left side.

enter image description here

Firefox – How to change the fonts of Firefox/userContent.css

Stylish can apply CSS to both chrome (XUL) and content (HTML) if you don't specify a namespace. Without Stylish, you style chrome with userChrome.css and content with userContent.css.

You have to split up your CSS so each rule is in the proper user*.css file.

Stylish and namespaces:

stylish

Update

If you wanted to style all text including the Firefox GUI with HaxrCorp 4089 except for HTML code (and similar) elements...

userChrome.css:

*
{
    font-family: "HaxrCorp 4089" !important;
    font-size: 16px !important;
}

userContent.css:

*
{
    font-family: "HaxrCorp 4089" !important;
    font-size: 16px !important;
}

pre, code, samp, tt, var
{
    font-family: Terminal !important;
}

Note: Firefox 8+ no longer supports bitmap fonts, so you may have to find a TrueType (TTF) clone or alternative to replace Terminal.

Example

Windows 7, Firefox 3.6.28 (Legacy), Terminal (font-size: 10px)

screenshot