Dustin Luck is my new hacker hero. His “Google Reader Absolutely Customizable” script for Firefox (works on Chrome too) allows you to zap out a lot of annoying, wasted white space in the new Google Reader layout.
Once installed, click on “customize” in the drop down menu next to “subscriptions” in your Reader’s left-hand sidebar. Fiddle around until you’re happy. Don’t be put off it things look funny at first, keep checking and unchecking boxes and adding side-bar width (right-side navigation pane width) until all is well. Or uninstall if you hate it.
But it gets better. There’s a “Custom CSS” box, which, I will admit, means next to nothing to me. Sure, I knew it meant you could add more commands in there to tweak other stuff, but I had (and have) no idea how to use it. (I missed a few days at geek school.)
I asked Dustin on Twitter how to increase Reader’s line spacing, which I think is too tight. He wrote to add the following to the Custom CSS box:
.item-body, .item-body * {line-height:1.55 !important}
Actually, he suggested 1.25, but that wasn’t enough for me and I fiddled until settling on 1.55. I also received some excellent suggestions for other items to add to the CSS box from Jonathan Danylko in the comments. The first line below creates a right-hand margin (change the 9 to another number if you don’t like the width). The second line below changes the black hyperlinks to blue. (I’m sorry, black hyperlinks are stupid because they are indistinguishable from underlined text. It’s as if nobody at Google gave the new Reader’s basic styles any thought at all.)
#chrome { margin-right: 9em }
#chrome a:link { color: #00F !important }
Another commenter, Ian D-B, suggest adding the following to get a bounding box around the RSS entries. I really like this one:
#entries { outline:#000000 solid thin; !important }
However, for some reason it has stopped working. But this is similar:
#chrome { border-left: 1px solid lightgray; }
#chrome { border-right: 1px solid lightgray; }
With all those customizations, I’m much happier with Google Reader now. I still prefer the old look and feel, but I can live with the new one with these tweaks.
Note also, you can increase the font size and change font type in your browser if that’s what’s bothering you. In Chrome, look in the “Under the hood” section of Options (under the wrench icon, upper right of browser).
Finally, if you don’t want to fiddle with Google Reader Absolutely Customizable, you can also try Style Improvements for Google Reader, recommended by Erik Kain. I tried it and it’s pretty good, but it doesn’t permit changing of line spacing so I prefer Absolutely Customizable. Another reader suggests Stylebot, which I have not tried. It seems a bit complex to me, but it could be great.
A final note: similar style changes are coming to Gmail. I’ve looked at them and they are, to be blunt, horrifying. Oddly, Gmail provides options for different themes. Why can’t they make a theme that renders Gmail in its current form? Beats me. Expect a lot of groaning when they force the changes down Americans’ throats. (Yeah, I went there.)
Happy reading!
UPDATE: I’ve incorporated items from the comments since original posting. The comments are great, by the way. If you’re interested enough in this to have read this far, you should take a look.
FURTHER UPDATE: From now on I’ll put additional tweaks down here:
- Decrease the font size of the subscriptions, left side entries within tree
/* change number values as desired */
.lhn-section,
.lhn-section-footer,
.scroll-tree {
font-size: 10px !important;
line-height: normal !important; }
.scroll-tree li.folder .link,
.scroll-tree li.sub {
height: auto !important; }
#lhn-selectors .selector-icon,
.scroll-tree .icon {
width: 10px !important; /* this line only needed if feed icons are visible */
height: 10px !important; }
by Jonathan on November 2nd, 2011 at 06:29
Hey Austin are you having problems with speed also. In terms of how quickly you are able to refresh reader? It appears to be extremely slow for me. I’m wondering if others are getting this as well.
by Austin Frakt on November 2nd, 2011 at 08:15
No speed problems for me. This surprises me because I usually suffer all the upgrade side effects.
by Uncle Big Steve on November 2nd, 2011 at 07:03
I just tried it with Chrome and I couldn’t load reader at all in a new tab. I disabled it and it loaded right away.
I should add that I just updated Java Console yesterday and Chrome doesn’t seem to like that. I don’t know if that has anything to do with it.
I’m keeping this unread so I can keep trying. Thanks!
by Austin Frakt on November 2nd, 2011 at 08:16
Thanks for the feedback. I haven’t done anything with Java Console. I’m happily using the advice in this post on two different PCs.
by Dan on November 2nd, 2011 at 11:01
This is indeed a great script, with one major drawback for me. I use Google Reader in list view rather than expanded view, so my unread items are compressed into headline-only format, a similar look to an email inbox. (There are buttons to toggle between expanded and list view in the upper right side of Google Reader, just left of the previous/next item buttons.)
In list view when I click on an unread item to preview it, the headline disappears. Which means I have to click in the upper right corner of the item to open it in another tab. I realize it’s just a quick move of the mouse but losing that headline is huge.
by Austin Frakt on November 2nd, 2011 at 11:26
I also prefer and use list view. But I don’t have the problem you are having. I wonder if the difference is that I have “Super Full Feeds for Google Reader” installed. It makes use of the title band (or whatever it is called) and maybe forces it to stay in view when an item is opened. Give it a try and see if that fixes your problem. As a bonus, you get the great functionality of this extension. It’s quite handy!
by Brett Keller on November 2nd, 2011 at 11:01
This is very, very helpful on the aesthetic front — it fixes everything that was bothering me. Thanks for sharing. Now if only they’d bring back sharing…
by Austin Frakt on November 2nd, 2011 at 11:27
Can I encourage you to start a petition for better Gmail themes, as you did for Reader? They need to add some contrast and boundaries to areas of the page. The vast whiteness is not easy on the eyes. I will sign the petition!
by Chelsea on November 2nd, 2011 at 11:11
whenever i close and reload reader, it isn’t consistently saving my choices and it reloads to the defaults…
by Austin Frakt on November 2nd, 2011 at 11:27
Tweet the creator: @DustinLuck .
by DustinLuck on November 2nd, 2011 at 12:07
There is a discussion thread on the userscripts.org site with a collection of useful custom CSS tweaks. You may find something you like there.
by Austin Frakt on November 2nd, 2011 at 14:03
Thanks!
by Jonathan Danylko on November 2nd, 2011 at 13:47
When I look over my subscriptions, I like to see some of the numbers on my categories…and since I have a large monitor, I figured…why not?
I added this in my CSS window to make the subscription list a little bit wider.
#nav { width: 200px !important }
#nav, #nav * { max-width: 200px !important }
#chrome { margin-left: 200px !important }
Of course, you can change the 200px to fit your preference size as well.
Hope this helps some people out as well.
JD
by Austin Frakt on November 2nd, 2011 at 14:03
Isn’t that what the “Resize side navigation (in pixels)” box does?
by Jonathan Danylko on November 2nd, 2011 at 14:14
Ahem…ummm..well…yes.
I was staring at the stupid thing. :- Sheesh
by Austin Frakt on November 2nd, 2011 at 14:20
But maybe you can answer my other question. I would actually like to insert some white space on the right-hand side. I don’t want the test to run so close to the side of the frame. Any idea how?
by Jonathan Danylko on November 2nd, 2011 at 14:32
I just tested this and it works.
Use the #chrome ID tag and set your margin-right to something…like this:
#chrome { margin-right: 10em }
by Austin Frakt on November 2nd, 2011 at 14:50
Will try. By the way, here’s another extension that makes many fixes: https://chrome.google.com/webstore/detail/jdjfpdedhdobbicjnmefogklhoighnne . It is less customizable though.
by Austin Frakt on November 2nd, 2011 at 14:52
Nice! One more thing would make it perfect: change the hyperlinks from black to blue.
by Jonathan Danylko on November 2nd, 2011 at 16:46
Tested this and it works as well.
#chrome a:link { color: #00F !important }
by Austin Frakt on November 2nd, 2011 at 19:45
Thanks. Updating the post with all your great tips.
by Austin Frakt on November 3rd, 2011 at 06:40
Actually, for some reason this changes some hyperlinks I see to blue, but others remain black. Any idea why or how to fix?
UPDATE: This seems to vary by computer. One one computer, I’m getting all blue hyperlinks. On another, I’m still seeing some black ones, though not many. Very odd, right?
by Jeff on November 3rd, 2011 at 09:42
If the #00F links are too bright, try #00A, which I find much more aesthetically pleasing. Or any letter in between.
by Sid Winford on November 2nd, 2011 at 16:53
I used Stylebot. It is pretty intuitive.
https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha
I set the width to about 700px and changed the font. It looks fantastic to me.
by Ian D-B on November 2nd, 2011 at 20:05
I used this to get an outline around the entries: #entries { outline:#000000 solid thin; !important }
The chrome inspect element choice when you right-click is useful for this.
by Austin Frakt on November 2nd, 2011 at 21:41
More awesomeness. Adding it to the post.
by Praj on November 2nd, 2011 at 23:26
You can change the color of visited links with this bit of CSS:
#chrome a:visited {color: #FF00FF !important }
I wanted visited links to be purple. Here are other colors:
http://www.w3schools.com/cssref/css_colors.asp
by Rohan Smith on November 3rd, 2011 at 00:09
Awesome tips guys.
I think you just saved google reader for me.
by Michael Freeman on November 3rd, 2011 at 09:35
Give my latest script a try as well. It does not have toggles, but it makes the best of the space available and makes a more readable
http://spanishgringo.blogspot.com/2011/11/fixing-bad-google-reader-redesign-with.html
by jeffk on November 3rd, 2011 at 10:33
Thanks for sharing this, and thanks to everybody for providing tweaks. Now that I’ve got the entry border, how can I increase the padding for entries? (I’ve tried puzzling it out, but my lack of CSS knowledge is kind of a limiting factor.)
by jeffk on November 3rd, 2011 at 10:37
[Austin, you can ignore the previous post!]
I like increased padding for entries, in addition to the outline:
#entries .entry-body,
.entry .entry-title {
padding: 10px !important; }
by Austin Frakt on November 3rd, 2011 at 11:48
This begins to sneak up on what I really want. I’d like to increase the padding on the right, but not on the left (or not as much). What would do that?
by William F. on November 3rd, 2011 at 12:03
Has anyone done anything to tweak the subjects of the posts? Those could definitely use an upgrade to either color, bold, larger font or some combination, but this is definitely beyond my meager skills.
by HW on November 3rd, 2011 at 13:37
1. THANK YOU!! The changes to Reader were driving me nuts.
2. When I uncheck the setting that hides the “All” link on the left (because I love it/use it), that link shows, but only the top half of the letters/numbers, making it very hard to read. Any ideas on how to fix that, without screwing up anything else??
Again, thanks so much!!
by Laura on November 3rd, 2011 at 14:20
hey guys, another question: I noticed that installing this extension removes the ability to click the titel of a post and have that take you back to the post’s original source–i.e. it appears to remove the link. Any way to fix that?
by bgreco on November 3rd, 2011 at 21:31
@Laura: Uncheck “Chevron links” in the options. The title itself won’t take you to the source, but the little link on the right will reappear.
by me on May 31st, 2012 at 02:11
I’m having trouble with the fonts in the new Chrome, they are too light, in fact, I can hardly read what I am typing here, so excuse me if there are typose…lol. Is there a fix for this? I tried to fix the color, which is gray, too light to read & when i go to a different page, it’s back to the light gray, HELP!
Thanks