Andrew's Blog

I, like a lot of people, use Google Reader to get updates from the RSS-based blogs I follow. I imagine that a number of these people were also frustrated by the new design Google began using for Google Reader over the last few days. If you are one of those people, I have a possible fix for you.

The biggest problem with the new Google Reader is the increased negative space surrounding RSS headlines and around other design elements on the site. Here is a screen capture of the new layout:

In order to fix this, I have written a Greasemonkey script that allows Firefox users to fix this problem. With the script loaded, Google Reader looks like this:

The script loads a custom CSS stylesheet that restores some of the older and narrower spacing of the previous Google Reader design. This allows for easier browsing due to the increased number of stories displayed on a given page.

You can install my script by clicking here, assuming you have Greasemonkey installed.

I based this script off of Jonas John's Greasemonkey template. Essentially, all the script does is load a custom CSS stylesheet to correct some margins and paddings. Here's the source code, if you want to see it:

// ==UserScript==
// @name            Google Reader CSS Fix
// @author          Andrew Pilsch
// @namespace       http://andrew.pilsch.com
// @description     Fix all the whitespace issues in the new Google Reader
// @license         Creative Commons Attribution License
// @version         0.1
// @include         http://*.google.com/reader
// @include         http://*.google.com/reader/*
// @include         http://google.com/reader
// @include         http://google.com/reader/*
// @include         https://*.google.com/reader
// @include         https://*.google.com/reader/*
// @include         https://google.com/reader
// @include         https://google.com/reader/*
// @released        2011-11-02
// @compatible      Greasemonkey
// ==/UserScript==

/* 
 * This file is a Greasemonkey user script. To install it, you need 
 * the Firefox plugin "Greasemonkey" (URL: http://greasemonkey.mozdev.org/)
 * After you installed the extension, restart Firefox and revisit 
 * this script. Now you will see a new menu item "Install User Script"
 * in your tools menu.
 * 
 * To uninstall this script, go to your "Tools" menu and select 
 * "Manage User Scripts", then select this script from the list
 * and click uninstall :-)
 *
 * Creative Commons Attribution License (--> or Public Domain)
 * http://creativecommons.org/licenses/by/2.5/
*/

(function(){

    //object constructor
    function example(){

        // modify the stylesheet
        this.append_stylesheet('#entries.list .entry .collapsed { margin: -5px 0 -8px !important; padding: 6px !important;}.selectors-footer { margin-bottom: 0px !important; padding-bottom: 7px !important;}#home-section {    padding: 5px 0 !important;}#reading-list-selector { margin-bottom: -17px !important;}#viewer-header { height: 50px !important;}#lhn-add-subscription-section { height: 50px !important;}#top-bar { height: 45px !important;}#search { padding: 9px 0 !important;}');

    };

    //create a stylesheet
    example.prototype.append_stylesheet = function(css){

        var styletag = document.createElement("style");
        styletag.setAttribute('type', 'text/css');
        styletag.setAttribute('media', 'screen');
        styletag.appendChild(document.createTextNode(css));

        document.getElementsByTagName('head')[0].appendChild(styletag);

    };

    //instantiate and run 
    var example = new example();


})();

// you can completely copy this template, including
// the install description, have fun! :-)

Enjoy!