Hicks

Google Reader Theme update

Here’s an update to the Google Reader theme, mostly positioning bug fixes (see below for more information). Feel free to modify the CSS to suit your own tastes, but be aware that ‘highlighting the current selected entry better’ is still ‘on the way’. In some ways I find the Google method of a big rounded box outline a little too much, so I’m playing with some options… when I get time!

Also, I’ve been using CSS Edit 2.5 more for these changes – the recent update is even more suited to site skinning than before. Recommended.

Finally – a word on getting this theme onto userstyles.org, so that Stylish users can update easier: I have been trying to do this, but the theme currently clocks in at 76k, 12k over the userstyles limit! I need to look at optimising the code to get it work :(

Which does lead to a warning – this theme may well slow down your Google Reader experience.

Changes in this update:

  • Fixed: RSS icon positioning
  • Fixed: Toggle triangle position
  • Fixed: ‘Loading’ animation repetition glitch in Mozilla
  • Fixed: Green star is now Orange as it should be ;)
  • Fixed: odd placement of RSS icon on feeds not in tag folders
  • New: Replaced the small icons under each entry (Share, Email)
  • New: Proper ‘Home’ icon (well a nicked one anyway)
  • Combined Webkit and Mozilla versions to use same CSS
  • Implemented @-moz-document url-prefix to make the theme work when subscribing in Mozilla (thanks Tobu!)
  • Now supports https URL in Mozilla too.

Installation

Download gReader.zip. There are 2 versions, one for Mozilla browsers and one for WebKit & Opera.

Firefox

Once you have the Stylish extension installed, just copy and paste the css into the ‘create styles for this page’ window. If you don’t want to use Stylish, follow the Camino method below.

Camino

In Camino, either paste this into your /Library/Application Support/Camino/chrome/userContent.css file, or if that file doesn’t exist, rename the greader.css file to be userContent.css. The theme will be applied when you restart Camino.

Safari

Once Safaristand is installed, place the greader.css file in your user/Library/Safari/Stand/UserStyleSheets folder. Then visit Google Reader, go to SafariStand > Settings > Site Alteration. Add the site, enable Site Alteration and choose the greader file from the list. Make sure the matching pattern is just www.google.com. You may have to empty your cache, restart Safari and refresh before seeing any changes!

Omniweb

In Site Preferences > Page Appearance, choose the greader.css file under ‘Style Sheet’. The change should happen instantly!

Opera

Put the greader.css file anywhere you like! Right-click on the Google Reader page, choose "Edit Site Preferences" and select the CSS file through the display tab, under ‘My Style Sheet’. Like Omniweb, the change should apply immediately.

Have you found this theme enhances your life beyond all telling?

Please consider donating some spare change to the Hicksdesign Cheese Fund.