Re-styling your favourite websites

In an effort to slightly improve the look of my RSS reader of choice, Google Reader, I had a look at the “Stylish” extension for Firefox.

Stylish allows you to add a “user style” to a website so that it changes the colour, layout, and other items that affect the look of the site. In addition Stylish goes beyond that to allow modifications to the look of Firefox itself. Think of it as a Firefox extension that is instantly applied or removed. It’s a really nice little plugin and I can see it being something I’ll dabble with on a regular basis, especially due to the instant results (instead of having to restart Firefox).

There are two ways of changing the look of things.

  1. You can go into the add-on settings (or click the Stylish icon in your status bar) and start writing your own styles for things, or
  2. You can visit and browse through a wide selection of styles for various popular sites.

So, after some digging around for Google Reader styles I found one or two possibilities that might make it look nicer, although I only ended up using one of them which increases the font size and justifies the text – you can load it up by going here:

Writing your own?

So what, pray tell, does writing your own user style entail.. well, at the very least you’d want to have knowledge of HTML and CSS and it would be good to have a couple of handy tools about for analysing the site you want to affect.

If the site in question is well coded, there’s pretty much no end to the changes you can make – however, be warned (before you go spending weeks on a new style), there is always the potential that the site you’re restyling could decide to rework their outputted HTML, and the smallest change of an ID or a class could completely ruin your special style.

Still, a lot of sites retain their HTML output for a long time, adding small changes which could be easy to tweak, and certainly it can be fun to change the look of elements on a website – especially things that have been bugging you for a long time.

With this in mind I instantly had a look at changing the look of Jaiku, which has an awful lot of a particularly suspect green in use. Once I worked out the correct format of my first user style it was just a matter of settling into a familiar land of CSS and making some changes. After about 45 minutes of messing around I had the basis of a new user style for Jaiku, and whilst it’s a little rough around the edges (I focused on altering the main page style) it’s pretty usable (I hope..).

Here’s a before and after shot.

It’s imaginatively titled “No Jaiku Green” and you can get it over here: