The Incidental Economist

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; }

Tweetable