Hicks

You’re reading all articles on The Hickensian tagged 'theme'

Shelf, now in stock!

It’s been an awful lot of work to get what was on the face of it, a simple idea, finally released. After 4 months of design, development and bug-fixing, my Shelf theme for The Theme Foundry is now available for Wordpress and Tumblr. This is a time of both joy, pride and nervousness!

I’ve been working with Yan Sarazin of Statik Pulse, who has implemented the javascript side, and Brandon Dove who converted the HTML & CSS design into the final Wordpress Theme. Along with Drew Strojny who commissioned the theme, the team has been a joyful experience to work with! I’ve also learned a lot about using Git from this project, which has been an unexpected bonus.

I’ll be doing a more thorough write-up of the process and what interesting challenges we had to solve along the way, but in the meantime, there is a Flickr Set where I’ve been documenting the process, and Drew has a written a post to introduce Shelf.

Helvetireader - a work in progress

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!

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.

Tiger Theme for Omniweb 5.5

I’ve finally updated my Omniweb theme to work with the sneaky peeks

Tiger theme for Omniweb 5.5

Changes for this version include:

  • New Icons: Mark page, Next Mark, Previous Mark, Favourites Folder, News Feed Folder. Thanks go to Dan Carson who created the ‘Mark page’ and ‘Favourites folder’ icons.
  • Added ‘small size’ icons for the main toolbar icons.
  • Improved close tab icons.
  • Added the large bookmarks image for the tab drawer.
  • Redone splash page.
  • It no longer replaces the Omniweb application icon.
  • Downloads window – tweaked to allow it to be resized narrower (like Safari). This may compress text when smaller, but I prefer a narrower window
  • Workspaces window- Changed from a ‘utility’ window to a normal one, with margins removed.
  • *New Change (4.5.06)*- Improved the smoothness of the Safari-esque buttons. Please re-download and re-install to get the improved icons.

As before, if you want to pick and choose which icons you want to install, all the original files are included, as well as goodies folders of applescripts and sample workspaces. Don’t forget to back up Omniweb first.

Download the Tiger theme for Omniweb 5.5 (888k)