Skinning sites in Safari with PithHelmet

10 Feb 2005

It would easy to to think that Firefox is the only browser with cool extensions, and overlook the excellent ones available for Safari, such as Saft, Stand and PithHelmet.

Like Saft, PithHelmet started life as an extension with a single purpose, and and has since grown beyond its remit. Starting life as an advert blocker, PithHelmet now boasts powerful per-site preferences, and the ability to apply custom css AND Javascript to individual sites. This takes Omniweb’s site preferences and expands it even further.

Late last year I began playing with the custom css function, and while it didn’t work at first (preferences weren’t saved after quitting Safari), Mike Solomon, PithHelmets developer, soon ironed out all the glitches. Its been a real pleasure to communicate with Mike. I’ve questioned, he’s responded with new versions, and now he’s added the ability to create a single theme file that can be sent to others. Dragging a site rule from the preferences window into the finder creates .phr file (Pith Helmet Rule), but now it will include all the css, javascript and images for your site skin.

Why bother skinning a site? Actually, there is a purpose of sorts. Lets say for example that you’re a heavy Gmail user, but you’d like the interface to look a little less PC. With a site skin you could alter it to look more OS X.

So here’s the one I’ve been working on. A Spotlight-ish skin for de.licio.us. The start of this idea came from Tom Coates mockups of bookmark tagging inside Safari. My aim was to make de.licio.us look more like a part of my browser, rather than a web page.

delicious after being skinned

(click image for full sized version)

If you’d like to give it a go, download this site rule (ctrl-click and ‘Save linked file as’), and then drag and drop it into PithHelmets site preferences window. That should be all you have to do, but this is a ‘first try’, so do let me know if anything goes wrong.

The css for this is a bit quick and sloppy. I’ve coded it so that the css can be used in a usercontent.css (that would get applied to every site), so while it’s flexible, it could be cut down when being used in the PithHelmet context. Ways to improve this (if I had the time) would be to use a javascript to dynamically create classes for the alternating rows, rather than the limited adjacent sibling selector method that I used in the css. All in all, it’s not perfect, but its enough to demonstrate what you can do. Someone with more time could take this and improve on it.

To create your own site theme, you have to use copious amounts of the inherit value to override the site’s own css rules. Then once you’re ready to go:

  1. visit the site you want to change in Safari
  2. open up PithHelmet menu>Show Site Preferences. If you haven’t already set preferences for that site, it will be at the bottom of the list.
  3. under ‘style’ select your custom css, and javascript, if applicable.
  4. type in a theme name
  5. If your theme requires images, create a directory with the theme name:
  6. ~/Library/Application Support/PithHelmet/com.apple.Safari/themename and then add the files to that directory
  7. make sure that images in your css file refer to file:///~/Library/Application%20Support/PithHelmet/com.apple.Safari/
  8. themename/newlogo.png (You can leave the ~, as this will choose the current users home directory, and allow the theme to be used by others). If it all looks OK, drag and drop the theme onto the finder, and this will create the .phr file with all the theme information.

The ability to create an easily sharable site theme opens up possibilities. Sites like de.licio.us are perhaps a little easier than some to theme, as all the styling is done with external css.

So, who’d like to have a go?

Recent Posts

Troika #33: Endings

18 Feb 2019

Identity Design discussion on Elastic Brand podcast

23 Jan 2019

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Instagram Hickstagram

  • 18 Feb 2019

    Troika #33 is out, for pleasuring your lug-holes! Link in the bio!

  • 17 Feb 2019

  • 15 Feb 2019

    I didn’t manage to do a single episode of the Troika Podcast in 2018, but I’ve managed to record one now. Doing the whole process on my iPad Pro is wonderful! Episode 33 coming soon…

  • 14 Feb 2019

    That time of year when I keep marvelling at “Still light at 5!” On my way home…

  • 03 Feb 2019

    Black-headed Gulls huddled together on the ice at Rushy Common. #birding #digiscoping

  • 02 Feb 2019

    Found a bundle of things from my birth while at my Dads today. Leaflets on maternity benefits, welfare services and my weight card (Johnathan? Have I been spelling my one name wrong all these years?!)

  • 01 Feb 2019

  • 01 Feb 2019

  • 27 Jan 2019

    For her birthday last year, some of Leigh’s chums clubbed together bought her a gin blending weekend at the Plough in Clanfield. We booked it for January (when it would be needed most). It was like a potions class, and after a lot of smelling, she now has a gin that tastes like pencil shavings! It’s even nicer than it sounds!

  • 23 Jan 2019

    Pondering about pictograms - we’re going to need a new symbol soon. #icons #pictograms #symbols #representations

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom