Add some color to iChat groups

Today's Best Tech Deals

Picked by Macworld's Editors

Top Deals On Great Products

Picked by Techconnect's Editors

One thing that’s really nice about OS X is the ease with which you can customize at least some aspects of most applications. Don’t like a certain color scheme? Find a particular sound annoying with no way to disable it in the application’s preferences? Just modify the offending elements yourself! In the pre-OS X days, modifying an application required ResEdit and a good bit of detective work. For many OS X apps, all it takes is a couple of mouse clicks, the ability to duplicate a file (for backup reasons), and a willingness to experiment. A number of the hints you’ll see here capitalize on this ease of customization, starting with this one.

iChat in 10.4 has some really nice features; one of the most useful is the improved group function. Using groups, you can sort an unwieldy buddy list into smaller more-manageable subsets. For instance, you can create a group for coworkers, another for online friends, perhaps one for relatives, etc. Previous versions of iChat had rudimentary group support, but the interface for managing and using groups was a bit cumbersome, to put it mildly.

In Tiger, iChat’s group support has become much more usable. Once you’ve enabled groups (View -> Groups), created some new groups (using the plus sign at the bottom left of the Buddy List window), and sorted your buddies into those groups (via drag and drop), iChat presents your buddy list nicely sorted into the groups you created:

As you can see, the group dividers can be individually opened or closed, making for a much easier to use Buddy List window. But when I saw the dividers, my initial response was “ugh, I really don’t like that gray color in the divider bar.” Since the Buddy List window is visible any time I’m using my machine, I wanted something a little more pleasing to my eye. This is where the ease of modifying OS X applications comes into play. With just a bit of work in the Finder, and some tweaks in a graphics program (Photoshop Elements in my case), you can easily customize the dividers. Here’s how…

As a quick aside, the key to modifying OS X applications lies in their structure. Most OS X applications are actually just regular folders with a special name—they all end in .app . With this special extension present, a folder turns into an application. Try it yourself and see—create a new folder and name it “” or something similar, and notice that it will appear with an application icon, not a folder icon. You’ve just created an application, even though it’s just a folder. So the first step in modifying any program is to “dive into” the program’s contents, which are hidden inside these special ‘application folders.’ Thankfully, that’s as simple as control-clicking on the application you wish to look at and selecting “Show Package Contents” from the pop-up menu. This will open a new window showing you the contents of the application.

Since we’ll be modifying iChat, first make sure the program isn’t running. Then dig into the iChat application—control-click on the program and choose Show Package Contents from the pop-up menu. In the new window that opens, you’ll see a single Contents folder; open that one, and then open Resources within that folder. This is the folder where you’ll usually find the easy-to-change graphics and sounds for any given program. For iChat in particular, you’ll see a long list of files, most of which have self-explanatory names. There are images (.tiff, .png), audio files (.aiff), a few odd files, and a bunch of folders, one for each supported language (Italian.lproj, Japanese.lproj, etc.). Inside the language folders is where you’ll find the files used to build the application’s interface (since these are language-specific), as well as additional supporting files—it’s where we looked, for instance, to disable certain smileys earlier this week. But today, we’ll be spending our time in the Resources folder.

As noted above, most of the filenames in the Resources folder at least give some indication of their use in the program (frown.tiff). But even if the name isn’t clear, the preview of the graphic should give you a pretty good idea of what it does (you can also play sound files in the Finder to see what’s what). In today’s example, we’re trying to change the group divider graphic, so look at the “G” section of the file list. We’re interested in four files, as seen below:

The GroupRowBG files set the color of the background behind the name of each group, and the two Triangle files are the images used for the opened and closed triangles next to each group’s name. Before you do anything else, make a copy of these four files —you should always make backups of any files you are going to modify, just in case something goes wrong. After duplicating, you may wish to rename the duplicates. Instead of GroupRowBG copy.tiff , for instance, use something like GroupRowBG.tiff_original . This will make the original files easy to spot, and if you ever want to use them again, you just have to remove the _original at the end of the filename.

Now open each of the four files in your favorite graphics editing package, and modify them as you see fit. Do not change the size of the images; work within the already-defined boundaries. Within that space, though, feel free to try anything you like. Keep in mind that the background files are simply repeating patterns—that small gradient is repeated horizontally as necessary to fill the available space. As such, you’ll want to use a color, gradient, or pattern that repeat smoothly from side to side. Also keep in mind that the text for the group names is white, so you’ll want to stick to darker colors to make sure the group names are visible. Once you’ve made your changes, save the files, and make sure you don’t change the filename or format (.tiff) of the files. After that, you’re done—just launch iChat and enjoy the new look of your group dividers.

In my case, I decided to go with a “Tiger-like” Aqua blue gradient, with darker blue disclosure triangles:

I personally find this much easier to look at than the gray divider, and it more clearly visually separates each of my groups. If you’d like to use what I created as a starting point, here’s an archive (21KB) of the four images I created. Make copies of the originals first, then just drop these into iChat’s Resources folder. You can then edit them as you see fit, or just use them as-is by launching iChat.

One downside to modifying applications is that, like sand castles on the beach, you’re never quite sure how long your work may survive. Future updates to iChat may very well overwrite the changes you’ve made. If you spend a lot of time tweaking an application, it’s probably a good idea to copy your modified files to another directory when you’re done—create a folder called “iChat Tweaks,” for instance, and put copies of your modified images into the folder. Then, if an update does wipe out your hard work, you’re a simple Finder copy away from restoring your modified graphics.

Note: When you purchase something after clicking links in our articles, we may earn a small commission. Read our affiliate link policy for more details.
Shop Tech Products at Amazon