Google Reader Theme Fixed Again / journal / hicksdesign

03/05/07

Google Reader Theme Fixed Again

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.

Technorati Tags Tags: google, googlereader, greader, theme

Comments | RSS

Mihai Parparita said 380 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

Joshua said 380 days ago:

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

Joshua said 380 days ago:

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

Jon Hicks said 380 days ago:

Ha! :D

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

Uncle Asad said 380 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?

Jay said 380 days ago:

Thanks Jon, you do good work good sir.

Nick said 380 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!

Jacob Smith said 380 days ago:

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

gulup_jamun said 380 days ago:

Thanks for update Jon. I love thise theme :)

#10

Snow said 380 days ago:

Love your style – thx alot jon !

#11

Jon Hicks said 380 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!

#12

slogoo said 380 days ago:

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

#13

Jason Harris said 380 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

#14

Dan Morgan said 380 days ago:

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

Great work!

Dan

#15

peeweejd said 380 days ago:

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

#16

Jason Harris said 380 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 :\

#17

David Alan said 379 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.

#18

Sascha Brossmann said 379 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…