The Hickensian

10.10.06 OS X skin for Bloglines

72 comments

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.

download

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:

Now works with the Firefox Stylish extension – no errors should be thrown back at you
Subscription headers should be visible to everyone
Subscription menu won’t appear on top of the header when scrolling

installation

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?

Comments | RSS

No.1

∞ Stuart Langridge said 1248 days ago:

Opera 9 does it and earlier versions can be coerced to through JavaScript.

No.2

∞ Micheal said 1248 days ago:

Jon
Great post. Itâ€™s certainly much needed when one looks at the web design of many of these services.
What I would like, assuming one uses an RSS service for reading content generated from web page, is an RSS service that displays the actual web page. (The service would of course have to reconcile what is in the RSS feed with whatâ€™s on the web page.)
At least once a day, I use Firefox to “open all in tab” my bookmarks not in order to find any new content, since the RSS service I use will do that, but more so to experience the design of the page.
It’s a shame that one loses that aspect when using an RSS service.
Micheal

No.3

∞ Ian Lloyd said 1248 days ago:

Great stuff, Jon. Now I have even more reason to be annoyed that I can’t get Bloglines to behave at work anymore :-(

No.4

∞ Steve Cochrane said 1248 days ago:

Hot! I use Bloglines as my reader and this is highly appreciated.

Iâ€™m curious about the code for the background imagesâ€¦ how is that (I assume it to be) hex code generated? Did you just open an image in a text editor and copy-paste the gibberish there, or is it more involved? I had no idea you could do â€œdataâ€ types like that. Thanks.

No.5

∞ Kevin Tamura said 1248 days ago:

Wow, this is nice. Thanks Jon.

No.6

∞ Jon Hicks said 1248 days ago:

Steve – because Camino and Firefox can’t load linked images in userContent.css files. They have to be converted in data URIs (I use this online resource). Webkit browsers can load images fine, but its easier to maintain the skin to make them all use data URIs.

No.7

∞ Myke said 1248 days ago:

Jon, you are a god. Thank you.

No.8

∞ Dale Cruse said 1248 days ago:

Totally hot, Jon!

Could you clue us in how to change that top image? The wood is nice, but since we’re in a customizing mood….

Also, maybe you could feature cool-looking header graphics people could use.

Well done!

No.9

∞ joe said 1248 days ago:

Jon,

great reason to get back into playing with customizing, but the one thing you HAVE to explain is how you embedded the images as data into the css file.

No.10

∞ Colly said 1248 days ago:

Thank you a million times over, Jon. It’s a beauty, and was desperately needed.

No.11

∞ Dustin Boston said 1248 days ago:

This is really pure genius, Jon. I love that it uses the embeded images. I’m wondering if these types of images still get cached and what kind of impact they have on performance (not that it matters concerning Bloglines, but for other uses). Awesome job. There have been a couple sites out there that I’ve been wanting to get my hands on…I guess it’s time to fire up my text editor.

No.12

∞ Jon Hicks said 1248 days ago:

Joe – see my comment #6 above!

No.13

∞ Sam said 1248 days ago:

This is just so hot, I love it.

I took the liberty of digging it.

No.14

∞ josue salazar said 1248 days ago:

Hell yeah!, thanks Jon, you kick ass.
Only thing is, it feels slower now.

No.15

∞ cedmond said 1248 days ago:

Fantastic! I always wondered how one would go about doing this. I always thought the GreaseMonkey extension would have to be used.

No.16

∞ Federico said 1248 days ago:

For Opera 9, you first have to visit Bloglines.com, the browser trough menues: Tools > Quick Preferences > Edit Site Preferences > Display > My style sheet (a text box to define the path the CSS).
The user CSS seems to work fine.
For Opera 8 I can’t remember how to do it but it is surely easy â€”only difference is that you can’t define CSS per site without using user JS.

No.17

∞ Nick said 1248 days ago:

Ah, the dream project.

Only requires testing in modern browser on OSX.

I need a project like this.

No.18

∞ Geoff said 1248 days ago:

I’m trying. Way too much time put into getting this to work and I’ve not gotten anywhere with it. I tried Safari w/ Stand first. No affect to Bloglines at all. Then I tried Firefox with Stylish and got some crazy errors when trying to paste the code into Stylish.

:( What am I doing wrong? Am I the only one?

No.19

∞ Thomas said 1248 days ago:

Any chance at a Google Reader makeover to look more like OSX?

No.20

∞ Jon Hicks said 1248 days ago:

@ Geoff – You’ll have to give me a little more information. When you try it in Stand, are you able to access the stylesheet from the Site Alteration window? Can you send me a screenshot of your settings? Have you refreshed?

@ Thomas – Probably not. I’m not all that keen on Google Reader (and yes I have tried the latest version). Wny not have a go yourself?

No.21

∞ Brutal said 1248 days ago:

Great work!
Thanks!

No.22

∞ Helge said 1248 days ago:

jon, great improvement, i like it!

some things that were better originally though:
(1) distinction between feeds with new items from others (bolded, while in your skin feeds are always bold)
(2) number of subscribers of a feed was visibe without having to hover over anything

No.23

∞ Jon Hicks said 1248 days ago:

It won’t be to everyone’s tastes thats for sure, but I felt information like number of subscribers to a feed wasn’t important. To me, its more noise. I just want to read the feed! I also hide the author name info too (though not in this version)

No.24

∞ Arsen said 1248 days ago:

Hi Jon, this is great, nice colours, Thanks.

However, I am experiencing a bit problem in Safari

feed title (.channel h1) is too shy to show itself
I tried to modified the css in various ways but nothing helps.
Camino, OmniWeb are good.
Does anyone else have the same problem? Any hints?

No.25

∞ Jon Hicks said 1248 days ago:

Arsen, do you have the latest version? Its working fine in my Safari. Please re-download and try it again.

No.26

∞ Arsen said 1248 days ago:

Jon, I re-downloaded and it is still shy. More than weird.

No.27

∞ Reid said 1248 days ago:

I am having the same issue as Arsen. Cool skin BTW!

No.28

∞ Jon Hicks said 1248 days ago:

Can you tell me where you get this problem? Is it just when you’re viewing feeds? Or is it on a particular screen/section?

No.29

∞ Reid said 1248 days ago:

It’s happening on every page within the right frame for me. The weird thing is if I view the page outside of the frame the problem goes away.

I am using Safari 2.0.4

No.30

∞ Roby said 1248 days ago:

hey Jon ,

it is cool, but I have the same prob. with firefox 2.0 just like Arsen, here is my snap:

http://www.flickr.com/photo_zoom.gne?id=266940818&size=o

No.31

∞ Andrew White said 1248 days ago:

Hi, Jon: I’m having the same problem as Reid and Arsen. I can confirm that I have the latest version of the CSS and the problem also occurs with the breadcrumb on the home page. The tabs obscure the first 15-or-so pixels.

It hasn’t removed any functionality I employ, so I’m continuing to use the skin. Its very lovely!

No.32

∞ Jon Hicks said 1248 days ago:

Have you all emtpied your cache and refreshed? I can’t reproduce the problem at all I’m afraid.

No.33

∞ Andrew White said 1247 days ago:

Incidentally, if I collapse the left nav bar, everything displays properly.

No.34

∞ StÃ©phane said 1247 days ago:

Well it looks great from the screenshot but when I try to run it using Stylish I get this massive error – any ideas?

No.35

∞ Arvid Warnecke said 1247 days ago:

I am having the same issues as Arsen and Reid but in Firefox 2.0 RC2. Always the banner for the feed on the right side is half hidden behind the banner.
Would be cool if this is fixable as I really like the new look.

No.36

∞ Paul Reid said 1247 days ago:

Thanks Jon. Looks nice.
Same problem with Safari as the others.

My screenshot here

No.37

∞ Peter Cooper said 1247 days ago:

NetNewsWire has river of news in version 2.1.1 as well. At least, it does on mine :) You turn on the feature to show “New Items” option in the left hand bar, and then just stay sat on that. Et voila, the river of news. I switched to it from NewsFire but look forward to trying 3 at some point.

No.38

∞ Robert D. said 1247 days ago:

It looks great, but why use that feed icon when Wolfgang Bartelme created a far more elegant one? (see http://www.bartelme.at/journal/archive/feed_icon_template/)

No.39

∞ Arsen said 1247 days ago:

Hi, all guys who having same problem as mine, I found a solution for Safari.

Open your bloglines.css which you put in the Safari/Stans/UserStyleSheets/ folder, find ul.channel_nav, change the top: 8px !important; to top: 38px !important; then go to .channel h1, add margin-top: 30px !important; before the padding.

It works for me in Safari, please tell me and Jon and other if this works for you as well.

I am still looking for a solution for Camino, since it has been infected weirdly few hours after I posted my first comment

No.40

∞ Jon Hicks said 1247 days ago:

I still don’t understand this. It works absolutely fine on my mac, and changing ul.channel_nav should only make the subscriptions options menu appear lower down.

The rule that creates the margin at the top is this one:

div.tabs+div.clear {
height: 50px !important;
padding: 0 0 3em 0 !important;
}

I’ll look into this more.

No.41

∞ Arsen said 1247 days ago:

Jon, I forgot to mention, the subscription menu was hidden as well in this problem. So apparently, the two elements need to be dragged down are feed title and subscription menu. My method did just that.

And your explaination on div.tabs+div.clear is fantastic, I modified the height value to 70px and it is correctly displayed now, much easier than my solution.

No.42

∞ Jon Hicks said 1247 days ago:

Ah, it looks as if the 3em padding was the problem. I can’t remember why I added that (it was something to do with flexibility), but depending on font-size settings, it could screw it up!

I’ve made various other fixes too, please re-download and try it out if you get a chance! Looks like I’ll need my own RSS feed for the skin updates!

No.43

∞ Arvid Warnecke said 1247 days ago:

One issue I still notice in FF 2.0 is that when navigating through a feed with ‘j’ or ‘k’ it does not seem to work too well.
While I have been able to jump from topic to topic I now get moved to the middle of an article or to the end of one…
Any ideas?

No.44

∞ David Emery said 1247 days ago:

Hey Jon.

I’m really liking the skin, but I’ve made a couple of modifications – I’ve lost the wood and made a couple of OS X source list style changes to the sidebar; would it be ok if I post the mod on my blog?

No.45

∞ Johan said 1247 days ago:

Beutiful, both the design and the concept. However, on FF1.5.0.7, I have the same problem as Arvid. When navigating through feeds with J and K, the headlines are always chopped off just out of sight at the top.

No.46

∞ Jon Hicks said 1247 days ago:

I’ll look into the key navigation issues, it may not be possible without ‘unfixing’ the position of the header.

David – I’ve got non-wood versions planned.

No.47

∞ David Emery said 1247 days ago:

Ok, cool – I’m guessing your version will be better then mine anyway :-)

No.48

∞ Matt Johnson said 1247 days ago:

Wow, amazing. Worked perfectly for me.

Win XP | FF 1.5.0.7 | Stylish 0.4

Good stuff Jon, love it!

No.49

∞ Reid said 1247 days ago:

Sweet, it works for me now. Thanks for the fix Jon!

No.50

∞ Geoff said 1247 days ago:

Tried it again this evening. Works great in Stylish! Still can’t get any sort of change out of Bloglines in Safari with Stand. I updated the css, emptied the cache and refreshed. Nada. :( Hate to gripe or complain, just very interested in using this skin in Safari.

Hm. I just tried forcing Safari to use bloglines.css in the advanced pane of Safari preferences and it worked just perfectly and instantly. But I can’t very well use bloglines.css for every site I view. :)

No.51

∞ Steve Marshall said 1247 days ago:

Hey Jon, this Bloglines skin is superb!

(Almost) Everything just seems to fit perfectly with how I want Bloglines to feelâ€¦ How d’you manage to do that all the time, mate? :)

My only two comments would be:

* You might want to recolour the ‘keep new’ count on feeds on selection: it’s the same colour as the selection background, and so becomes invisible.

* Make the ‘Mark all new’ link within feeds available outside the hover menu.

(And yes, I’ve made both of these changes to my personal copy, so I’m not that bothered if you don’t feel inclined to make them :P)

No.52

∞ Jaryl said 1247 days ago:

Jon, that update fixed it, thanks. Great stuff =)

No.53

∞ Dale D said 1246 days ago:

Is Bloglines comparable to the recetly updated Google Reader? Does it do anything better? Currently I am using Sage in Firefox however I would like live updating of the feeds; currently in Sage you have to click a button to refresh/grab new feeds.

No.54

∞ brian b said 1246 days ago:

great skin, thank you very much. you’ve transformed BL’s visual experience into something pleasing to spend many hours on (for me at least)

No.55

∞ harlo said 1246 days ago:

this is absolutely outstanding.. you’ve made my day, sir.

No.56

∞ Yannic Walter said 1246 days ago:

I love it!

No.57

∞ Vadim said 1246 days ago:

WOW! Thanks for making my Windows box at the Day Job a bit more Mac-like.

No.58

∞ JN said 1246 days ago:

You’re a God among men.

No.59

∞ Jonathan said 1246 days ago:

Rock On!! This is great! Thanks!

No.60

∞ Schlaefer said 1246 days ago:

Really nice design, thank you very much. The only thing I changed: only feeds with new unread entries are bold in the sidebar.

No.61

∞ Jesse C. said 1246 days ago:

Jon,

Absolutely brilliant. I’m a longtime Bloglines user, and this is the breath of fresh design-air it’s needed. Plus, I had no idea how easy it was to customize a view of a site!

Thanks ever so much, for the design – and the insight.

No.62

∞ Ben Lowery said 1246 days ago:

Hi John,

We just pushed out some HTML changes to the left pane that may break your skin slightly. We switched out the h1 and h2 elements for div’s with the class bl_root_header and bl_folder_header respectively, and wrapped the img tag for the +/- toggler in an a tag. We needed to make the changes to better support screen readers, like JAWS, that help out the visually impaired. I just wanted to give you a heads up if the skin suddenly stopped working…

Thanks for the great work by the way. It’s really a superb design.
—ben lowery—bloglines engineer

No.63

∞ alangenh said 1245 days ago:

This is great! And it works pretty well with the greasemonkey script I like, Bloglines Sidebar Tweaker . That script makes all those links in the left sidebar into a pulldown menu, which makes my left column not need to scroll, which is a Good Thing™.

I wouldn’t mind figuring out how to move the content up a bit in the left column to fill in the blank space… can you point me in the right direction in the css? If not, it’s still nice the way it is. Here’s a pic; the thing I changed in the css was to make the padding on “item” a little smaller.

bigger picture here

No.64

∞ Keely Dunn said 1245 days ago:

Fantastic, I could not be happier. This is the kind of “freeware” that makes me search for a “donations” button on the site. ::thumbswayup::

No.65

∞ Ashish said 1244 days ago:

Okay, looks look great I want to use this hack. But I can’t get it working. I copied the bloglines-moz.css into C:/Mozilla Firefox/defaults/profile/chrome and created a userContent.css (I didn’t have till now) with @import line you said. There is no change in bloglines. Do I need to do more? Is there something which overrides my css? Help appreciated!

No.66

∞ Aaron said 1244 days ago:

Absolutely beautiful! Great job.

I am a long-time Google Reader user, but this might just force a switch.

Many thanks.

No.67

∞ Richie said 1244 days ago:

Cool!!Thanks for your great job.It works very good on my computer :)

No.68

∞ Johan said 1243 days ago:

Haven’t changed my opinion after using it a few days: Great!

But I think I’ve found another thing to look into for an update: Seems that the right hand frame scrolls a bit too much: Clicking in the scrollbar or hitting tab to move down a screenful, it stops approximately three rows of text too far down, which means that you’ll have to scroll back upp a notch again. (FF 1.5.0.8)

No.69

∞ Jon Hicks said 1243 days ago:

Johan, I’m looking into that at the moment, but it may not fixable AND keep the header fixed.

No.70

∞ Adam said 1242 days ago:

Newbie questions, here, as I can’t get this to work. Running FF2.0 on Windows2000 (at work). Copied the file in question into both c\program files\mozilla firefox\chrome and c:\program files\mozilla firefox\defaults\profile\chrome (which is where the usercontent file was located. Copied the @import text noted above (into what appeared to be a blank file with one comment line) but Bloglines doesn’t look any different. Am I in the right directory? Do I have the right files?

No.71

∞ Thomas Kristiansen said 1230 days ago:

Adam: I had the same problem on windows, until i realised that the files need to be placed in your documents and settings\account\application data\mozilla\firefox\profiles directory..

Great work, Jon!

No.72

∞ strat said 1229 days ago:

WOW!!!!
Looks great on opera 9, win2k but thought the collapse/expand field was
missing at first. :D
I have been using bloglines everyday for 2+ years and this is a much needed breath of fresh air. :)
Thanx and cheers!