You're looking at all articles on The Hickensian tagged 'google'

Adam Taylor has released Helvetical, a work-in-progress userstyle for Google Calendar, based on my Helvetireader theme:

I know I am not alone in my love/hate relationship for Google’s apps, the functionality is brilliant but the UI is ugly. Google Calendar is most definitely not the exception to the rule, it hurts my eyes. Helvetical extends the work done by Jon Hicks on Helvetireader, turning the mayhem of the Google interface into something that doesn’t offend. It was created for use with Fluid.app but I’m sure you can hack the CSS to work for your needs.

At one point, I had in mind that I would create a minimal Helvetica theme that would work across various google apps. Then I took one look under the hood of GMail and new it would never work.

I’ve been getting a lot of questions about the Google Reader theme, and when/if I’m going to update it, so here’s an update on the update.

The ‘OS X’ style google reader isn’t going to updated. It’s a pain in the arse quite franky, and rather than being able to finish it off, I’m just spending my time cleaning up the mess after a new feature has been launched by Google. The code is all there if someone wants to take over the theme and carry on working on it, but I’m afraid that won’t be me!

Instead, I’ve been working on something I’m calling ‘Helvetireader’, a stripped back, cleaner style, inspired by the lovely interface for Times.app RSS Reader. No rounded boxes, shadows or superfluous buttons. As there is less forced positioning going on, it should break less when new features launch. That’s the plan anyway.

As it removes a lot of stuff that people might use, and only keeps the bits I use, it might not be that useful to some people. Once I feel it’s ready, I’ll release it!

Updating the gReader theme to work with the new Friends Shared Items feature introduced last year, has been, quite frankly, a royal pain the arse. I almost gave up on the theme a few times along the way, but I’m chuffed to be able to say, here’s the updated theme! I don’t doubt that this has introduced new bugs, but let me off the hook for now eh?

Changes for 1.4

• Supports the friends shared items feature – the sidebar reflows when the shared items is toggled on/off
• Removed a fair few lines of redundant code
• New icons! Updated trends, and wee ‘friends’ icons.
• Leopard-ized sidebar, with new, smaller folder icons, and generally a bit tightened up. The Leopard style makes the most sense with the Friends and Show lists
• Page view tabs (‘Expanded view’ & ‘List view’) are now more osx-y.
• Various other bug fixes, like ‘Refresh’ on the status bar being clickable again. Thanks must go to Daniel Haas, Matt Wiebe, Martin Ström, Tomasz ?wik and ChoGGi for all submitting patches! It’s people like you that make me keep on updating this theme.

Download gReader.zip | Update on userstyles.org | How to Install

This is just a small update to the theme to fix the oddness that’s cropped up recently in the top of the sidebar.

Download gReader.zip | Update on userstyles.org | How to Install

A lot of wierdness since Google Reader went 1.0, and fixing it has given me some headaches. However, its cleaned up again!

1.3 “Straight outta beta” release

• fixed gaps and shifts caused by recent changes by Google
• Theme should no longer affect other Google pages in Safari and Omniweb (let me know if it does)

Download gReader.zip | Update on userstyles.org | How to Install

Many thanks to Alexander Atallah for pointing out how to get the gReader theme working in Safari 3 again.

Forget SafariStand, and go get yourself CreamMonkey, the Greasemonkey style plugin for Safari. Once installed, you will see a smiley in your menubar, then when you visit these 2 pages on userstyles:

OS X Style Google Reader

OS X Spinner for Google Reader

You will see a ‘Load as User Script’ button. Click this, and then ‘install’ when the sheet appears. You’ll then just need to refresh gReader.

It not only works in Safari 3, but it also only applies it to that URL, just like in Mozilla! So you shouldn’t be getting the style affecting other Google pages.

Download gReader.zip | Update on userstyles.org | How to Install

The “Yes, yes, yes, I know they added a search bar” release

Here we go then, pretty much all cleaned up and ready to use! Apart from the tidying up, having the search bar meant there was space to show the account bar (which was previously hidden until you hovered over it). Also, the splitter icon in the status bar bottom right now actually toggles the sidebar when you click it!

The info.rtf file also lists known bugs, and areas that I intend to work on in the future. Stylish users, you will need to update both the main style and the spinner.

Changes for 1.2

• Fixed messiness caused by the new search bar, such as the sidebar width
• Status Bar in the right hand pane now collapses properly to the left when the sidebar is hidden
• The new sidebar toggle has been replaced by the OS X style splitter bottom left (so now it actually does something!)
• Loading notification re-instated
• Search inputs and button restyled (looks best in webkit browsers)
• The Account bar is now visible – no longer hidden until hover

Download gReader.zip | Update on userstyles.org | How to Install

Yes I know they added a search bar, and the that the header is real mess right now. I use it too remember?! So you can all stop emailing me about it, and when I get a chance I will see if I can update it!

K? ;o)

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

Firefox & Flock

Once you have the Stylish extension installed, you can do install the following 2 themes into Stylish:

OS X Style Google Reader

OS X Spinner for Google Reader

As userstyles.org restricts the file sizes of themes, the gReader css needed to be split over 2 themes. Once installed, you can update the theme in Stylish by going to Manage Styles > Find Updates.

If you normally view google through a domain other than .com (e.g google.it/…), you will need to change the @-moz-document source code at the top.

Camino

Add the following @import rule into the top line of your /Library/Application Support/Camino/chrome/userContent.css file, (or create it if it doesn’t exist).

@import url(greader.css);

Place the greader.css file in the same chrome folder. The theme will be applied when you restart Camino.

Safari

The best method on Tiger is to install CreamMonkey, the Greasemonkey style plugin for Safari. Once installed, you will see a smiley in your menubar, then when you visit these 2 pages on userstyles:

OS X Style Google Reader

OS X Spinner for Google Reader

You will see a ‘Load as User Script’ button. Click this, and then ‘install’ when the sheet appears. You’ll then just need to refresh gReader.

If you’re on Leopard, you’re better off using Safaristand and Pith Helmet to apply the custom css.

Be aware that SafariBlock may cause issues with the loading of the css – try disabling SafariBlock if you experience problems.

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.

Because of some updated in Google Reader over the last few weeks, the theme has started to deteriorate a bit. Therefore I present:

v1.1 The “Oh crap, Google keep changing their markup!’ release

• Added Trends Icon
• Added padding and header bars to the Home and Trends screens so that they don’t look quite so bad
• Fixed display problems on highlighted feed border, feed folders, subscription icons and other bits
• Update – missing ‘mark all as read’ is back, please re-download.

The next release will probably be called the “Bloody hell, I’m fed up of all those nested tables” release…

Download gReader.zip | Update on userstyles.org | How to Install

(Last Google Reader theme post, I promise)

Before now, I’ve felt quite protective of my site skins, and have always stated “Feel free to modify the CSS to suit your own tastes, but please don’t redistribute”. This stems from vanity to be truthful – I spend a long time creating these themes, and don’t want other people getting the credit!

That was how I used to think though. As time goes on, I feel like I’m becoming more communist open when it comes to the web. Besides, I have little time to update the themes, and carry out feature/bug requests, and they’re both at a point where I’m happy with them. Sure, there’s so much you could do to them, but the original intention was to create something for myself. Which is where you come in.

These themes are now both “do what you like with them”. Take out the bits you don’t like, put in new bits, whatever. Feel free to re-distribute them anywhere you like, whether slightly tweaked or massively altered. They’re yours to do with as you please! Give them a good home and let me know what do with them (hopefully something better!)

downloads

Google Reader Theme
Bloglines Theme for Webkit & Opera
Bloglines Theme for Mozilla

Finally, to answer a much-asked question I don’t have plans to do a GMail or GCal skin, but you never know.

Almost there!

v0.9 ‘The Newbury’

• New: All sidebar selections are styled the same
• New: Current entry is highlighted, in a similar style to the default theme, but lighter and more minimal.
• Fixed: Last rounded corner box bit still poking in from last version
• Fixed: Colour for read feeds looks better
• Fixed: Feeds not in tag folders aren’t indented the same as those that are. (added 13/5)
• Fixed: titles showing up under unread counts (added 13/5)

Installation

Download gReader.zip, or if you use Stylish with Firefox/Flock, you install directly into Stylish from userstyles.org. There are 2 versions, one for Mozilla browsers and one for WebKit & Opera.

Firefox & Flock

Once you have the Stylish extension installed, you need to install 2 styles. OS X Google Reader and OS X Spinner (they had to be split to avoid the 64k file limit on userstyles). You should be able to update via Stylish > Manage Styles > Find Updates.

If you don’t want to use Stylish, follow the Camino method below.

Camino

Add the following @import rule into the top line of your /Library/Application Support/Camino/chrome/userContent.css file, (or create it if it doesn’t exist).

@import url(greader.css);

Place the greader.css file in the same chrome folder. 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.

OK, gReader theme fixed (I think). Google made some markup changes, for instance, Tag folders and Subscription icons once had classes of ‘icon’ and ‘icon-sub’ respectively, but now are both just ‘icon’. Fortunately there are still hooks in the markup to hack into.

v 0.86 ‘The Windermere’

• Fixes for changes in Google Readers markup :(
• Now available as a One click install into Stylish at Userstyles.org *
• Versions are now named after types of new house builds in the UK.

*In order to do this, I’ve had to remove the big-assed loading graphic from the CSS in order to get in under userstyles file limit. I’ll look at ways of getting that back in later.

Further work on the display of entries still to come…

Installation

Download gReader.zip., or if you use Stylish with Firefox/Flock, install at Userstyles.org. There are 2 versions, one for Mozilla browsers and one for WebKit & Opera.

Firefox & Flock

Once you have the Stylish extension installed, you can do a One click install into Stylish at Userstyles.org. If you don’t want to use Stylish, follow the Camino method below.

Camino

Add the following @import rule into the top line of your /Library/Application Support/Camino/chrome/userContent.css file, (or create it if it doesn’t exist).

@import url(greader.css);

Place the greader.css file in the same chrome folder. 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.

It seems that Google changed some gReader markup last night! There was me, thinking that I could now concentrate on getting the entries display up to scratch, and now the feed folders and others have shifted. It’s to be expected though, and this is part of the problem of a skinning a site.

I’ll try and fix these few bits too soon as work allows.

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.

I’ve been using Flickr as a bit of testbed for a new site theme I’ve been working on for Google Reader. C’mon after the Bloglines thing, I bet you saw it coming didn’t you?!

Same drill again then. There may well be oddness and inconsistencies, and Google may well make radical changes to the Reader’s markup tomorrow, mucking the whole show up. But for what it’s worth, here it is! Its not trying to be original or ‘better’ than the default theme, it’s just trying to make it look like a Mac OS X app – that’s all I want!

Actually, while this may create bugs, it actually solves a bug that I was seeing in WebKit browsers with the default css. When scrolling, some sidebar elements would annoyingly bounce up and down. Not any more!

The download includes a list of known bugs/todos. If you seen anything not on this list, please leave a comment! I’ll update this page when I upload newer versions of the theme.

Changes

17/4/07 – Fixed 2 bugs that were annoying most people: I’ve reinstated feed list highlighting and pressing U now shows the entries list full width

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.

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: