Here is a tutorial on how to fit Google’s iPhone version of Reader to your Firefox sidebar. With a few tweaks you can make it really fit well by removing the header, tone down the fonts, choosing the start page and remove the excerpts to give a nice clean list like this:
Add Google Reader iPhone Edition to the Firefox Sidebar
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/
Check the box for “Load this bookmark in the sidebar”.
When you click on the bookmark, you’ll now see that it opens in the sidebar.
Change Bookmark to Open Specific Tag (or page)
When opening the bookmark, all items are viewed by default. To open Reader with the “favorittes” tag instead, adjustments can be made like this:
Navigate in the sidebar to the tag you want. Right-click in an empty area of the page and choose “View Page Info”
Here you see the direct URL to that page, which you can then copy to the clipboard.
You can use a new bookmark, or customize the existing bookmark that you created.
Whenever you click on the bookmark now, you’ll see the page you’d prefer to see.
Remov 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 it can be removed 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 you’ve got a much more compact view which is easier to read:
Change List to Headlines Only
To show only the headlines, the following can be added to your script:
span.item-snippet {display:none !important;}
span.item-source-title{font-size:0.9em !important}
Now you’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}
}
Via howtogeek