David Kitchen

Avatar

Just another SharePoint developer blogging

Firefox userContent.css

This is a rather good file, and you can find it on your Windows system by browsing to:
%appdata%\Mozilla\Firefox\Profiles\profilename\chrome

By default there is an example file name userContent-example.css that contains commented out examples:
/*
* example: turn off "blink" element blinking
*
* blink { text-decoration: none ! important; }
*
*/

Effectively this is a global Cascading Style Sheet file that will be applied to every site that you visit.

Initially it’s hard to see the point in such a thing, but after a while it becomes apparent that this is a rather sneaky way to customise the entire www a little to your desires.

I have a pet hate for PDF files, the length of time it takes for Acrobat Reader to fire up, and the deceptive way that a lot of links point to them. So I like it when sites indicate that a link points to a PDF file. Too few sites do this though. That’s OK, with the userContent.css file we can create a stylesheet entry that will detect PDF files and add some text for us so that we can spot PDF links before we click on them:
/*
* Warns about PDF links
*/
a[href$=".pdf"]:after {
font-size: smaller;
content: ” [pdf]“;
}

Now whenever I see a link to a PDF file, that link is followed by the text: [pdf]

Lovely.

Here are some of the other things I’ve put in my userContent.css file:
/*
* Warns about PDF links
*/
a[href$=".pdf"]:after {
font-size: smaller;
content: ” [pdf]“;
}
/*
* Warns about new window links
*/
:link[target="_blank"]:after, :visited[target="_blank"]:after, :link[target="_new"]:after, :visited[target="_new"]:after {
font-size: smaller;
content: ” [new]“;
}
/*
* Warns about JavaScript links
*/
a[href^="javascript:"]:after {
font-size: smaller;
content: ” [js]“;
}
/*
* Hide MS Ads on TheRegister.co.uk
*/
div[id="ad"] {
display: none ! important;
}
/*
* Fixes bug in Firefox
*/
col {
display: none ! important;
}

To set up a userContent.css file, just add a text file named that to the chrome directory in your settings:
%appdata%\Mozilla\Firefox\Profiles\profilename\chrome\userContent.css

Within that you should place your CSS rules.

3 Comments, Comment or Ping

  1. DerHesse

    I like it. Good tip!

  2. Michael Bierman

    Wow, very cool. Not only good did I learn about the usercontentcss, but I was unfamiliar with the css content property. Thank you!

  3. Pontus

    Nice tips! I’ll be using some of this. Also, when CSS is not enough (or when you’re hungry for some more global customization), there is always Greasemonkey (http://www.greasespot.net/).

Reply to “Firefox userContent.css”