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

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

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Instagram Hickstagram

  • 08 Dec 2018

    More Red-crested Pochard

  • 08 Dec 2018

    Wigeon + Red Crested Pochard

  • 05 Dec 2018

    A small glimmer of light on a very dark day.

  • 29 Nov 2018

    View from the office. To the left, and to the right…

  • 25 Nov 2018

    Gorgeous pre-gig food at Turtle Bay

  • 25 Nov 2018

    Lego Noddy Holder!

  • 18 Nov 2018

  • 18 Nov 2018

  • 11 Nov 2018

    It’s got to the PowerPoint presentation part of Gruff Rhys’ set.

  • 11 Nov 2018

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