Google Reader's bland new look is a huge step backwards. So bad that I've installed GreaseMonkey for the first time.
Clearly, I'm a GreaseMonkey script newbie, but based on this script which does most of the hard work I've reached something that makes the product usable again. (The base script reduced the whitespace, while my extensions add back colour.)
// ==UserScript==
// @name Fix New Google Reader Layout
// @namespace http://joda.org
// @description Combined fix for Google Reader
// @include http*://www.google.*/reader/*
// @version 2.1
// ==/UserScript==
// based on http://userscripts.org/scripts/show/116850
var overrideCSS = " \
#top-bar { height:45px !important; } \
#search { padding:8px 0 !important; } \
#viewer-header { height:45px !important; } \
#lhn-add-subscription-section { height:45px !important; } \
#lhn-add-subscription, #viewer-top-controls-container \
{ margin-top:-15px !important; } \
#entries { padding:0 !important; background-color: #e2e7f0 } \
#title-and-status-holder { padding:0.3ex 0 0 0.5em !important; } \
.collapsed { line-height:2.2ex !important; padding:2px 0 !important; } \
.entry-icons { top:0 !important } \
.entry-source-title { top:2px !important } \
.entry-secondary { top:2px !important } \
.entry-main .entry-original { top:4px !important } \
.section-minimize { left: 0px !important } \
#overview-selector, #lhn-selectors .selector, .folder .name.name-d-0, \
#sub-tree-header \
{ padding-left: 15px !important; } \
.folder .folder .folder-toggle { margin-left:13px !important } \
.folder .sub-icon, .folder .folder>a>.icon { margin-left:27px !important } \
.folder .folder>ul .icon { margin-left:34px !important } \
.folder .folder .name-text { max-width:160px; !important } \
#reading-list-selector .label { display:inline !important } \
#entries.list .entry { background-color: #e2e7f0 !important; } \
#entries.list .entry .collapsed { border-bottom:2px solid #e2e7f0; background-color: #c7d0e2 !important } \
#entries.list .entry.read { background-color: #e2e7f0 !important; } \
#entries.list .entry.read .collapsed { background-color: #e2e7f0 !important; } \
#entries.list .entry-container { border-left:2px solid #6a7893 !important; border-right:2px solid #6a7893 !important; border-bottom:2px solid #6a7893 !important } \
";
GM_addStyle(overrideCSS);
(Save as a file ending in ".user.js", then drag it into FireFox to load it. You may find Reader needs some refreshes before it is picked up. BTW, you only need this script - you don't need the base script.)
I suspect others will make a better script, but this satisfies me for now.
Update 2011-11-03: On my other computer, I'm trying Stylish instead. The following is my customization of this style and this style. This style is closer to the old reader than the GreaseMonkey one above. Stylish is also safer to use for general web surfers than GreaseMonkey.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document regexp("https?://www.google.com/reader/.*") {
#top-bar {
height: 40px !important;
}
#logo {
height: 27px !important;
margin: -13px 0 0 11px !important;
}
#search {
margin-left: 157px !important;
padding: 9px 0 !important;
}
#search-input {
border: 1px solid #B2B2B2 !important;
margin: 0 !important;
padding: 3px 2px !important;
width: 200px !important;
}
#viewer-container {
background: none repeat scroll 0 0 #EBEFF9 !important;
}
#viewer-top-controls-container {
margin-top: -12px !important;
}
.jfk-textinput {
height: 17px !important;
}
#viewer-header-container {
background: none repeat scroll 0 0 #C2CFF1 !important;
}
#viewer-header {
background: none repeat scroll 0 0 #C2CFF1 !important;
height: 30px !important;
}
.goog-button-base,.jfk-button,.goog-flat-menu-button {
font-size: 1em !important;
font-weight: normal !important;
}
.goog-menu-button .goog-button-base-content {
padding: 7px !important;
}
.goog-button-base,.jfk-button,.goog-inline-block,.goog-flat-menu-button {
cursor: pointer !important;
}
.goog-button-base-content {
padding: 3px 0.461em 0 !important;
position: relative !important;
text-align: center !important;
}
.goog-button-tight .goog-button-base-content {
line-height: 1em !important;
}
.goog-button-base-inner-box {
background: none repeat scroll 0 0 #F9F9F9 !important;
height: 20px !important;
}
.goog-button-base-outer-box {
border-bottom: 1px solid #AAAAAA !important;
border-top: 1px solid #BBBBBB !important;
}
.goog-button-base-inner-box {
background: none repeat scroll 0 0 #F9F9F9 !important;
border-left: 1px solid #BBBBBB !important;
border-right: 1px solid #AAAAAA !important;
margin: 0 -1px !important;
}
.goog-menu-button:active .goog-button-base-outer-box, .goog-menu-button:active .goog-button-base-inner-box, .goog-combobox-active .goog-button-base-outer-box, .goog-combobox-active .goog-button-base-inner-box, .goog-menu-button.goog-button-base-open .goog-button-base-outer-box, .goog-menu-button.goog-button-base-open .goog-button-base-inner-box {
background: none repeat scroll 0 0 #F9F9F9 !important;
border-color: #888888 !important;
}
.goog-button-base:hover .goog-button-base-outer-box, .goog-button-base:hover .goog-button-base-inner-box, .goog-button-base:focus .goog-button-base-outer-box, .goog-button-base:focus .goog-button-base-inner-box {
border-color: #888888 !important;
}
.jfk-button-standard.jfk-button-hover, .jfk-button-standard.jfk-button-clear-outline.jfk-button-hover {
border-color: #888888 !important;
}
.goog-flat-menu-button.goog-flat-menu-button-hover {
border-color: #888888 !important;
}
.goog-menu-button:active .goog-button-base-outer-box, .goog-menu-button:active .goog-button-base-inner-box, .goog-combobox-active .goog-button-base-outer-box, .goog-combobox-active .goog-button-base-inner-box, .goog-menu-button.goog-button-base-open .goog-button-base-outer-box, .goog-menu-button.goog-button-base-open .goog-button-base-inner-box {
background-color: #777777 !important;
border-color: #888888 !important;
}
.jfk-button-standard
{
border: 1px solid #AAAAAA !important;
background: none repeat scroll 0 0 #F9F9F9 !important;
}
.jfk-button {
height: 20px !important;
line-height: 20px !important;
}
.goog-flat-menu-button {
line-height: 20px !important;
border: 1px solid #AAAAAA !important;
}
.goog-flat-menu-button-dropdown {
top: 8px !important;
}
.goog-menu-button .goog-menu-button-dropdown {
top: 8px !important;
}
.goog-menu-button .goog-button-base-content {
padding: 4px !important;
}
#title-and-status-holder {
padding: 0.1ex 0 0.1ex 0.5em !important;
}
#entries {
padding: 0 !important;
border-top: 1px solid #C2CFF1 !important;
}
#entries.list .entry .collapsed {
background: none repeat scroll 0 0 #FFFFFF !important;
border: 2px solid #FFFFFF !important;
cursor: pointer !important;
margin: 0 !important;
overflow: hidden !important;
padding: 0 !important;
position: relative !important;
width: auto !important;
}
#entries.list .read .collapsed {
background: none repeat scroll 0 0 #F3F5FC !important;
border: 2px solid #F3F5FC !important;
}
#entries.list .collapsed .entry-icons {
top: 1px !important;
}
#entries.list .collapsed .entry-secondary,#entries.list .collapsed .entry-main .entry-source-title {
top: 1px !important;
}
#entries.list .collapsed .entry-main .entry-original {
top: 6px !important;
}
#current-entry .entry-container .entry-title a, #current-entry .entry-container a.entry-source-title, #current-entry .entry-container .entry-body a, #current-entry .entry-container a.entry-post-author-name {
color: #2244BB !important;
}
#entries.list #current-entry .collapsed {
border-color: #6688EE !important;
}
#entries.list .expanded .collapsed {
border-bottom-width: 0 !important;
}
#entries.list #current-entry.expanded {
border-color: #6688EE;
border-style: solid !important;
border-width: 0 2px !important;
}
#entries.list #current-entry.expanded .collapsed {
border-color: #6688EE -moz-use-text-color;
border-left: medium none !important;
border-right: medium none !important;
}
#entries.list #current-entry.expanded .entry-actions {
border-bottom-color: #6688EE !important;
}
#entries.list .entry .entry-actions {
background-color: #EBEFF9 !important;
border-top: 1px solid #C2CFF1 !important;
color: #333333 !important;
}
.entry .entry-actions a, .entry .entry-actions .link {
color: #2244BB !important;
}
/*This changes the folder icon. Play around with alpha settings to change opacity */
/*.folder-icon {
background-position: 0 0 !important;
background: url(https://ssl.gstatic.com/docs/doclist/images/collectionsprite_1.png) no-repeat !important;
}*/
.folder-icon, .tag-icon {
opacity: .1 !important;
filter: alpha(opacity=10) !important;
}
/* change colour of subscribe button */
.jfk-button-primary {
background: #f2f2f2 url(none) !important;
border: 1px solid #DCDCDC !important;
color: black !important;
}
}
To use this style, install Stylish, go to AddOns manager, and click 'Write a New Style', pasting in the code above.
I agree, the Google Reader new look is awful (too much space is lost above and below each line).
ReplyDeleteIt's a shame Google can offer these kind of modifications, aren't they using their own product ?
But... as i find Google Reader (and even GMail) quite slow on my (rather quite recent) computer, i'm always afraid of using things like GreaseMonkey which will add another layer of code executed on the main page, with a lot of slow .js (even on Chrome). So i'm still looking for another solution...
As this seems a CSS only "hack", Stylish would serve the same purpose with less overhead.
ReplyDeleteI can't get the colors to work. Everything is still white on the backgrounds.
ReplyDeleteFor those using Chrome instead of Firefox, the StyleBot extension lets you inject CSS in much the same way. That's how I cleaned up my Reader.
ReplyDeleteThe new theme really is bad. Gmail lets you choose a custom theme, so I haven't had to deal with the "new look", but Reader doesn't have themes.
@Stefan, as I'm not a GreaseMonkey regular, its entirely possible that there are better alternatives.
ReplyDelete@Anonymous, I added colours to the entry headers only. If you know CSS, it should be clear how GreaseMonkey works, so you can edit it yourself. Make sure to close your browser and refresh lots to pickup the script.
@Stephen I don't use GreaseMonkey at all. Stylish is a Firefox plugin that let's one override CSS e.g. for a specific domain or URL. As long as no JavaScript is necessary to acomplish changes on a site, it should perform better. It's also easier to define CSS without the need to wrap it into a String ;)
ReplyDelete(My earlier post was actually targeting "Anonymous" #1 looking for alternatives.)
I've tried Stylish on my other computer using http://userstyles.org/styles/55628/old-styled-google-reader and it seems to work, so that looks like another alternative.
ReplyDeleteWow. I like it.
ReplyDeleteThanks for the code.