February 1, 2005

Make Firefox display sites the way you want it to

Using Firefox gives you the ability to edit a CSS file which it uses in addition to the default styles as well as any author styles. In many cases this gives you the option to specify styles for pages you visit that you prefer, if you already know a bit of CSS.

The key is to be as specific as possible, so that you avoid styling other pages by using very generic selectors. For example, I like reading Robert X. Cringely, but I hate his website; the text is all scrunched up with very little whitespace. I mailed him and he told me he has no control over how it looks, so this is how I took things into my own hands. Looking at the source of the page, it is clear that the main text lives in a p element that is a child of div#icontent, which is adjacent to div#isearch, which is itself a child of div#ileft. Using the appropriate selectors, we come up with this rule:

div#ileft > div#isearch + div#icontent > p { line-height: 150% }

It's very unlikely that another website has exactly this combination of elements, unless one of them copied the other. Put this in the chrome directory in a file called userContent.css and restart. Suddenly I, Cringely is no longer painful to read! Well, you might find the prose painful, but at least the typography doesn't suck so hard.

If you're on Windows, the chrome directory can be found at %userprofile%\Application Data\Mozilla\Firefox\Profiles\default.???\chrome

Here are another couple of examples:

/* makes Slashdot comments sans-serif */
html > body > table > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td { font-family: Verdana }
/* makes news.bbc.co.uk full width */
body[text="#000000"] > table+table+table[width="760"], td[width="10"] + td[width="629"] > table[width="629"] { width: 100% !important; }

Notice that I've been very specific - for the Beeb it's very unlikely that you'll find exactly that combination of elements with those attributes on another site (and no one would copy news.bbc.co.uk's markup!) so I'm pretty confident it won't mess up any other sites. As for Slashdot, I'll leave specifying it more thoroughly as an exercise for the reader. I sure as hell don't fancy getting my mind dirty looking at their HTML ;-)

Posted by Oxygenik at 2:15 PM | Comments (8)