My OperaMy compact style for Google Reader
Saturday, December 3, 2011 9:49:18 PM
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.
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: view style on my blog.
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.
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...
