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


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


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.


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.


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 You may have to empty your cache, restart Safari and refresh before seeing any changes!


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


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.