If you’re a Mac user who’s wandered in to this article and don’t know what Growl is yet, you might want to stop by that essential open-source project’s home page to get acquainted. Once your Mac starts Growling, you’ll understand how fitting it is that Apple’s naming all their OS X releases after large cats.

If you’re a Windows user, you’re still welcome to read up on Growl and why it’s become a standard component of so many Mac users’ desktops even though it’s still only at version 0.7.4. If you find Growl cool, too, you know what to do.

This article isn’t about Growl, though. It’s about Growl displays—the part of Growl you actually see when an event occurs you’ve asked to be notified about. You see, like many other cool apps nowadays (Adium, Synergy, Menuet, etc.), Growl is “skinnable.” Part of the fun—and the utility—of Growl is that users can customize the appearance of different kinds of alerts. In fact, Growl provides you with an astonishing degree of control over your customizing, and this flexibility is one of Growl’s coolest aspects. Using the Growl Preference Pane, you can:

• Set a default Growl style as your starting point.
• Customize certain aspects of each Growl style. Some styles let you set different attributes for up to 5 different priority levels.
• Assign a default style to each different application that’s registered with Growl. (Here’s a growing list of Mac OS X applications that now include support for Growl event notifications.)
• Override the default for any specific notification event, or for a given event priority.

With so many options, it’s no wonder that Growl users collect Growl styles like some Mac users collect system icons or desktop pictures!

Growl notifications can take several forms: Email, speech (using the Mac’s built-in vocal chords), or visual displays. The visual display types are roughly broken down into two kinds:

1. Displays you build with AppleScript or xCode (those with the extension .growlView), and
2. Displays that are basically just little web pages (those with the extension .growlStyle).

It’s the latter type I want to briefly shout about today.

One of the things I still find most amazing about Mac OS X is how transparent its applications are. To peek inside a Mac application, all you have to do is right-click (or Control-click if you haven’t got a Mighty Mouse yet) on the application in the Finder and select “Show Package Contents.” Behind the scenes, every Mac application has a “Contents” folder that holds all of the application’s files, and in fact the application itself (that is, the icon you click on to launch it) is just a special kind of folder that Apple calls a “package.” This setup makes browsing around inside your Mac apps a trivial exercise, and—for geeks like me—a heckuva lot of fun! (By contrast, Windows applications—at least, through XP—are totally opaque. No peeking allowed, period. Not only that, it’s difficult to know where all the files for a given application reside… they could be anywhere, which is one of the many reasons why Windows is so much easier to infect with malware. Outside of their own “package,” Mac OS X applications only read input from a small number of known locations on the file system as they launch.)

Since Growl installs itself as a Preference Pane in your ~/Library/PreferencePanes (or in the system-level Library) directory, just mosey on over there and peek into the Growl.prefPane folder. In Mac apps, the “good stuff” is usually found in the application’s “Resources” folder. In the case of Growl, you might think the styles are stored somewhere else when you first peek in. That’s because they’re actually hidden away in a second application, GrowlHelperApp, which is stored in the Growl.prefPane’s Resources folder. Just open this little fellow up, and you’ll find another set of folders inside. Check out the Plugins folder inside GrowlHelperApp, and you’ll find all the default Growl styles. (Describing this process is a whole lot harder than actually doing it, by the way!)

OK, so there you are… looking at the style plugins. Now what? Did I hear someone say, “Show Package Contents”? Absolutely… each style has either a .growlView or a .growlStyle extension that marks it as a special kind of folder for Growl, and you can peek in these just like any other Mac OS X package! The .growlStyle packages are the ones we want to inspect this time around.

So, if you open, for example, the Crystal.growlStyle package, you’ll discover that the style consists of nothing more than an HTML file, a CSS file, and some images. Gee, does this sound a little like a Dashboard widget? Um, yeah!

Of course, the style also has an Info.plist file that accompanies all Mac OS X software, which contains a list of the software’s properties. As with widgets, this is no big deal… you just fill in properties that are appropriate for your software (e.g., version number, author name, software name, etc.).

Being an inveterate tinkerer, I naturally couldn’t move on with my life until I’d built a Growl style or two. In fact, It’s so much fun I may build some more! Using one of these HTML-based Growl styles as a template, I made some graphics, fiddled with the CSS file to set default font styles, colors, and text positions.

If you open the HTML file in your browser, you’ll see that there are a couple of variables that Growl processes when displaying the style: %title% and %text% are common to most of these. The HTML file simply has these variables placed in layers, which you position and style with CSS. There’s also the icon variable, which is passed from the application that sends the Growl notification. You can position the icon likewise… pretty much wherever you want.

Now, not being satisfied with this, I experimented to see if JavaScript could also be included in my Growl style. Sure enough, it can! I added a simple Date object that cycles through five different background graphics depending on which second of the minute it happens to be. The script also changes the color of the text’s CSS style to match the background image.

This is really too wonderful, especially if you are a web-type tinkerer. Now, rather than waiting for new Growl styles to trickle in to the ResExcellence archive, I can make my own whenever inspiration strikes! The hardest part about building the style was fine-tuning the Photoshop images.

Besides the Preference Pane, Growl also maintains a presence in your ~/Library/Application Support directory. Here, you’ll find two folders:

1. Plugins. This is where you’ll find all the Growl styles you’ve installed from other sources. (To install a Growl style, you simply doubleclick on the .growlView or .growlStyle file, and Growl will take it from there.)
2. Tickets. Each application that “registers” with Growl puts its ticket (a configuration file that explains to Growl what notifications it expects to handle) here.

(My apologies to the Growl developers if I’ve mangled the technical explanation here… This is the way I think about the process.)

So, my new Growl style, which I’ve dubbed “GlassCandy”, is now installed and merrily materializing in different colors whenever an alert is due. The accompanying screenshot shows the contents of the GlassCandy package, which is available for download if you like.

Since Growl is an open-source project, anyone can download the entire Growl code base, which includes all the styles that use AppleScript and Cocoa as well as the HTML variety. Peeking at the Cocoa code for .growlView styles is also very easy if you’ve installed Apple’s free Developer Tools (they come on DVD with every Mac), but you have to know what you’re looking at… and what to do about it! I’m taking this as a great opportunity to try my hand at a simple Cocoa project using xCode, since I’d love to use some of Cocoa’s built-in animation and bezel views to cook up some Growl styles that would be really hard to replicate in HTML.

Wish me luck! And don’t forget to peek into those beautiful Mac OS X software packages now and then… you never know what you’re going to find! If nothing else, prowling around in a Resources directory is an easy way to “borrow” an image file now and then.