OS X skin for Bloglines

NetNewswire, Newsfire, Shrook, NewsMac, Safari RSS, Pulp Fiction, RSS Menu Endo, Feedlounge, Rojo, Feed on Feeds, NewsGator AND Google Reader. If it works on a Mac and feeds my RSS addiction, I’ve tried and used it.

Until recently my perennial favourite, Newsfire, had been toppled by the beta of the upcoming NetNewsWire 3. It’s new combined view gave me what I wanted in an RSS reader, the so-called ‘river of news’. Just the new posts on one page, grouped by their feed. Newsfire could only show the excerpt of posts, but with NNW I got the full article. I’m of the type that likes the idea of having my RSS view inside my browser though. While Safari RSS showed promise, the performance hit with 200+ feeds was too much to live with. It also tied me down to one browser (which as you will know will never do).

Then Leigh showed me the recent changes that had been made to her Bloglines account. It was fast! I remembered Bloglines to be really sluggish to show posts, but not anymore. Subscriptions were updated automagically before my eyes, and I was smitten. Authentication issues aside, I wanted to use it, if only it didn’t look so… well… Windows™. I couldn’t find anyone that had made a bloglines skin yet, so I thought I’d have a crack!

So this is what it looks like:

Screenshot of the bloglines skin

Many images have been replaced, thanks to a little trick Patrick taught me. In your CSS file, make the width of the image zero, but add left padding to the width of the replacement image. Like this:

    img {
        width: 0;
        padding-left: 20px;
        background: url(mynewimage.gif) no-repeat;

Then all you need to do is put your new image in the background, and you’re there. Now all those PC looking icons are replaced with more Mac ones. As for the header, I could’ve done a straightforward grey type thing, but I fancied wood! It helps differentiate it amongst all the other grey in the browser.

It’s been tested in Safari, Camino, Firefox, Omniweb and Opera. It is intended for Mac users, to blend in with the system look, but it should work OK on other platforms too. Its by no means finished (I’ve focussed mainly on the feeds view rather than other sections), but if you want to try it out, be my guest. Feel free to let me know of any bugs you find in the comments.

I may well go back to a desktop client at some point (If Newsfire gets the option to show the full post?), but at the moment I’m really enjoying my customised Bloglines.


Bloglines skin for Camino or Firefox
Bloglines Skin for Safari, Omniweb and Opera

Update I’ve already fixed a couple of problems. One with the disclosure triangles, and the the other with content hidden under the header on some sub pages. Please re-download for the fixes!

Update 11.10.06 more problems fixed:


To use in Camino or Firefox, copy the contents of the mozilla version into your userContent.css file. Alternatively, place it in the same chrome directory and add an import link to it from userContent.css at the very top, like so:

@import url(bloglines-moz.css);

Or, if you’re using the Stylish extension for Firefox, just copy and paste the rules into a new rule window.

To use in Safari (with SafariStand installed), place the css file in your /Library/Safari/Stand/UserStyleSheets folder. Then when you next visit bloglines, choose ‘site alteration’ from the Stand preferences, click add to add a rule for bloglines, and then select the css file from the ‘Alter UserStyleSheet location’. Make sure you tick the box next to alter as well.

To use in Omniweb 5.5, place the file wherever you like, and select if from the site preferences when you visit Bloglines. Nice and easy!

As for Opera, I’m not sure if it can load CSS per site. Can any Opera users enlighten me on this?