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

gReader 1.4 - 'The my goodness I almost gave up on this one' release

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?

Google Reader theme - new sidebar

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

gReader theme in Safari 3

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

gReader 1.2: The "Yes, yes, yes, I know they added a search bar" release

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!

New search bar in the google reader theme

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

How to install the gReader theme

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.

Google Reader Theme 1.1

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

Google Reader Theme 0.9

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.

Google Reader Theme Fixed Again

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’

*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.

Google Reader broken already

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.

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.

Google Reader Theme

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:

Archives by tag:

2006, 2007, 2012, 2013, accessibility, acoustic, actionscript, adobe, advert, adverts, advice, air, alternative, ambient, analog, apple, applecare, appletv, apps, appstore, art, articles, atmedia, attap, audio, australia, authenticjobs, awards, ban, basecamp, bbc, beatles, belkin, bikes, bikeshops, bitmap, blackhole, blog, blogs, bluetooth, boardman, bonecho, books, boxee, boxeebox, boxmodel, braindump, breakfastbaps, britain, british, browser, browsers, browsers.mozilla, bug, bugs, cairo, cakes, calendar, camera, camino, casestudies, cbbc, cc, chap, chaps, charity, cheerup, cheese, childreninneed, christmas, cinelli, classics, cms, cocoalicious, coda, code, collections, colnago, colour, colourblind, colourblindness, comedy, comments, competition, comps, conferences, copywriting, cotswolds, country, covers, craft, crafts, creativity, cs5, css, css.webstandards, cycling, danielsmonsters, delicious, dell, design, design.colourblindness, desktops, development, digital, discovery, discussion, diy, dock, doctorwho, dogs, drawing, dream, dreams, dropbox, drwho, education, electronica, email, emoticons, endofyear, england, events, evernote, expressionengine, eyetv, family, favicons, feedback, femalevocal, figures, film, films, firefox, fireworks, firstworldproblems, flash, flexible, flickr, flock, fonts, found, foundries, foundsounds, fowd, free, freelancing, frontrow, ftp, g5, games, gaming, gardening, garlic, geek, geekends, geekery, geekmediabox, genesis, genius, gentleman, gifs, gigs, google, googlereader, grammys, graphics, greader, grids, gtd, guvnor, hacks, handbag, handbags, hardware, harrypotter, helvetica, helvetireader, heros, hicksdesign, history, holiday, hosting, howto, hp, html5, humanrights, icab, ical, ichat, icon, icon design, icondesign, iconhandbook, icons, ideas, illustration, illustrator, illustrators, im, images, indesign, infographics, inspiration, installation, intel, interface, interfaces, internet, internetexplorer, interview, interviews, inventions, ios, ios7, ipad, iphone, iplayer, ipod, itsmyblogandillbangonifiwantto, itunes, javascript, jobs, journal, justabitoffun, knitting, koken, leaflets, lego, leigh, less, lifecraft, lifeio, links, list, listening, lists, littlebigplanet, logo, logo design, logos, london, londonbombing, mac, macbook, macmediacentre, macmini, macs, macworld, magazine, magazines, magazines.illustration, making, maps, mechanics, mediacenter, mediacentre, mediacentres, mellow, memes, memories, menus, merchandise, messages, metal, metro, microformats, microsoft, mkgn, mobile, modernart, moleskine, monkeybutler, moon, movabletype, movies, mozilla, mum, music, myob, natural, nerdery, newmusic, news, nintendo, nostalgia, nostradamus, notes, obituaries, offers, office, offscreen, omniweb, opacity, opensource, opera, organisation, os, osx, oxford, oxfordgeeknight, packaging, panic, panther, paper, parallels, pashley, penguin, people, personal, phantogram, photo, photography, photos, piecharts, pimp, pipes, plex, plugins, png, podcast, polygamy, posters, powerbook, practice, presentation, presentations, presents, press, print, printmaking, productivity, products, projects, propoganda, ps3, published, punditry, puppetry, questions, quicksilver, quotes, radio, radiohead, raf, railway, rants, rapha, recentwork, repair, resources, responsive, retorts, retro, review, reviews, riffs, righteousindignation, rip, ripoffs, rissington, rss, safari, saft, sage, samantha, sass, sauce, science, scifi, scrapbook, scripts, security, server, shelf, shiira, sideprojects, signage, simplenote, sites, siteskin, siteskins, sixties, skinning, skype, slides, slowcore, software, solutions, songbird, sony, sound, spam, speakers, speaking, sponge, spotify, spotlight, starflyer59, startrek, starwars, stationery, steel, stevejobs, store, stories, summerboard, surveys, svg, sxsw, syncing, tagging, talks, tasks, tattoos, tea, teasing, templates, ten, texpattern, text, texteditor, texteditors, textile, textpattern, thebeatles, theme, themes, theming, thenational, theory, tiger, time, timeline, tips, toys, tumblr, tv, tweed, typefaces, typography, ui, updates, updtes, userstyles, vans, vector, veer, versions, video, videos, vinyl, vw, wallpaper, web, webapp, webapps, webbies, web design, webfonts, webkit, website and logo design, webstandards, whitenoise, why, widgets, wifi, wii, windows, windows8, winter, wireframing, wishlists, wordpress, work, working, workshops, xhtml, xul, yojimbo, youtube, zengarden, zip

The Hickensian is the journal of Jon Hicks, one half of the creative partnership Hicksdesign. Take a look at the work we do.

Upcoming Talks

I sometimes pop up at conferences and waffle about design, icon creation in particular. Here's where I'll be next:

An Event Apart Chicago- "Icon Design Process" - 25-26th August 2014

Web Expo Guildford- "Icon Design Process" - 26th September 2014

Beyond Tellerrand Berlin – 3rd-5th November 2014

playlist

See more on last.fm

Contact

Hicksdesign

73a High Street

Witney

Oxfordshire, UK

OX28 6JA

+44 (0)7917 391 536

Download vCard

Engine Room:

Hicksdesign is powered by Textpattern and hosted by the lovely boffins at Engine Hosting

Engine Hosting