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.

  1. 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
  2. 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;
 }
}
  3. 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: , ,

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

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

  1. Bowman Says:
    November 12th, 2009 at 8:57 pm

    Thanks, now I can block all those ads on your site.

  2. 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.

  3. 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/

  4. 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.

  5. 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 */ }
  6. motoculteur Says:
    July 6th, 2010 at 9:22 pm

    i tried the third one and it works for me.

Leave a Reply


© 2007-2010, Corey Gilmore | Posts RSS Feed | Comments RSS Feed | Contact

 

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.