Custom Icons for Gmail Compactor

May2009

I use Gmail for my everyday email usage, but one thing that’s always bothered me is the screen real estate occupied by the menu items and search bar – especially on a small netbook screen. Enter: Gmail Compactor. This Greasemonkey-based script created by Pavel Gutin is a great way to save some of your valuable vertical screen space when using Gmail.

While Pavel is current working on a number of new features for the script, one much requested change is the ability to select your own menu icons. In the case of Gmail Compactor, the Inbox and Compose icons look very similar, making things a little confusing sometimes. There have been a number of requests to be able to use custom icons, but Pavel, like many other open source community coders, seems to be a busy guy.

So I thought I’d take it upon myself to make a couple changes in the script to make it a little easier for people who want to use their own icons. It was a simple change.

I went ahead and made some custom icons using sets from the Tango Desktop Project. If you’d like to try out this Gmail skin to save some space and make the Gmail interface a little more compact, follow these five easy steps:

1. Make sure you are accessing Gmail using the Firefox web browser.
2. Install the Greasemonkey Firefox Add-on, and then restart Firefox.
3. Make sure Greasemonkey is enabled. The monkey face in the bottom-right corner should be brown and not grayed out.
4. Install the customized user script by clicking here (you may have to click Allow).
   • Update: I set up a project page on userscripts.org, where I’ll be maintaining the script. Click here to check it out and install from there.
5. Restart Firefox, and go to Gmail.

A bit more detail

Pavel was converting the images to base64, which is why the icon locations were extremely long strings of characters. By changing Line 78 to remove the conversion, it was then only a matter of entering URLs in the place of the base64 converted text:

New Line 78:

link.style.background = "url(" + gFolders[i].b64 + ")";

New Lines 60-69. You can change the URLs here to use your own icons stored on your own host (or use Dropbox like I did):

var gFolders = new Array(new cLink("https://mail.google.com/mail/#compose", "Compose",  "http://dl.getdropbox.com/u/1192027/gmail/compose.png"),
new cLink("https://mail.google.com/mail/#inbox",    "Inbox",    "http://dl.getdropbox.com/u/1192027/gmail/inbox.png"),
new cLink("https://mail.google.com/mail/#starred",  "Starred",  "http://dl.getdropbox.com/u/1192027/gmail/starred.png"),
new cLink("https://mail.google.com/mail/#chats",    "Chats",    "http://dl.getdropbox.com/u/1192027/gmail/chat.png"),
new cLink("https://mail.google.com/mail/#sent",     "Sent",     "http://dl.getdropbox.com/u/1192027/gmail/sent.png"),
new cLink("https://mail.google.com/mail/#drafts",   "Drafts",   "http://dl.getdropbox.com/u/1192027/gmail/drafts.png"),
new cLink("https://mail.google.com/mail/#all",      "All",      "http://dl.getdropbox.com/u/1192027/gmail/all.png"),
new cLink("https://mail.google.com/mail/#spam",     "Spam",     "http://dl.getdropbox.com/u/1192027/gmail/spam.png"),
new cLink("https://mail.google.com/mail/#trash",    "Trash",    "http://dl.getdropbox.com/u/1192027/gmail/trash.png"),
new cLink("https://mail.google.com/mail/#contacts", "Contacts", "http://dl.getdropbox.com/u/1192027/gmail/contacts.png"));

I also changed Line 142 so that the block title reads Menu instead of Folder. Happy emailing!

Update: I set up a script page on userscripts.org. Click here to check it out.