How to Add Custom CSS to Google Reader in Chrome
Use 'Reader Plus' Extension to Easily Add Your Own CSS
Posted July 30, 2010 – 8:28 pmWhen I switched to Google Reader from Netvibes Wasabi, I created a custom skin using a Google Chrome extension called Reader Plus. The result was to make Reader look a bit like my old Wasabi layout which I found so much more readable.
Here’s the details:
Netvibes Wasabi – A Very Readable Layout
Here’s a screenshot of my old Netvibes Wasabi reader – one of the basic ‘official’ themes of the zillions they offer. This layout was just a dream to read. I loved the spacing, the use of favicons, the nice date headers in the item stream, and the colors, among other things.
In general, Netvibes comes with a lot, lot more configuration and, especially, theming options than does Google Reader. One feature that I especially liked with the “Give feed items more space” option – this incrementally opened up the spacing giving feed items just the right amount of breathing room.
Google Reader – Too Dense and Cluttered
Here’s a screenshot of the same feeds in the default Google Reader skin.
The main differences are too much white, item list and feeds sidebar are much too dense, and there’s a lot of unnecessary visual clutter (e.g., stars on every item). It’s hard to believe that the same company that designed a clutter-free search page and it’s highly efficient and readable search results format came up with this.
Apparently a lot of people like this density and visual style, but for me it makes my eyes glaze over.
Google Reader – With a Simplified New Skin
Once I found that I could do some fine tuning of the Reader skin using the Reader Plus extension, I focused on opening up the spacing in the sidebar and item feeds, removing unneeded stuff (stars, folder icons), and refining the fonts types, font sizes, and font colors. The changes to the sidebar are more dramatic than the ones to the item lists.
Here’s Google Reader after I’ve applied the custom CSS to make it look more Netvibes-like.
Obviously, Google Reader still looks mostly like Google Reader, even after applying 40-50 new bits of CSS. But still, the new bits change the layout just enough to make Reader a lot more readable – at least for me.
I’d like to (and probably will) do more with it as time goes by, but at least this gets me to a place where I can scan Reader every day without too much eye strain.
What’s Still Missing from Google Reader?
Even if I tweak the CSS for a while longer, there are some things i can never get to with Google Reader. They require real programming and/or maybe not even that will do it.
One key thing that can’t be changed via CSS is the lack of date headers in the item stream. I really like having date headers to separate out one day’s items from the next. Netvibes has beautiful fat date headers. My favorite iPod Touch RSS Reader, an app called ‘Reeder‘, also has very nice date headers that float along as you scroll thru the feed items.
The other thing I’d really like to have are favicons in the item streams in folder views. Netvibes does this nicely and I think it helps with readability. I’ve put in a request to the ‘Reader Plus’ developer to possibly add this. He’s got something close already, but it requires a bit of tweaking to show just the favicons only in the folder views.
Google Reader – CSS for Custom Skin
I’m not sure the image above does it justice, but if you are interested to give this layout a try yourself, please install the Reader Plus in your Chrome browser.
Then go to the options screen and choose ‘Themes/skins’ > ‘Relook’. In the textfield that opens up, please paste the following CSS (delete what is there):
/* This CSS tweaks default Google Reader skin to improve readability. Changes to left sidebar are the most significant. The main items list has also been changed with more padding/spacing, fewer icons, different fonts, and better coloration. Use 'Reader Plus' extension in Chrome to implement this CSS. */
.scroll-tree, .lhn-section {
font-size:12px;
line-height: 25px;
}
.folder-name-text {
font-size:13px;
line-height: 28px;
}
#entries.list .entry .collapsed {
height: 3ex;
line-height: 3ex;
}
#entries.list .collapsed .entry-main .entry-source-title {
font-size:90%;
width: 9em;
}
.entry-date {
font-size:90%;
}
#chrome-lhn-toggle, #viewer-header {
background:#d6d6d6;
}
.scroll-tree li a, #sub-tree-container, #sub-tree, .gecko {
background:#F2F2F2;
}
.folder-toggle + a.link {
background:#d6d6d6;
border-top: 2px solid #F2F2F2;
}
.lhn-section-primary, .lhn-subscriptions, #lhn-add-subscription-section, html {
background:#F2F2F2 !important;
}
html, #logo-container, #guser, h1.logo {
background:#F2F2F2 !important;
}
#entries.list .read .collapsed {
background:#F0F0F0!important;
}
#entries.list .expanded .collapsed {
background:#d6d6d6 !important;
}
#sub-tree-container {
border-top: 6px solid #C2CFF1;
}
.scroll-tree .icon, .entry .entry-icons .star {
background: none;
}
.scroll-tree .favicon {
top: 4px;
}
.scroll-tree .folder-name{
padding-left: 0px;
}
.scroll-tree .toggle{
top: 6px;
}
.section-button{
top: 7px;
}
.entry-source-title, #current-entry.expanded .entry-secondary-snippet {
display: none;
}
#entries.list .collapsed .entry-secondary .entry-title {
font-family: Georgia,serif;
font-size: 115%;
font-weight: normal;
}
#entries.list .collapsed .entry-main .entry-source-title,
#entries .read .collapsed .entry-title {
color: #898989;
}
#entries.list .collapsed .entry-main .entry-source-title {
left: 10px !important;
}
#entries.list .entry .entry-actions {
padding: 7px 0 7px 18px;
background: #E3E3E3;
}
.samedir #entries.list .collapsed .entry-secondary {
margin-left: 11em;
}
.samedir #entries.single-source .collapsed div.entry-secondary {
margin-left: 13px;
}
.samedir #entries.single-source .collapsed .entry-secondary {
margin-left: 10px !important;
}
#sub-tree ul ul li a {
padding-left: 32px;
}
One Comment
I appreciate that you have shared pondered information about adding CSS. Thanks so much for this one; be back for more info.