Bloglines Skin 1.4.1 / journal / hicksdesign

23/10/06

Bloglines Skin 1.4.1

I’m really not sure how to go about numbering these things, but here’s the next version anyway.

The first obvious change is that the header is now a generic shiny Aqua blue:

Bloglines Skin Blue in Camino

Apart from the loss of wood. this version is all about improving the sidebar:

Now uses a home-grown version of the standard Feed icon, rather the one straight from feedicons.com
Background changed to the Mail.app style sidebar colour.
The splitter/thing-to-hide-the-sidebar is now transparent but still works (aim for the new Tiger style splitter).
The Add | Edit | Options menu is now at the bottom of the sidebar as icons. This is all fine, except for the Edit screen where you lose the last two off that list. I’m still trying to work out a way around that one.
Changed the edit screen’s yellow instructions boxes and icons to suit
General tweaks and improvements

Update This should fix the problems reported regarding margins. Please re-download and try!

The next version will focus more on improving the main display of feed items. Again, let me know of any bugs, wishes or suggestions.

Finally a wee word about performance. The CSS file is now 28k, and while I don’t notice any performance hit, you might. When the skin feels like its really ‘done’, I’ll optimise it to try and reduce the load. However, if it’s making Bloglines too slow for you to use, then don’t use it!

Download

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

Installation Instructions are available on the original post

Comments | RSS

Chet said 642 days ago:

nice! I was just coming to get the skin and to my pleasant surprise there was an update! this version is great, love the macqua.

Paul O'Shannessy said 642 days ago:

Looks better. The wood was nice, but I like the Aqua better. I also like that the sidebar no longer has the gaps in background color between feeds when you select a folder.

Henrik N said 642 days ago:

Top level indent in the sidebar is not correct:

Previewing or saving in Stylish gives two “Expected declaration but found ’!’. Skipped to next declaration.”, but seems to work anyway.

Other than that, it looks great â€“ thanks.

josue salazar said 642 days ago:

Awesome!

Nik Steffen said 642 days ago:

Is there no way to get this for FF/Win? I am loving these skins and wishI was able to use them aswell. I really need a MacBook…

Henrik N said 642 days ago:

â€¦and I suppose I should mention I use Firefox 1.5/Mac.

Ian Lloyd said 642 days ago:

“Apart from the loss of wood” ...

Yeah, that’s not a good thing to happen ;-)

Ian said 642 days ago:

This is simply fantabulous, love the new “sans wood” style. Having a small issue, though, using it with Safari. There appears to be an additional line of something at the top of the main display, which pushes it down 1-2px and causes the headers to be misaligned. I took a screengrab so you could see:

http://www.fever606.net/images/bloglines.png

That’s with Stand 2.0 and Safari 2.0.4. I’m not doing any other site modification with Stand, and the only change I made in Safari was setting the default font to 14pt Helvetica.

Dale D said 642 days ago:

Has anyone made anything like this yet for GoogleReader?

#10

Dale Cruse said 642 days ago:

Just keeps getting better.

#11

Dave Jeffery said 642 days ago:

Woohoo, Great work Jon! The add, edit and options buttons at the bottom are a great touch!

#12

BJ Vicks said 642 days ago:

I’m having the same indentation problem as Henrik using the latest release of Camino.

That aside, all looks good at first glance!

#13

Dave Jeffery said 642 days ago:

I’m having the same indentation problem as Henrik N (using the latest nightly of Camino), otherwise it’s perfect.

I cooked up a quick hack because it was bugging me so much…

/* Quick sidebar indentation hack */
.treeView li {padding-left: 40px !important}
.treeView li li {padding-left: 22px !important}
img[src="/images/tree_plus.gif"], img[src="/images/tree_minus.gif"] {padding-left: 16px !important; margin-left: -5px !important}

#14

Dave Jeffery said 642 days ago:

By the way to use the hack above you need to copy and paste it into the end of the ‘bloglines-moz.css’ file (just before the final parenthesis).

#15

Mario said 642 days ago:

Looks really great, I would use it, but with the later gReader I stopped using Blogines, mainly because of it’s crappy “windows” designed interface ;)

#16

Mike D. said 641 days ago:

You are lucky you live across the Atlantic from me. Otherwise, I would be knocking on your door right now to give you a big manhug.

After using the first mod for only a few days now, I could never go back.

#17

Mike D. said 641 days ago:

... and just as I post about my desire to issue a transatlantic manhug, I installed the skin and am having the same margin issues as the poster above. Also, the little widget that sticks to the bottom of the left frame isn’t flush against the bottom until you resize the window. Looks like a Safari bug.

#18

mightyDave said 641 days ago:

Oh if I still used Bloglines – this would be wonderful. I’d offer anyone $1 to do this same skin for Google Reader. I’ll be standing right here with my dollar. I’ll be the one standing over here – in the comments – with a dollar in his hand.

#19

Jon Hicks said 641 days ago:

@ Nik – You just need to install the Stylish extension and add the css rules to it! Its only a OS X themed skin, but it should work in Firefox on every platform.

@ Ian – Sadly this is because the frameset doesn’t have frameborder=”0” in the frames attributes. In Camino and Firefox it looks fine, as it defaults to no border top and bottom, but in WebKit you get the border pushing it down. I’ve asked the folks as bloglines to see if they could add the frameborder value, but the problem is that it needs to be there, because thats what you grab onto to resize the sidebar.

Sorry about the margin issues, I’ll have a look into that. Thanks for the code David.

#20

Brutal said 641 days ago:

Awesome skin! Thanks!

btw: the errors that occur when installing with Stylish are from line 49 and 235. ; before !important.

#21

Jon Hicks said 641 days ago:

Thanks Brutal, thats a big help. Line 235 was an extra semicolon before the important, but I’m not sure what problem it had with line 49, but I’ll try it out before posting an update.

#22

Brutal said 641 days ago:

Awesome skin! Thanks!

BTW: the errors reported by Stylish are on line 49 and 235 (; before !important)

#23

Ben Darlow said 641 days ago:

Jon, can I just say something on the subject of the feed icon?

#24

Jon Hicks said 641 days ago:

This may sound rude, but how is that better? I think the ‘ticked’ version is less clear and unbalanced.

#25

Ben Darlow said 641 days ago:

I’ll have to resurrect my original article from my trashed WP database so I can explain my thinking better, I suspect. In short: the original icon used in Firefox had the central ‘dot’ as the origin of the concentric rings. It was only the later feedicons.com template created by Matt Brett that gave rise to the different appearance.

I’m guessing that it’s a matter of personal taste as to which you prefer, as others have told me they also dislike the fact the rings don’t line up properly.

#26

Nik Steffen said 641 days ago:

Thanks Jon, works great with Stylish. This is absolutely amazing, especially because I was only recently wondering when Bloglines would finally update their design.

#27

Ben Darlow said 641 days ago:

Article restored. That all said, I do like the look of this Bloglines thing. I shall have to give it a try later on today (why is it I always find cool things to try on my Mac whilst I’m at work using a Windows PC?).

#28

Jon Hicks said 641 days ago:

I’ve just uploaded a revised version that:

* Fixes the problems people had with margins (or at least it should do, as I couldn’t reproduce the problem)

* Adds rules to compensate for the frameborder problem in WebKit. Headers should now be re-aligned

* Fixes errors that were causing the Stylish extension to moan (thanks Brutal)

Let me know if this version does or doesn’t fix the problems you’ve been having!

#29

Chris said 641 days ago:

A little bug on Safari, Jon:

Also, is there a reason @import url(bloglines.css); does not work in my userContent.css in Safari? I had to append the contents of the file to make it work at all.

#30

SkylarP said 641 days ago:

Absolutely stunning, Jon. I’ve been experiencing a lot of bugs with NewsGator recently, and your skin has pushed me to start using Bloglines instead. It’s such a pleasant experience with your skin!

#31

Jon Hicks said 641 days ago:

Those having problems in Safari, could you please let me know more details about your setup? Its all working fine here on Safari 2.0.4 and OS 10.4.8. Also, do you have any usercontent css files loaded?

#32

Dave Jeffery said 641 days ago:

Thanks Jon, The update resolves the indentation bug that I was experiencing.

#33

Ian said 641 days ago:

Thanks, Jon… I figured that it was something like that.

Still getting the headline misalignment with the newest version, though. Again, Safari 2.0.4 (419.3), OS 10.4.8. Stand is the only addon I have running for Safari, and bloglines is the only site with Site Alteration enabled.

#34

Jon Hicks said 641 days ago:

Safari users – make sure that you empty your cache then restart Safari. Do the issues still happen? Safari has an aggressive cache, and getting new changes can be a pain. It may well still be doing it, but just wanted to be sure, especially as I can’t see the issues on my Safari.

#35

Ian said 641 days ago:

Just an update: I noticed that, with the new version, everything looks great when viewing feeds. It’s just the “Welcome” page (when you first go to http://www.bloglines.com/myblogs) that’s misaligned.

I then proceeded to dump the cache (as per your instruction). Same result… feed pages appear properly aligned, the welcome page is off. Obviously something fishy on their end, and certainly eminently livewithable (it’s not like I look at the welcome screen for longer than it take to hit shift-a anyway). Thanks for all the hard work, sir.

#36

Jon Hicks said 641 days ago:

No, I think that’s me! I’ll work out another update!

#37

Joshua Blount said 640 days ago:

Thanks! You’ve really increased my own pleasure in using bloglines.

#38

Chris Reinhardt said 640 days ago:

Between this and Safaristand’s option to open _blank links in a new tab, bloglines is at least 100% better, but…. in safari (haven’t tested other browsers) when a feed is highlighted in the left frame, the kept-as-new count isn’t visible.

#39

Jon Hicks said 640 days ago:

Chris, I’m 99% sure that Bloglines removes the unread count as soon as you click on it – nothing to do with the skin. Or is the kept as new count something different?

#40

Chris Reinhardt said 640 days ago:

It adds a second count in parenthesis to the right of the unread count. When you mark an item as unread, it can be seen briefly during the fade in, and it can be seen if the feed isn’t highlighted in the right pane. It looks almost as though the kept-as-new text color and the background color are the same.

#41

Stephen VanDyke said 639 days ago:

This is absolutely beautiful, however the lack of the Bloglines logo just felt weird (maybe that’s just me). Anyways, I sent along a base64 encoded version of this logo to Jon by email if he should choose to incorporate it. For those at home, just google “base64 image” and you’ll find an encoder.

#42

Jon Hicks said 639 days ago:

@ Chris – Damn! I didn’t know about that one, and it scuppers my plans for styling the unread count too. I’ll look into

@ Stephen – Thanks for the image, but I really don’t like the Bloglines logo, which is why I removed it in the first place.

#43

Michael said 638 days ago:

The main change is new scheme?

#44

Felix GeisendÃ¶rfer said 636 days ago:

This is awesome, in fact I just started using bloglines in order to enjoy this design. Didn’t like bloglines before that ; ).

#45

Roel said 634 days ago:

Thanks for the Bloglines mod! I think it’s a great improvement.
Maybe the Bloglines team should document their interface and hold a skin contest. :)

#46

cooper said 633 days ago:

argh – i really liked the wood. any way to get that back as an option or is it just… gone?

#47

Gerald Fernandez said 630 days ago:

Since i really discovered this place (I kinda knew of it before, but not it’s greatness.) my computer has become Hicksdesigned, first I had your sage script, then you gave me democracy TV, and now you have given me the ability to use bloglines (which I have always liked.) despite the horrible ugliness. Sage was always a bloglines replacement for me, as it it not as ugly.

#48

akatsuki said 626 days ago:

I have to say I also preferred the wood finish. I went back to download the prior version but it looks like you have replaced those with the newer one. Any chance of getting the older version?