• How to fix Google Reader white space, line spacing, fonts, etc.

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

    Share
    Comments closed
     
    • 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.

    • 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!

    • 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.

      • 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!

    • 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…

      • 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!

    • whenever i close and reload reader, it isn’t consistently saving my choices and it reloads to the defaults…

    • 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.

    • 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

    • 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.

    • 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.

    • 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

    • Awesome tips guys.
      I think you just saved google reader for me.

    • 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

    • 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.)

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

    • 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.

    • 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!!

    • 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?

      • @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.

    • 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