The Hickensian

2.05.07 Google Reader Theme Fixed Again

23 comments
Tagged with: google, googlereader, greader, theme

OK, gReader theme fixed (I think). Google made some markup changes, for instance, Tag folders and Subscription icons once had classes of ‘icon’ and ‘icon-sub’ respectively, but now are both just ‘icon’. Fortunately there are still hooks in the markup to hack into.

v 0.86 ‘The Windermere’

Fixes for changes in Google Readers markup :(
Now available as a One click install into Stylish at Userstyles.org *
Versions are now named after types of new house builds in the UK.

*In order to do this, I’ve had to remove the big-assed loading graphic from the CSS in order to get in under userstyles file limit. I’ll look at ways of getting that back in later.

Further work on the display of entries still to come…

Installation

Download gReader.zip., or if you use Stylish with Firefox/Flock, install at Userstyles.org. There are 2 versions, one for Mozilla browsers and one for WebKit & Opera.

Firefox & Flock

Once you have the Stylish extension installed, you can do a One click install into Stylish at Userstyles.org. If you don’t want to use Stylish, follow the Camino method below.

Camino

Add the following @import rule into the top line of your /Library/Application Support/Camino/chrome/userContent.css file, (or create it if it doesn’t exist).

@import url(greader.css);

Place the greader.css file in the same chrome folder. 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.

Comments | RSS

No.1

∞ Mihai Parparita said 1014 days ago:

Sorry about the markup changes. We removed some CSS classes that we weren’t using (and also made a few tweaks so we work better in nightly WebKit builds).

Mihai Parparita
Google Reader Engineer

No.2

∞ Joshua said 1014 days ago:

Wow Mihai! Good to see you hear! Thanks for the updates Jon!

No.3

∞ Joshua said 1014 days ago:

And if I could spell correctly it’d be even more exciting!

No.4

∞ Jon Hicks said 1014 days ago:

Ha! :D

No need to apologise at all Mihai! There’s no reason why you should support hacks!

No.5

∞ Uncle Asad said 1014 days ago:

Wouldn’t it be easier (and more maintainable on the user end—just keep replacing the greader.css file) to @import the file in Camino’s userContent.css, or does @importing not work?

No.6

∞ Jay said 1014 days ago:

Thanks Jon, you do good work good sir.

No.7

∞ Nick said 1014 days ago:

I hope you are somehow seeing a paycheck somewhere for this. Not that you are doing this for money or anything, it is just I can’t imagine the amount of time you must have spent on this. As we are all accustomed to saying, Great Work!

No.8

∞ Jacob Smith said 1014 days ago:

The @import works great (from Camino at least), I was actually going to post that suggestion as well.

No.9

∞ gulup_jamun said 1013 days ago:

Thanks for update Jon. I love thise theme :)

No.10

∞ Snow said 1013 days ago:

Love your style – thx alot jon !

No.11

∞ Jon Hicks said 1013 days ago:

@Asad – yes @import works, and thats the method I use personally in Camino. I didn’t really think ahead to be honest, and obviously the method stated above is cumbersome when updating a lot. I’ll get it changed!

No.12

∞ slogoo said 1013 days ago:

Bug:when the expanded view unread Items have this image
http://www.google.com/reader/ui/3069504893-card-corners.gif

No.13

∞ Jason Harris said 1013 days ago:

Thanks for the update Jon. One small issue I have found is loading the style from userscripts.org using stylish, the ‘loading’ bezel is still using the old fashioned ‘google labs’ image rather than the Mac style black bezel and throbber – even after a restart and cache purge. However, copy and pasting the code from your css file back into stylish resolves this issue. Great work though, and thanks again :D

No.14

∞ Dan Morgan said 1013 days ago:

I just wanted to say thanks for this skin, its transformed Google Reader and should be the default look.

Great work!

Dan

No.15

∞ peeweejd said 1013 days ago:

Thank you so much for this. If you ask me, they should make this the default interface.

No.16

∞ Jason Harris said 1013 days ago:

Never mind my last comment re: stylish/userscript. I actually decided to re-read the changelog where it clearly states that the loading graphic was removed from the userscript. Stupid me :\

No.17

∞ David Alan said 1012 days ago:

Bug: The background for all cells in “Feed Settings… > Change Folders” lights up as active when you mouseover any one Folder, not just the cell which your mouse is over.

Suggestion: If you still want to use the spiffy loading graphic to go with the rest of the styles, why not make a separate stylesheet that does nothing other than overwrite the loading gif? This splits up the file size (to make userstyles.org happy) but doesn’t require any silly hacks or icky over-compression. It also lets users who want a tiny bit more modular control choose whether it matters to them.

No.18

∞ Sascha Brossmann said 1012 days ago:

Thanks for this nice hack. One bug that immediately caught my eyes: installed for any google URL in a WebKit browser, it is consequently also applied to gCal. Which unfortunately seems to wreak havoc onto vertical spacing…