Make Leopard Bezelicious

Many people agree that bezels are beautiful. They’re dark, transparent, easy on the eyes, minimalist, and they look great. In fact, I enjoy bezels so much that I use them wherever I reasonably can. Here is a screenshot of my desktop:Click for full size
What you’re seeing is this, starting at the top-left and working counter-clockwise:

  • Adium (contact list)
  • Colloquy (IRC client)
  • QuickSilver
  • QuickShareIt (uploads window)
  • LittleSnitch Network Monitor
  • Growl (notification)
  • Anxiety

Obviously my desktop is never this cluttered, but I wanted to show you as many examples of the bezel (or bezel-like) interface at work as I could. The problem is that some apps are going to require some work to get them to share this bezel appearance. I’m going to walk you through Adium, Colloquy, QuickSilver, Growl, and the Dock.

Adium: Multi-Platform Instant Messenger (http://www.adiumx.com/)
Modding Adium to mock the bezel appearance is quite easy thanks to its support of plugins and extras. Here’s what you will need:

  • HUD contact list style by PrinzAdium – Link
  • Service Extensions by fissure – Link
  • Anxiety status by ispytonyv – Link

Simply click on the install link for each of these add-ons to install them. Now go into Adium’s preferences, “Appearance” pane. For “Service Icons”, select “Service Extensions White”. For Status Icons, select “Anxiety”. For both “Contact Theme” and “Contact Layout”, select “HUD”. For “Window Style”, select “Group Bubbles.” I have the opacity set to 80%, and I have scale to fit checked for both horizontally and vertically. Now select the Customize button for “List Layout”. For “Show status icons”, select “Far Left”, and for “Show service icons”, select “Far Right”. Now select the “Groups” tab and set the alignment to center. And now you’re done! Your contact list should look just like mine in the image above.

Colloquy: IRC Client (http://www.colloquy.info/)
Colloquy doesn’t have a bezel interface specifically, but we can make it bezel-esque. Head over to www.colloquy.info, click the Extras link, then click Styles. On the first page is going to be Acid Burn. Click on that, then download it. As the instructions on the download page tell you, you’re going to want to move the CSS file to ~/Library/Application Support/Colloquy/Styles/Variants/cc.javelin.colloquy.style.standard/. Create any missing folders. Then restart Colloquy, and select the Acid Burn style from the style menu. If you want to make Acid Burn the default style, go to the preferences, then the Appearance pane, and select Standard→Acid Burn for the default style. And with that, Colloquy should be set.

As a side note, I personally have Colloquy set to use tabs to display channels, and a drawer (hidden in the picture) to display users in each channel. To set it this way, go to the Interface pane in the preferences, and for “Window Interface”, choose “Tabbed Window.”

QuickSilver: A can-do-everything, productivity-boosting, “application launcher” on steroids (http://www.blacktree.com/)
For QuickSilver, we are going to install in interface called Fumo. Head over to the download page for Fumo (link) and download it. As the readme instructs, move Smoke.framework to /Library/Frameworks/, and then double-click on QSFumoInterface.qsplugin to install Fumo. You may need to restart QuickSilver. Now invoke QuickSilver (default Toggle: ⌃Space) and hit ⌘, to enter the preferences. Select “Appearance” on the left, and choose “Fumo” for “Command Interface.” You can stop here, or, if you want, you can take it a step further by clicking the boxes next to “Lists” and switching colors and opacities around until you get something you like (“List” affects the drop-down menus when you toggle QuickSilver). I personally have the color scheme set to mimic the Acid Burn style in Colloquy; black background with transparency, and the same greenish-blueish highlight color, with gray text.

For those interested, here is the original concept for the Fumo interface. Personally, I prefer how it is right now, but it’s still interesting to see its roots.

Growl: A universal notifications system (http://www.growl.info/)
After you install Growl, go to your System Preferences, then select the Growl preference pane. select the Display Options tab, and for “Default Style”, select “Smoke”. And that’s it! All future notifications will be displayed in the Smoke style, unless you specifically set a certain application to have a different interface.

Alternately, you can use the GrowlHUD style, which I prefer, and is what you saw in the image I showed you of my desktop. Unfortunately, we need to download GrowlHUD separately. Go ahead and download GrowlHUD (link), mount the disk image, and then double-click on GrowlHUD.growlStyle to install it. Nice and easy. Now, same as before with the Smoke style, go to your System Preferences, then select the Growl preference pane. select the Display Options tab, and for “Default Style”, select “GrowlHUD”.

The Dock: Do you really need a description? =)
Last but not least, our precious Dock. The first thing we are going to want to do is to make the Dock 2D. There are many software options out there to do this, but I prefer to do this in such a way that doesn’t require any extra software: the Terminal. Don’t panic, I’ll tell you exactly what to enter so that you can simply copy and paste the commands and be done in two seconds, no sweat. Open Terminal (/Applications/Utilities/Terminal). When the Terminal is open, paste this in and his return:

defaults write com.apple.dock no-glass -boolean YES

Follow this with:

killall Dock

Now the Dock and Dashboard will reload, and you should see an okay-looking 2D Dock. Now we’re going to make the okay-looking Dock a great-looking bezel 2D Dock. This is actually a custom package I’m putting together using elements from a couple different themes. Let me know if the file ever goes offline, and I will upload it again. I’ll give the credits below.

First, download the theme package (link). Now, navigate to the Dock (Dock→Reveal for QuickSilver users; otherwise: /System/Library/CoreServices/Dock). Right/Control-click on Dock.app and choose “Show Package Contents”. A new Finder window will pop up; navigate to /Contents/Resources/. Now, create a folder on the desktop titled “backup” or something similar. This following step is important, just in case something goes wrong. Find the following files, and Option-drag them to your newly created backup folder so that a copy of each one is made:

  • bottom1.png, bottom2.png, bottom3.png, bottom4.png, and bottom5.png
  • indicator_medium_simple.png
  • indicator_small_simple.png
  • left1.png, left2.png, left3.png, left4.png, and left5.png
  • right1.png, right2.png, right3.png, right4.png, and right5.png
  • separatorstraight-horizontal.png
  • separatorstraight.png

Now that you have copied each of these files to your backup folder, delete them from the /Contents/Resources/ folder inside of Dock.app. This is also important, as simply overriding these files may cause issues. Now open the BezelDock folder from the ZIP file you just downloaded above. Move the entire contents of this folder into the /Contents/Resources/ folder inside of Dock.app, but do not drag the folder here! Only its contents go. After you do this, launch the Terminal (/Applications/Utilities/Terminal), enter “killall Dock” (without quotes), and your Dock will reload. When it reappears, it should have a nice bezel appearance.

The bezel package was put together with the following:

  • Background, Separator, & Borders: Bezel interface by ~REO-2007 (link)
  • Indicator Arrows: Niqu Dock by esXXI (link)