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\chromeon 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.