Tweak Google Reader iPhone Edition in Your Firefox Sidebar
If you are a big fan of both Google Reader and Firefox, you'll be interested to know that Google's iPhone version of Reader is a perfect fit for the Firefox sidebar, and with a few tweaks we can make it really fit well.
We can customize it to remove the header, choose our start page, tone down the fonts and even remove the excerpts to give us a nice clean list like this one:
Add Google Reader iPhone Edition to the Firefox Sidebar
All you have to do is right-click anywhere on the bookmarks bar and choose New Bookmark, give it a name (or leave that blank) and put in the following URL:
http://www.google.com/reader/i/
Make sure you check the box for "Load this bookmark in the sidebar", and you are done.
Now when you click the bookmark, you'll see that it opens in the sidebar.
Change Bookmark to Open Specific Tag (or page)
The first problem is that the bookmark opens to the all items view by default, which is bad for those of us with a very large number of subscriptions. I prefer to open Reader with my "favorites" tag selected by default, so we'll have to adjust this.
Navigate in the sidebar to the tag that you want, and then right-click in an empty area of the page and choose "View Page Info"
Now you'll see the direct URL to that page, which you can copy to the clipboard…
And then either use in a new bookmark, or customize the existing bookmark that you created.
Now whenever you click on the bookmark, you'll see the page you'd prefer to see.
Remove the Ugly Blue Border
Note: For the rest of the tweaks you'll need to have the Stylish extension installed, or you can create a file named userContent.css in your Firefox theme directory and put the code there.
For whatever reason, the Google Reader logo has this annoying blue border around it, but we can remove that with a quick Stylish script.
Click on the Stylish icon, choose Write Style and then Blank Style.
Give the style a descriptive name, and then paste in the following text:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://www.google.com/reader/i) {
.logo img {border:0px !important;}
}
You can click the preview button to see the changes right away:
Remove Header Entirely
Instead of just changing the border, you can remove the entire header image section, since it's not really necessary. Adjust the stylish script to be the following instead:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://www.google.com/reader/i) {
.logo {display:none !important;}
}
Clicking the Preview button will show the new changes…
Adjust the Font Size
The iPhone site is optimized for a tiny touch screen display, so the font is just way too big for my tastes. We can add the following line to the stylish script to make the font slightly smaller:
* {font-size:0.97em !important; }
If you are following along, the full script should now be:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://www.google.com/reader/i) {
.logo {display:none !important;}
* {font-size:0.97em !important; }
}
Now we've got a much more compact view, easier to read:
Change List to Headlines Only
You'll notice that you can see the first few words of the post in the list view… personally I'd rather just show the headlines. Add the following to your script:
span.item-snippet {display:none !important;}
span.item-source-title{font-size:0.9em !important}
Now we've got a really useful sidebar application:
Full Script
Here's the final version of this script, with the logo bar removed, font size smaller, and no excerpts.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://www.google.com/reader/i) {
.logo {display:none !important;}
* {font-size:0.97em !important; }
span.item-snippet {display:none !important;}
span.item-source-title{font-size:0.9em !important}
}
This should illustrate why I'm such a big fan of Stylish.
Note: to make the content changes you do not need the stylish extension, you can just add the code in your blog to the userContent.css file in your firefox profile/chrome folder. At least that is what I did and it work beautifully, thanks!
For some reason this doesn't seem to be working for me, can't figure out why copied the code as is, tried in both stylish and in the UserContent file as Bill suggested, but none of the changes take affect on preview or even when I reload the page itself.
@Bill
You are exactly right… I don't know why I keep forgetting to include that! Thanks!
Just having fun with Stylish. Add hover and change the cursor.
.entry-row:hover { background-color: #99ccff !important; }
.entry-min-start:hover { border-color: #99ccff !important; cursor: pointer !important; }
@Jason
Now that is really sweet! I'll add that one to the article in a bit.
I would love to be able to swap the wasted star icon (I dont use it) for a mark as read icon. Omg that would be boss! Is it possible to make such a functionality swap?
Man, this is great, thanks a lot!
If anyone knows how, I am interested in two additions:
1) I there could be a way to remove the text on the bottom, or make it smaller, that would make the experience even more clean. We've already removed the logo!
2) Some sort of button for moving between items. Like the "Next item" and "Previous item" in the real google reader. I know this was designed for the touchable only iPhone, but there should be some way, no? (Keyboard shortcuts, maybe?)
Thanks again!
Works for gmail as well.
http://mail.google.com/mail/x/
Great tutorial! I use the speed dial extension so it's nice being able to free up another slot on my homepage for a website other than Google Reader. Thanks a lot man!
for those of us without Stylish, you can just adblock that ugly google reader logo:
http://www.google.com/reader/u.....iphone.gif
Hide the bottom text:
.footer { display:none; }
I'm guessing a GreaseMonkey script would be needed to add functionality (new buttons, replacing buttons, etc).
Is there anyways to run this script via GREASEMONKEY?
This is the best thing ever. And thank you for the introduction to stylish!
Nice tutorial, has become a welcome addition to my sidebar. Wasn't particularly happy with the way the item-count sat right on the edge of the sidebar though, so added the following code to Stylish:
span.item-count {padding-right:5px!important;}
Work's a treat
Is there any way to set the default to display more than 15 items?
Thanks!
This worked great! That Stylish plugin is pretty sweet!
I have compiled the suggestions made here, and added one of my own.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://www.google.com/reader/i) {
.logo {display:none !important;}
* {font-size:0.97em !important; }
span.item-snippet {display:none !important;}
span.item-source-title{font-size:0.9em !important}
.entry-row:hover { background-color: #99ccff !important; }
.entry-min-start:hover { border-color: #99ccff !important; cursor: pointer !important; }
.footer { display:none; }
span.item-count {padding-right:5px!important;}
.sub-row:hover,
#show-more-row:hover {border:2px solid #99ccff !important; cursor: pointer !important;}
.sub-row:hover {margin-bottom: -1px !important; margin-top: -2px !important; margin-right: -300px;}
#mark-these-read:hover,
.m-button:hover,
#show-new-items:hover,
#show-all-items:hover,
#mark-all-read:hover,
#show-all-subs:hover,
#show-new-subs
{cursor: pointer !important; }
}
@-moz-document url-prefix(http://mail.google.com/mail/x) {
.logo {display:none !important;}
* {font-size:0.97em !important; }
span.item-snippet {display:none !important;}
span.item-source-title{font-size:0.9em !important}
div.nav {display:none !important;}
.entry-row:hover { background-color: #99ccff !important; }
.entry-min-start:hover { border-color: #99ccff !important; cursor: pointer !important; }
}