The joys of user stylesheets

User stylesheets are a way to inject some CSS in all the sites you visit, each browser has his own way of setting it up (if you use opera step 2 there should be replaced with: "Tools > Preferences > Advanced > Content > Style Options > Select your css file in My stylesheet"), but the idea is always the same.

I've recently found a couple of use for these styles so I thought I might as well share :

Changing gmail's font

I like gmail, but losing my dear monospaced font was annoying me - especially when reading code-related mails with snippets in them. So this little hack allows you to choose the font used in the mail body area of the page. It's made for the "old" gmail interface since I don't have the new one yet, but it can probably be adapted if it doesn't work with the new one.

.XoqCub .ArwC7c {
  font:16px proggytinytt, "courier new", courier !important;
  font-size:16px !important;

This uses the proggytinytt font by the way, which is my font of choice for all monospace purposes, however if you don't have it it falls back on courier new/courier.

Saving flickr's images peacefully

Some images on flickr seem to be protected with a file called spaceball.gif that's overlayed onto the actual image, so that when you right-click it to save, you hit the transparent gif and can't save the image. With the help of that great CSS3 selector :nth-child(N), you can make sure you hide the gif if it's there.

.photoImgDiv img:nth-child(2) {
	display:none !important;

If you've anything useful, feel free to post it in the comments.

November 28, 2008 // Web

Post a comment

Subscribe to this RSS Feed Comments

2010-07-15 04:51:38


Nice idea, thanks! For me the following did the trick. The .ii selector refers to a received plain text message's content; .Ak is for plain text message composing. The url-prefix is a good idea as well; for other browsers it will obviously have to be replaced or omitted entirely.

@-moz-document url-prefix( {
.ii, .Ak {
font:16px courier, mono !important;
font-size:13px !important;