I have a number of Flurry icons on my desktop linked to applications I use frequently. I envision an almost identical looking icon, but instead of an icon and filename, it displays the album art and track name of the currently playing song using Bowtie.

Is there such a theme in existence? If not, what's the easiest way to create one from scratch?

(Info about developing themes for Bowtie can be found here. It's mostly HTML and CSS.)

  • 2
    What are Flurry and Bowtie?
    – Daniel
    Mar 21, 2012 at 2:06
  • @bmike Bowtie is an app that runs on your desktop to display some sort of info about the current track in iTunes or Spotify. Flurry is a set of iOS-like icons for many popular OS X apps, created by Iconfactory.
    – Tuesday
    Mar 21, 2012 at 10:55
  • @senseful has helpfully added links, which I omitted. Thanks. :)
    – Tuesday
    Mar 21, 2012 at 10:56

1 Answer 1


You could start by adapting the default theme that comes bundled with Bowtie and is just HTML/CSS as well. Copy it from the application bundle (Bowtie.app/Contents/Themes/Default.bowtie) to ~/Library/Application Support/Bowtie and rename to e.g. Flurry.bowtie.

Make sure to edit all information in the contained .plist file, especially name (BTThemeName) and identifier (BTThemeIdentifier) to custom, unique values.

To get from this theme to something more like Flurry, the following need to be changed:

  • -webkit-border-radius in #artHolder (I used 18px)
  • -webkit-box-shadow, same location (e.g. 0px 0px 4px #000)
  • width and height, same location (I used 96px).
  • Remove the img tag referencing img/gloss.png.

The result will look like this:

Screenshot of intermediate Flurry style

What's missing is a proper border and maybe some glossy overlay. The file img/gloss.png in the theme produces the glossy overlay effect in the default theme. Replace the image file with your own containing a border and some highlight at the top matching the Flurry style. I shamelessly ripped the AirPort Flurry icon apart for this, deleted the background and border contents, and used the result as overlay image. Don't do this unless you know as little about image editing as I do.

The position of the border will be off by a few pixels. Play around with the top and left values in the image CSS until it matches the cover art. Change cover art size or border image size until they match as needed.

This is what it looks like on a darker background now:

Screenshot of final Flurry style

Now, this is missing the light highlights at the top and some glossy effect, but this is about all I am able to do in an image editor.

Of course, this is just a rough outline. Much depends on the detailed requirements you need to work out yourself, e.g. whether you also want to flip the cover image to get the controls, and how they should look like.

I'm not sure about the licensing here. To be on the safe side, especially if you want to publish your theme, make it original, especially the border/overlay image.

  • Great answer! While it is very helpful, I'm not marking it as answered because I'm reserving that for if someone (including myself) ends up making a whole theme and publishing it. Thanks again for the answer. :)
    – Tuesday
    Mar 24, 2012 at 2:08
  • @TimothyMueller-Harder Thanks. While I'd love to do that, I'm basically stealing The Iconfactory's artwork here, so please understand that I just can't publish this in the current form. And I just don't have the image editing skills to make this from scratch. Mar 24, 2012 at 4:16
  • Right. I wasn't implying anything, just explaining why I'm not marking it as technically "answered". :)
    – Tuesday
    Mar 25, 2012 at 1:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .