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

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

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Instagram Hickstagram

  • 15 Oct 2018

    Inktober Day 15. @hicksmade’s staircase led me to this. There must be a hairdressers somewhere called this? #inktober #inktober2018 #leighandjondoinktober #hairwaytosteven

  • 14 Oct 2018

    Inktober day 14 - from @hicksmade’s theme of escape, and tonight’s Dr Who, with a return to classic theme: running!. #inktober #inktober2018 #leighandjondoinktober #drwho #pictogram #signage

  • 14 Oct 2018

    Inktober day 13 is more of a doodle as time was very short! There was a bird in @hicksmade’s day 13 so I ran with that. . #inktober #inktober2018 #leighandjondoinktober

  • 12 Oct 2018

    Inktober Day 12. Thinking about @hicksmade’s lumos led me to this “please don’t turn me off…”. #inktober #inktober2018 #leighandjondoinktober #sadlightswitch

  • 11 Oct 2018

    Inktober Day 11. The shape of @hicksmade’s spoons made me think of the Mandrake - a root that looks like a tiny human. There are lots of legends around it, but this one is based on the Harry Potter interpretation. . #inktober #inktober2018 #leighandjondoinktober #mandrake #harrypotter

  • 10 Oct 2018

    Inktober day 10. @hicksmade led with a lovely bee, which made me think of the Jesus and Mary Chain song “Just like honey”. Fancied trying something different so went for a 60s typographical thingy . #inktober #inktober2018 #leighandjondoinktober #honey

  • 10 Oct 2018

    Beautiful morning at North Leigh Common!

  • 09 Oct 2018

    Inktober day 9, as the crow flies. An obvious link from @hicksmade’s scarecrow, but I’m much happier with this one compared to yesterday’s. #inktober #inktober2018 #leighandjondoinktober #crow

  • 09 Oct 2018

    Inktober day 8 and boy am I cross with how this one turned out. It’s utter pants. Supposed to be Bill Murray and Scarlet Johannsen in Lost in Translation, not that you could tell from this. Bill looks like a zombie, and goodness knows what that is on the right. It put me in such a bad mood last night, but I need to let it go and move on. (I even cheated a bit and touched up some bits in Photoshop!). The one bit I’m happy with is his neck, and that’s it. Rant over #inktober #inktober2018 #leighandjondoinktober

  • 07 Oct 2018

    Inktober day 7. When @hicksmade drew an apple, I couldn’t get the apple bonkers from Yellow Submarine out of my head. Those faces gave me nightmares as a child. . #inktober #inktober2018 #leighandjondoinktober #yellowsubmarine #applebonkers

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