The first thing that came to mind the first time I saw the new design in Google Reader was: “I need to find another feed reader!” – and of course, I was not the only one; people are even now complaining on Twitter, on forums and on the blogosphere about the wasted screen space and the slow loading caused by the +1 button. Unfortunately the dominance of Google Reader has driven other competitors from the market, so alternatives are scarce. The only concession I saw so far to all the complaints was bringing back the blue color for links, so I had to start using a custom style or extension to fix some of the problems with the new interface. There are already an impressive number of user styles for the new Reader, many of which are listed on the support forum or can be discovered with a simple web search. I tried some of them and liked none, so I decided to put together my own version, as described below.
Roses are red, violets are blue...and now title and body links are back to blue too!
— Google Reader (@googlereader) November 5, 2011
The main purpose was, of course, removing the huge padding from the headings and the left and right sides. Somewhere down the road I got slightly carried away, so I changed the colors a bit (for the active subscription and for headers), tweaked the expanded view to align the sharing bar at the bottom with the rest of the entry, added borders to separate the left subscription area from the reading area, removed the +1 button – who needs that now there is another ‘Share’-button? – and the black Google bar at the top and integrated the script ‘Google Reader for wider screens’. So the final version I am currently using looks like this:
/* Compact the top bar and add the same gray as in Search, Calendar */
#top-bar {
height: auto !important;
background-color: #F5F5F5; }
#search {
padding-bottom: 5px !important;
padding-top: 5px !important; }
/* Compact the second header with the Subscribe button, feed actions */
#lhn-add-subscription-section, #sections-header {
height: 35px !important; }
#lhn-add-subscription {
margin-left: 40px !important; }
#viewer-header {
height: 35px !important;
margin-right: 5px !important; }
/* Remove some of the padding from the Home page items */
#sections-holder {
padding-right: 7px !important; }
/* Compact navigation area */
#lhn-selectors .selector, #sub-tree-header {
padding-left: 20px !important; }
.section-minimize {
left: 5px !important; }
.folder-toggle {
margin-left: 17px !important;
margin-top: 2px !important; }
.folder .folder a .icon {
margin-left: 30px !important; }
.folder .folder .sub {
margin-left: 5px !important; }
/* Change selected subscription color to blue */
.scroll-tree li a.tree-link-selected .name, .scroll-tree li a.tree-link-selected:hover .name {
color: rgb(53, 122, 232) !important; }
.lhn-section-secondary li a.tree-link-selected {
border-left-color: rgb(53, 122, 232) !important;
background-color: rgba(53, 122, 232, 0.15) !important; }
/* Compact the reading area, emphasize title, add visual delimiter from subscriptions */
#title-and-status-holder {
margin-right: 0px !important;
border-left: 2px solid rgb(53, 122, 232) !important;
background-color: rgba(53, 122, 232, 0.15) !important; }
.lhn-hidden #viewer-top-controls {
margin-left: 7px !important; }
#entries {
padding-right: 0px !important;
padding-left: 0px !important;
height: auto !important;
border-left-width: 2px !important;
border-left-style: solid !important;
border-left-color: #EBEBEB !important; }
/* Compact expanded view, remove extra space to the right, add borders to items */
#entries .entry .card {
border-color: rgb(153, 153, 153) !important;
margin-right: 5px !important;
border-right-style: solid !important; }
#entries .entry .card .card-content {
padding-left: 1em !important;
padding-right: 1em !important; }
#entries #current-entry .card {
border-color: rgb(53, 122, 232) !important; }
/* Compact list view, remove extra space to the right */#entries .entry .collapsed {
padding-bottom: 3px !important;
padding-top: 2px !important; }#entries.list #current-entry .collapsed {
border-style: solid !important;
border-color: rgb(53, 122, 232) !important; }#entries.list .collapsed .entry-date {
margin-top: 3px !important; }
/* Reduce line height in menus */
.goog-menuheader, .goog-menuitem {
line-height: 14px !important; }
/* Fit expanded item text to the container, for wider screens */
#entries .entry .entry-body, #entries .entry .entry-title {
max-width: 97% !important; }
/* Removing not needed areas */
/* Recommended items */
#lhn-recommendations { display: none; }
/* 'Home' link - you can always click the Google Reader logo to return home */
#home-section { display: none; }
/* The top black Google bar - use with caution, causes problems in Opera & Chrome with Search, Calendar */
#gb { display: none; }
/* Hide the +1 button from feed items */
.item-plusone { display: none !important; }
/* Hide the throbber on the bottom right */
#activity-indicator { display: none !important; }
A few notes on how to use the style in some of the major browsers, without using an extension:
- As many users probably already know, Firefox supports custom user styles out of the box; you just need to add them to the userContent.css file in your profile directory. But even better, Mozilla also has support for CSS3 document queries through the Gecko-specific @-moz-document rule. This means that you can specifically target CSS styles to URLs or domains, minimizing the risk that a custom style for one site will cause problems on another one. In this case, wrap the style above in the following lines of codes before adding it to userContent.css. If you use Google Reader on a country-specific domain, you can add more lines for those domains and the style will be applied there too.
@-moz-document url-prefix(http://www.google.com/reader/),
url-prefix(https://www.google.com/reader/) { [insert the CSS style above here, between the curly brackets] } - In Chrome you can also apply custom styles to web pages, as I mentioned in a previous article. The down-side is, unfortunately, that Chrome doesn’t have a native way to restrict the CSS style to a single page or domain like Firefox. If you apply the style sheet above globally it can cause problems on other Google sites, especially Search and Calendar. If you prefer not to install any extension for this tip, you can simply remove the line that hides the Google top bar (#gb { display: none; }), this seems to be the cause for most issues. Otherwise, you can use an extension like Stylish or the new Minimalist, which can apply styles on a site-basis.
- Opera has built-in tools to customize the CSS of sites as well; contrary to other browsers they are also integrated in the application interface, making them slightly easier to use. From my experience, you can apply styles to top-level domains, not to subdomains, which leads to the same conflict with other Google services mentioned for Chrome.
- Google Reader in the original design
- Google Reader after applying the user style
Of course, this style sheet doesn’t solve all the problems of the new design; it just comes very close. I haven’t been able to figure out how to remove the annoying white space, a couple of pixels tall, on the bottom margin of the window. And the WebKit-specific scrollbars in Chrome should go as well, so please leave a comment if you know how to do that, I would be very grateful.
As for the sharing, I’m afraid there is no magic formula to bring it back. Aside from the ‘Send-to’ feature, ifttt provides some much-needed automation, allowing you to share to Facebook, Twitter and many other services just by tagging items in Google Reader with your user-defined tags. It’s especially useful if you want to quickly send a link without logging in to that particular service first.
We added a new Google Reader trigger! "New item tagged": ifttt.com/channels/googl…
— ifttt (@ifttt) November 4, 2011
Update: Soon after publishing this, Google introduced display density settings for Reader, so I adjusted the code to take them into account; the strikethrough lines above are no longer required.
Another update: Another week later, another set of tweaks to the functionality and design of Reader. Of course, the user style above needed come changes as well. At least they are moving in the right direction...
Post a Comment