Per-site custom CSS in Firefox

Ever wished you could customize the look and feel of a website you frequently visit, and have the changes stick? Sure you can use the Web Developer toolbar or Firebug, but that's a pain and also isn't persistent. Overriding settings globally for things like link colors and font has been around for ages, but per-site customizations are a bit newer.

All you need is a text editor (or ChromEdit Plus) and a basic understanding of CSS.

Create a file called userContent.css in your Firefox profile directory, inside of the chrome directory. On OS X this will be inside of <home>/Library/Application Support/Firefox/Profiles/>random characters>.default/chrome/ and %appdata%\Mozilla\Firefox\Profiles\<random characters>.default\chrome on Windows. If you've been upgrading since very old versions of Firefox the profile directory might be called default.xxx
Paste the CSS you want into userContent.css, but wrap it in an @-moz-document rule like this (assuming you want to see a white background on my site).
@-moz-document domain(coreygilmore.com) { #bd { background:none; } }
Save userContent.css, close and re-open Firefox. Each time you edit userContent.css you'll need to quit and restart Firefox. This is obnoxious, but not a high priority for Mozilla given the 5 year old enhancement request.

@-moz-document options

@-moz-document url(http://lodoconversations.com/) – only the page http://lodoconversations.com/
@-moz-document url-prefix(http://www.coreygilmore.com/blog/2007/) - anything beginning with
http://www.coreygilmore.com/blog/2007/
@-moz-document domain(backupmoxie.com) - anything on the backupmoxie.com domain

You can chain options also:

@-moz-document url(http://lodoconversations.com/), domain(backupmoxie.com) {
 color:red;
}

Why is this useful?

Some sites are just ugly, but a more common case is fixing printable output. Use the @media rule to specify a list of items that should be hidden, or have more print-friendly colors. You could also hide all advertising blocks or remove the underlining from links.

Another option for per-site custom CSS is to use the Stylish extension which can be thought of as Greasemonkey for CSS.

Tags: CSS, Firefox, Mozilla

Posted on Thursday, October 23rd, 2008 at 5:44 pm | Filed under Development, Software, Technology
You can follow any responses to this entry through the Comments feed.
Post a Comment | Trackback URL | Permalink URL

11 Responses to “Per-site custom CSS in Firefox”

Bowman Says:
November 12th, 2009 at 8:57 pm
Thanks, now I can block all those ads on your site.
Adam Says:
November 13th, 2009 at 12:27 am
Awesome buddy, but is there any way I can click a button or bookmark to apply my custom CSS to any page which I am currently looking at? I used to do this using Web Developer Toolbar, but as you say, it's a pain.

Actually, I'd really like to be able to override the CSS which gets applied when you click View > Page Style > No Style

Cheers, Adam.
Internet-Police Says:
April 12th, 2010 at 4:34 pm
Ich habe eine beschwerde ein gewisser user bei php-fusion ha das firefoxlogo kopiert und bei sich eingefügt. der beweiß http://dki.bplaced.net/
harbin91 Says:
July 3rd, 2010 at 1:57 pm
Awesome guide, but any way I can make it so it's applied to every page I visit? I want to actually change it so I can control what the hyperlinks look like.

Corey Says:
July 3rd, 2010 at 8:08 pm

@harbin91 I'm not positive, but I'd try one of the following:

@-moz-document domain(*) { /* rules */ }
@-moz-document * { /* rules */ }
@-moz-document url-prefix(http) { /* rules */ }

motoculteur Says:
July 6th, 2010 at 9:22 pm
i tried the third one and it works for me.
And now for something completely different! | Rebellious Thoughts Says:
September 1st, 2010 at 3:22 pm
[...] Firefox also renders my CSS correctly, with a few exceptions. Firefox's support for CSS3 attribution statements, which I've used here because they're awesome, is somewhat limited. As such, some orange text and images will occur. As I don't routinely use Firefox, I'm not about to go and find complicated methods of doing hat Opera can do in a single line. If someone else finds a way to remedy the issues Firefox has with my CSS, feel free to post a link to your version here, and I'll include it in this post. Directions for how to customize your Firefox CSS can be found here. [...]
simotron Says:
January 18th, 2011 at 12:42 pm
Hi I have a problem with the cascade!
I would find this costumization very useful if the style passed to the browser would be the last in the cascade, as it's not the last one, original site's css override my costumization!
I want to see visited link on sites that keep the same color but my style is processed but than cutted by original author style a
Any idea how to do?
rowsdower! Says:
April 1st, 2011 at 7:33 am
@simontron, you just append "!important" to the end of each style option you are setting. For example:

body{padding:0;}

becomes:

body{padding:0 !important;}

Note that the "!important" part comes BEFORE the closing ";" character.
alghero Says:
April 23rd, 2011 at 12:24 pm
In Facebook if you want to hide the right colum (usually used for ADV) just use:

@-moz-document domain(facebook.com) {
#pagelet_right_sidebar {
display:none;
}
}
Using custom CSS to remove the new Facebook News Scroller (Chrome & Firefox) « « Exit 20 Exit 20 Says:
September 21st, 2011 at 10:10 am
[...] took some directions from http://coreygilmore.com/blog/2008/10/23/per-site-custom-css-in-firefox/ [...]

The views expressed on these pages are mine alone and not those of any past or present employer. All information presented on this site was obtained lawfully and not through disclosure under the terms of an NDA.