The Hickensian

13.05.07

Technorati Tags google, googlereader, greader, theme

Google Reader Theme 0.9

Almost there!

v0.9 ‘The Newbury’

New: All sidebar selections are styled the same
New: Current entry is highlighted, in a similar style to the default theme, but lighter and more minimal.
Fixed: Last rounded corner box bit still poking in from last version
Fixed: Colour for read feeds looks better
Fixed: Feeds not in tag folders aren’t indented the same as those that are. (added 13/5)
Fixed: titles showing up under unread counts (added 13/5)

Installation

Download gReader.zip, or if you use Stylish with Firefox/Flock, you install directly into Stylish from 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 need to install 2 styles. OS X Google Reader and OS X Spinner (they had to be split to avoid the 64k file limit on userstyles). You should be able to update via Stylish > Manage Styles > Find Updates.

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

human said 783 days ago:

how about this problem?

No.2

Alexander A said 783 days ago:

I believe the gReader.zip link still has the old version, 0.86 , instead of 0.9. Nothing new was added, and the feed outlines are still invisible.

No.3

kxalex said 783 days ago:

There is old version. It’s 0.86, not 0.9.

No.4

Adam said 783 days ago:

Hi,.
Nice work although one slight problem, if you have a couple of things in folders/tags and then things without any tags at the bottom of the list there is no obvious seperation between them and the last folder.
Does that make any sense? Should do, if not I’ll post a screenshot :)
Adam

No.5

gulup_jamun said 783 days ago:

comment in script says:

/*
Google Reader Skin
Version 0.86 */

No.6

Jon Hicks said 783 days ago:

Doh! Sorry! Updated version now uploaded!

No.7

Nikolai said 783 days ago:

Jon, great work, but there is still no indentation difference between feeds in folders and the ones outside of folders. Would be nice if you could fix that!

No.8

Jon Hicks said 783 days ago:

@Nikolai and Adam – The trouble is there aren’t enough markup differences between the 2 to be able to style them differently. I’ll continue to look into it though!

No.9

squawk said 782 days ago:

thanks. works perfectly for me in safari.
Only the autohide toolbar at the top is a little annoying. Is there any way to keep it visible. (smaller perhaps?)

No.10

Alexander Atallah said 782 days ago:

To add to Nikolai and Adam’s comments, another issue that needs to be resolved is some way to differentiate between tags and folders. I have a tag that I only apply to certain posts and it looks the same as a folder with the style sheet.

Also, whenever Google Reader makes an orange notification message at the top (such as “Unsubscribed from …”), things go wacko: the notification is moved left and conflicts with the blue bar. What would be amazing (though I don’t know if possible) would be changing the notification style to AppleScript Bezel.

No.11

slogoo said 782 days ago:

Thanks for the Update, Jon Hicks. I customize it ,But also have this 2 problem here?http://www.flickr.com/photos/slogoo/496334379/. and here?http://www.flickr.com/photo_zoom.gne?id=496334385&size=o. Help me ,Please. :)

No.12

Jon Hicks said 782 days ago:

@Alexander – I’m not sure what you mean, a screenshot would be good. Also, it may be something that I don’t want to ‘be resolved’, it may be that I like it that way! In which case you’re welcome to change it to suit your own tastes!

I’m reconsidering the bit about ‘please don’t re-distribute’. Its in there because I’ve put in a lot of work on this, but at the end of the day, it’s styled how I like it, and maybe there should be more freedom for people to make their own versions and pass them around? In fact, I think I’ve just talked myself into it!

@slogoo – Does it do that if you use my CSS?

No.13

Jon Hicks said 782 days ago:

Update! 2 more fixes added to the theme:

# Fixed: Feeds not in tag folders aren’t indented the same as those that are. # Fixed: titles showing up under unread counts

Let me know if this fixes the problems for you!

No.14

slogoo said 782 days ago:

OK. But only me use it, it’s not public.

No.15

kev said 781 days ago:

Thanks for the theme! Any idea why it would affect the typography of NYTimes.com and some of the layout of Gmail in a Camino 1.5.1 nightly? I have to use this version of Camino because otherwise, Reader is all jacked up with or without the Mac theme.

No.16

Chad said 780 days ago:

Jon, here’s a bug I found: when you click on “feed settings” & hover on the “add to a folder” section, the background of whole thing, not just the menu item the mouse is on, changes to blue.

No.17

Alexander A said 780 days ago:

Sorry, Jon, I didn’t mean to be so forceful with my opinion. Google Reader has the ability to create tags that you only apply single posts to. Try disabling the CSS and tagging a single post using the “t” shortcut. You’ll see that Reader creates a dog-tag with that name instead of a folder. See these URLs for the original appearance.

the tag: http://worldphenomena.googlepages.com/Picture1.png.
tag expanded (in case you were thinking that there wasn’t anything in there): http://worldphenomena.googlepages.com/Picture2.png

No.18

slogoo said 780 days ago:

Alexander A?
If you want have the tag,
you can copy this code and post it above #chrome-footer-container

CODE:

img[src=”/reader/ui/3486141912-tree-view-tag.gif”].icon {
width: 0 !important;
height: 0 !important;
padding: 16px 0 0 20px !important;
margin: 0 0 0 9px !important;
display: block;
float: left;
background: url(“data:image/png;base64,R0lGODlhEAAQANUrAFaS6f39//L3//b6/0yJ4uny/1aDyGCa71uL1fr8/1+R3eDt/4Oy9jVRfHus
8kKB3ENnndjo/4iSqkRon9/i6k54tk54t2GW41qP39zq/3Ol7Wqd6NTl/x8wSTRPedfe6uXv/2ih
9Ii2+UlYeoqTqoWRqmOY6GGV4+71/////wAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACsALAAAAAAQABAAAAaCwJVw
SCwKVcikyjhUBZ7P1JKpSlBIlERCSh1IRpKBmFtUCT6lj0AgEpCbqHicEWKg3itVqsB3HP4OBXh6
IBoAh4caIIMpCxsEkAQbC3h5KRkXDw8XGZVHKREYGBGeTSkcHKVEep4KCAYWEw0dSB0NExYGQiYn
rgYVEB4eEBUGCAorQQA7”) no-repeat !important;
}

No.19

Jon Hicks said 780 days ago:

“Sorry, Jon, I didn’t mean to be so forceful with my opinion.” – Not at all, I just wasn’t sure what you meant. This is a feature of Google Reader that I’ve not come across before, and therefore don’t use. Thanks for the code Slogoo – I’ll look into this.

@Kev – no, you should be fine in a Camino nightly (as that’s what I run mine in)

No.20

Sephyroth said 779 days ago:

Jon,

I’m not a Mac user, but I love the look of the osx design. I was wondering if it’d be possible to add support for wider screens; I have a greasemonkey script installed, but it seems that this supercedes that one.

Cheers :)

No.21

Jon Hicks said 779 days ago:

Sephyroth, what do you mean by ‘support for wider screens’?

No.22

Becky said 778 days ago:

Great stuff. :-) One minor problem that might not have been mentioned elsewhere:

This theme was my first experience of Stylish, and I found that it didn’t seem to be working with my Google Reader pages. Then I noticed that the code only applied to .com Google Reader, and I was defaulting to .co.uk Google Reader. A quick modification of the templates fixed that. I just added to extra lines at the beginning with the .co.uk address, but it might work with wildcards, as I said I’m not too up on Stylish.

Hope this is helpful and not stating the obvious or repeating the already known. :-)

No.23

Jon Hicks said 777 days ago:

Becky – the CSS should have a line at the top that says

@-moz-document url-prefix(“http://www.google.com/reader/view/”), url-prefix(“https://www.google.com/reader/view/”) {

Which means it only applies to that address, and shouldn’t get confused with google search or anything else. Let me know if that was missing, and if it wasn’t then I need to do some looking into this.

No.24

Eric Hamburg said 777 days ago:

I am experiencing a significant problem in .9 and which I noticed in previous versions of the Theme with embedded, e.g, YouTube, videos. Instead of displaying and linking to the specific video that is in a feed’s post your GR Theme appears to somehow only pick up one video and display that same video it in all feed posts that have an embedded video.

No.25

Eric Hamburg said 777 days ago:

Should have mentioned in the post above (comment #24) that I am using Safari.

No.26

Jon Hicks said 777 days ago:

Eric – Can you try without the theme? There isn’t anything in the CSS that should interfere with video.

No.27

Becky said 777 days ago:

Hi Jon,

I use the .co.uk version of iGoogle (http://www.google.co.uk/ig?hl=en), with the Google Reader add-on so I can see the latest items in my reader on my homepage. Sometimes I go to Reader directly, but I occasionally click-through on the header of the add-on which, it seems, takes you to the co.uk version of Google Reader, rather than the .com version.

See:
http://www.google.co.uk/reader/view/
http://www.google.com/reader/view/

The two seem functionally identical, apart from the different URL. I wouldn’t have noticed if it wasn’t the fact that the style sometimes appeared to be applying and sometimes not.

Not a big issue, just a little annoying.

That section of the CSS was the one I edited to fix it… to look like this:

@-moz-document url-prefix(“http://www.google.com/reader/view/”), url-prefix(“https://www.google.com/reader/view/”), url-prefix(“http://www.google.co.uk/reader/view/”), url-prefix(“https://www.google.co.uk/reader/view/”) {

Which seemed to work. The Reader style was applied on both the .co.uk and .com versions. Hope this helps.

No.28

Tester said 776 days ago:

Test

No.29

m@zo said 771 days ago:

Love your theme, thank you very much! Do you plan something similar for Google Calendar? Would be great!

No.30

Roby said 771 days ago:

it looks bad ass and works pretty nice with my firefox, thanks man.

No.31

Switcherg said 768 days ago:

Hi,
I love the theme! Thanks!
But using it today, I am unable to view all my articles in sequence. The scroll bar on right side shows up and divides the viewed pane so that only about 5-8 article headings are visible at one time, in list view. Ditto in expanded view. To further explain my problem, Please see screenshot here – http://www.flickr.com/photos/48554039@N00/516640331/
Tech Details – Safari 2.0.4, SafariStand 3.3.1, Greader theme -0.9.
It was working ok earlier!
Bye,
G

No.32

Alexander Atallah said 768 days ago:

Jon, your style sheet would fit perfectly into a schmedley.com adaptation of Google Reader. I submitted your URL to their team, but what is you official status on making it open for reproduction? I would also like to publish an adaptation on my site with your permission.

No.33

Khairudin Lee said 767 days ago:

Hi Jon, firstly, thanks for creating this lovely theme for both greader and also bloglines. I’ve been away for some time and only just installed both. A request if I may, could you release the wooden theme for both greader and also bloglines? Your preview of the bloglines wooden theme looks super sweet. Would appreciate it, would love to replace the current blue one.