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 (
~/Library/Application Support/Bowtie and rename to e.g.
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:
#artHolder (I used
-webkit-box-shadow, same location (e.g.
0px 0px 4px #000)
height, same location (I used
- Remove the
img tag referencing
The result will look like this:
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
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:
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.