SEARCH

How-To Geek

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:

image 

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.

image

Now when you click the bookmark, you’ll see that it opens in the sidebar.

image

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”

image

Now you’ll see the direct URL to that page, which you can copy to the clipboard…

image

And then either use in a new bookmark, or customize the existing bookmark that you created.

image

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.

image

Click on the Stylish icon, choose Write Style and then Blank Style.

image

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;}
}

image

You can click the preview button to see the changes right away:

image

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…

image 

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:

image 

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:

image

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.

Lowell Heddings, better known online as the How-To Geek, spends all his free time bringing you fresh geekery on a daily basis. You can follow him on if you'd like.

  • Published 05/19/08

Comments (20)

  1. Bill

    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!

  2. BCK

    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.

  3. The Geek

    @Bill

    You are exactly right… I don’t know why I keep forgetting to include that! Thanks!

  4. Jason

    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; }

  5. The Geek

    @Jason

    Now that is really sweet! I’ll add that one to the article in a bit.

  6. Shawn

    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?

  7. CheesyJedi

    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!

  8. Lars

    Works for gmail as well.

    http://mail.google.com/mail/x/

  9. Kevin

    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!

  10. Drew

    for those of us without Stylish, you can just adblock that ugly google reader logo:
    http://www.google.com/reader/ui/527436693-logo-iphone.gif

  11. Jason

    Hide the bottom text:
    .footer { display:none; }

    I’m guessing a GreaseMonkey script would be needed to add functionality (new buttons, replacing buttons, etc).

  12. gunther

    Is there anyways to run this script via GREASEMONKEY?

  13. Alex Wayne

    This is the best thing ever. And thank you for the introduction to stylish!

  14. MrQwest

    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 :)

  15. sam

    Is there any way to set the default to display more than 15 items?

    Thanks!

  16. Webs

    This worked great! That Stylish plugin is pretty sweet!

  17. Ustice

    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; }
    }

  18. Chris Lang

    Scoble actually predicted a Google Reader social bookmarking engine in 2006.

    You can now add friends to your friends list, share feed items, bookmark single blog posts from blogs that you read on the web and hereís the kicker, there is now a blog recommendation engine that recommends blogs you do not read by what your friends list is subscribed to in their Google Readers.

    Then, everything you share and bookmark in Google Reader of course comes up on your Google shared items page linked to by your Google profile.

    What really blew me away was the recommendation engine. If you add as many of your email list subscribers as you can to your Google Reader you can get a real good idea of what other blogs your subscribers are reading.

    The links in your shared items are all HTML and fully followed so every time one of your RSS subscribers shares a blog post it is creating incoming links to your site.

    Better yet, it uses the exact blog post title you wrote so now your links use your keyword phrases and bookmarkers canít change your title tag.

    After talking to my SEO top dog contacts, they were all floored and assured me this is the new SEO tactic that no one knows about.

    http://www.keywebdata.com/?p=136

    It is kind of hard to add friends, the easiest way is to send a chat invite from Gmail and then email your contact you want to friend and have them email you back. It seems Google wants a two way conversation before they will allow you to become mutual friends.

    If you would like to friend me, add chrislang at gmail.com to your Google Gmail chat and send me an email letting me know so I can return an email to you, thereby creating a two way connection in Google.

    Google is quietly rolling this out behind the scenes but it is a full blown social bookmarking application and the blog recommendation engine is the new blog marketing strategy.

    One thing I have not quite figured out is if using FeedBurner now hurts you since the links point at the FeedBurner redirect rather than your site like a WordPress feed does.

  19. Mattias

    I had a issue that if you scroll down in the list of mails, it automatically jumps back to the top. It turns out that one line of javascripts needs to disabled to solve this. I made a GreaseMonkey script that removed “window.scrollTo(0,1)” from the following line:
    N.prototype.$=function(a,b){var c=a||window.orientation||0;this.bb=c;var d=this.j(this.h);if(c==0){d.style.width=”320px”;b&&_IframeEmbeddedExecution&&window.scrollTo(0,1)}else d.style.width=”480px”};

    The only downside is now that is works in the normal browser, but not in the sidebar. This is because GreaseMonkey does not support the Firefox Sidebar (http://groups.google.com/group/greasemonkey-users/browse_thread/thread/87351bce2c99d267). Anyone knows a trick to enable the sidebar with GM?

  20. Rich Owings

    Anyway to tweak it to auto-refresh?

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!