The Hickensian

28.04.07 Google Reader Theme update

25 comments
Tagged with: google, googlereader, siteskin, theme, updates

Here’s an update to the Google Reader theme, mostly positioning bug fixes (see below for more information). Feel free to modify the CSS to suit your own tastes, but be aware that ‘highlighting the current selected entry better’ is still ‘on the way’. In some ways I find the Google method of a big rounded box outline a little too much, so I’m playing with some options… when I get time!

Also, I’ve been using CSS Edit 2.5 more for these changes – the recent update is even more suited to site skinning than before. Recommended.

Finally – a word on getting this theme onto userstyles.org, so that Stylish users can update easier: I have been trying to do this, but the theme currently clocks in at 76k, 12k over the userstyles limit! I need to look at optimising the code to get it work :(

Which does lead to a warning – this theme may well slow down your Google Reader experience.

Changes in this update:

Fixed: RSS icon positioning
Fixed: Toggle triangle position
Fixed: ‘Loading’ animation repetition glitch in Mozilla
Fixed: Green star is now Orange as it should be ;)
Fixed: odd placement of RSS icon on feeds not in tag folders
New: Replaced the small icons under each entry (Share, Email)
New: Proper ‘Home’ icon (well a nicked one anyway)
Combined Webkit and Mozilla versions to use same CSS
Implemented @-moz-document url-prefix to make the theme work when subscribing in Mozilla (thanks Tobu!)
Now supports https URL in Mozilla too.

Installation

Download gReader.zip. There are 2 versions, one for Mozilla browsers and one for WebKit & Opera.

Firefox

Once you have the Stylish extension installed, just copy and paste the css into the ‘create styles for this page’ window. If you don’t want to use Stylish, follow the Camino method below.

Camino

In Camino, either paste this into your /Library/Application Support/Camino/chrome/userContent.css file, or if that file doesn’t exist, rename the greader.css file to be userContent.css. The theme will be applied when you restart Camino.

Safari

Once Safaristand is installed, place the greader.css file in your user/Library/Safari/Stand/UserStyleSheets folder. Then visit Google Reader, go to SafariStand > Settings > Site Alteration. Add the site, enable Site Alteration and choose the greader file from the list. Make sure the matching pattern is just www.google.com. You may have to empty your cache, restart Safari and refresh before seeing any changes!

Omniweb

In Site Preferences > Page Appearance, choose the greader.css file under ‘Style Sheet’. The change should happen instantly!

Opera

Put the greader.css file anywhere you like! Right-click on the Google Reader page, choose "Edit Site Preferences" and select the CSS file through the display tab, under ‘My Style Sheet’. Like Omniweb, the change should apply immediately.

Have you found this theme enhances your life beyond all telling?

Please consider donating some spare change to the Hicksdesign Cheese Fund.

Comments | RSS

No.1

∞ Jakob Wells said 1018 days ago:

Have any of your “Defaults” changed in light of software releases this Monday?

No.2

∞ Vitaliy said 1018 days ago:

Absolutely great, I might switch to Google Reader because of the theme alone!

No.3

∞ Thomas Mango said 1018 days ago:

It’s just great.

No.4

∞ Stijn Vogels said 1018 days ago:

I must say, this is excellent news. I’ve switched styles after your initial posting and have been greatly enjoying the new look of my online feedreader. Some friends were also quite impressed and changed designs as well.

No.5

∞ Nic Lindh said 1017 days ago:

Thank you very much for doing this. Brilliant work!

No.6

∞ PopMiracle said 1017 days ago:

Can’t show shared item.Installed by stylish.

No.7

∞ Michael Grinstead said 1017 days ago:

Thanks Jon.

No.8

∞ fishy said 1017 days ago:

I used to scroll my mouse to read, and press “v” for further read (the current item)
But in this skin, the current item and other items is not so obvious differently, there’s some difference in color, but hard to see. So it would be great if there’s more contrast colors to indicate the current item.
Anyway, great work! :)

No.9

∞ Marcel said 1017 days ago:

Great theme — I love it! Everything seems to run well. Thank you!

No.10

∞ Ian said 1016 days ago:

Hey Jon, you said you used CSSEdit 2.5 for most of the changes to the Google Reader theme but after your last post where you discussed the new Coda app by Panic I was just wandering which you preferred to use and how useful do you find apps such as skEdit and/or TextMate?

I’ve just switched over to a Mac and am having to look for new tools for the trade but I’m having a hard time trying to choose between such elegant and funtional apps. Mac users really do have an embarrassment of riches in this department.

No.11

∞ Bryan said 1016 days ago:

Keep up the great work!

No.12

∞ Craig said 1015 days ago:

I love this theme. Thank you soooo much for your hard work on this. I made a few tweaks on my end to make a it a bit more readable specifically for me.

No.13

∞ Jay said 1015 days ago:

Love this theme! Any chance of it being uploaded to userstyles.org so we could follow updates a bit easier?

No.14

∞ Jon Hicks said 1015 days ago:

Jay – Read the post! ;o)

No.15

∞ zxspectrum said 1015 days ago:

this is great!

just moved half of my NNW subscriptions and hopefully the rest will follow when Greader will do nested folders.

also, why don’t you post it on Macupdate? anyway, just donated and i hope that you guys will too.

thanks again,
zx

No.16

∞ Jon Hicks said 1015 days ago:

Do you think its the kind of the thing MacUpdate will be interested? Maybe once its a ‘final’ release!

No.17

∞ Jester said 1015 days ago:

I really love your theme. Great work and thank you for sharing! Maybe if all the Google web apps are skinned like this you might prompt them to do a better job on their own :).

One thing I would like to see though … not sure if it can be done, or if you want to add it.

A horizontal rule on the Feed frame beneath the last feed that is Tagged. When adding a new feed, it will appear to be in the bottom (alphabetically) Tag, however, it really is just floating there because you have not assigned it anywhere. Not a real big deal, but a horizontal rule can point this out pretty easily.

No.18

∞ Damian said 1015 days ago:

@ Craig:

Could you, please, post the changes to make the theme look that way? I Love it

No.19

∞ Jay said 1015 days ago:

Duh – you expect me to actually read? ;)

No.20

∞ Craig said 1014 days ago:

For the changes that Google made which in turn broke this theme, here’s a quick fix for the left subscriptions area. Change these two classes to their new names:

.icon-folder => .icon-d-1
.icon-sub => .icon-d-2

No.21

∞ Dale Mugford said 1014 days ago:

Worked perfectly, Craig, thanks for posting that. And Jon, I’m a groupie. Your work rocks my socks (heterosexually).

No.22

∞ Jon Hicks said 1014 days ago:

Craig – just posted an update to fix this. I hadn’t noticed the class names .icon-d-1 and .icon-d-2 though – I may try those instead!

No.23

∞ Matthew said 1013 days ago:

Good stuff, thanks.

No.24

∞ Cottser said 1001 days ago:

I love this, but one thing that bothered me was that there was no margin in between the left pane and the content showing in the main area when you first load up Google Reader. I edited the style definition for .section and added padding-left: 10px. Ahhhh, much better.

No.25

∞ Cottser said 1001 days ago:

Sorry, I should have said added a style definition for .section.