With our organizational switch over to Gmail 2.0, we have been working on practical, advocate-friendly solutions that work with the updated Gmail 2.0 interface. The initial solutions a few days ago had to do with using Better Gmail 2.0 to give our users mailto functionality that works with our Google Apps, plus nifty new file-type icons and other goodies that come with that add-on package. Done.

The second part of the plan is to exploit the power and flexibility of the Stylish Firefox extension to perform a few modest cosmetic tweaks, while also offering users some options about what appears and does not appear in the new Gmail interface.

Here are the targets of our coding madness today — all real-world examples as of this afternoon from my Google Apps Gmail account — displayed here and familiar to all who are familiar with the default Gmail 2.0 interface, from top to bottom: the two search buttons, one for your Gmail and the other for a general Google search; the Labels menu with its new “color-code/edit-label” boxes to the right of (and partially obscuring) each label; and the indispensible Inbox, illustrated below, with a default design that makes it touch harder than it needs to be to read the labels in the message row:

So you’re asking yourself, “Yeah, I love Gmail. But do I have to live with all this blah design and extraneous stuff I don’t really want?” No, my friend, you do not.

The solution for today’s tech challenge is the Stylish add-on for Firefox. The short version is that Stylish enables you to easily change how things look in your Firefox web browser by simply invoking a new set of CSS rules that control the “presentation” or visual design of what you see, including web applications like Gmail. And there are truckloads of Stylish code bits already available for Gmail 2.0.

But it is even better than just loading someone else’s Stylish code. What you can easily do is cherry-pick a design idea or two from any of the many code samples already available and build your own custom Stylish code set. With a nod to ideas and code lifted shamelessly from Gmail: Inbox with new style and GMail Cleaner, plus a few original ideas for changing the look of Gmail labels in the Inbox itself (to make them easier to scan and more readable) and removing the “color-code/edit-label boxes” (so that they no longer obscure the already-too-narrow Labels menu), here’s how I did my own personal, quite modest makeover of the Gmail interface:

• Install Stylish (OK, you already knew that.)
• In Firefox go to Tools > Add-ons > Stylish > Options. That opens the “Manage Styles” dialog. Click on Write.
• Give your style a memorable name by typing it into the “Description” field. (“I Love Webdogs 2.0″ has a nice ring to it, but it’s your call.)
• Cut-and-paste (or download) the code below, put it into the large edit field below the “Insert” button and then click “Save.”

/*
Stylish code based in part on code and ideas from
"Gmail: Inbox with new style"

http://userstyles.org/styles/678

and "GMail Cleaner"

http://userstyles.org/styles/4118

 */

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("mail.google.com")
{

/* remove web search button */
button[id="1fbh"] {display:none !important;}

/* create hover "row" effect for message lists */
table.N2mZ7b tr:hover,
table.tlc tr.rr:hover { background-color:#FFEB86 !important; }
table.N2mZ7b tr.rfza3e:hover,
table.tlc tr.ur:hover { background-color:#CDF39F !important; }

/* restyle how Labels display in message lists */
span.s75Nkf b { background-color:transparent !important; border-color:#C0C0C0 !important; }

/* remove "color-code/edit-label" boxes */
div.qn0D4e b b { display:none !important; }
td.BFvfre { display:none !important; }

}

What does this get you?

• You now have only one “Search Mail” button. The “Search Web” button is gone.
• When you hover your mouse over a message, the whole message row is now highlighted. Can you say, “Easier to scan and click”?
• The Label names still have a low-contrast appearance but the font and border style are easier to scan, plus the backgrounds of the labels are transparent. Can you say, “Easier to read”?
• The “color-code/edit-labels” boxes are gone, revealing more of the Labels menu. Can you say, “Well, OK, maybe I like that, maybe I don’t. I’ll get back to you.”

Don’t like something? Just remove or edit the offending CSS code. But you get the idea: Play with other folk’s Stylish code by installing any number of Gmail styles to get some useful ideas of what you like and then what you really want. Then cut-and-paste and recode and add code as suits you and create your own master Stylish code set.

To coin a phrase, “It’s all good.”

As a coda to last week’s post about turning on Gmail 2.0 for Google Apps, it is worth noting that doing so will effectively kill some Firefox add-ons that you may be accustomed to using to spiff up the appearance of your Gmail interface, including some commonly used Greasemonkey Gmail scripts and popular Userstyles.org Gmail scripts that rely on Stylish. You should update those, as needed.

For LSNC perhaps the biggest deal is having a solution for mailto links, so that the Gmail 2.0 “Compose Mail” page opens whenever the user clicks on a mailto link.

One of the easiest solutions to this dilemma is to have users install the Better Gmail 2.0 Firefox add-on.

To get the “Compose mailto Links in Gmail” feature to work with your Google Apps domain, click on the “Advanced” button in the Better Gmail 2.0 console and then simply add your domain. Problem solved. Well, for the most part. Once set, if the user has Firefox open and is already logged into Gmail, whenever the user clicks on a mailto link it will open to the Gmail Compose Mail page. If not logged into Gmail, clicking the link will trigger Gmail opening to its default Inbox page. Hey, but no harm, no foul.

With the Better Gmail 2.0 add-on you also get several other useful options, including a very helpful “Attachment Icons” display that substitutes file-type specific icons for the Gmail default paper clip icon. Useful stuff.

As I recall it, the problem started with Firefox 2.0.0.3. If I didn’t already have Firefox open and clicked on a Windows shortcut to a web location, I would get an error message like this:

The odd thing is that, despite what the message says, if you wait a bit the page eventually loads into the browser. The Firefox folks are aware of the problem but haven’t yet fixed this particular bug. But there is a fix although it is a bit cumbersome: Windows error opening Internet shortcut or local HTML file. Per that article, there are a couple of ways to deal with the bug, but I took the path of least resistance and went directly into the registry settings and deleted the four “ddexec” registry keys referenced in the article. It works.

Second annoyance:

This problem is about getting a Firefox add-on (née extension) that works in Firefox 1.5.x but hasn’t been updated so it works in the current Firefox 2.x. Actually it is unfair to call this an “annoyance” since that implies this is Firefox’s fault. It is not. If an add-on doesn’t work, it is up to the developer of the extension to fix it, not Firefox. And in general most Firefox add-ons I use have been in quick order updated to work with the latest versions of Firefox, but occasionally some are not. What’s a wizened Webdog to do?

The answer is to install Nightly Tester Tools, an add-on that makes old version extensions functionally compatible with current versions of Firefox. Once you install Nightly Tester, you’ll see a new option at the bottom of the add-on dialog window:

Click on “Make all compatible” and then close/restart Firefox and most, if not all out-of-date add-ons should work just fine.

That said, one more thing: While the Nightly Tester add-on is active, it triggers a “build” number reference in the title bar of the Firefox browser, as illustrated here:

If that annoys you, just disable Nightly Tester and the build number disappears.

Here are a few additional Firefox/Greasemonkey/Gmail goodies we are currently promoting for use by LSNC advocates:

DragDropUpload – one of the limitations of the default Gmail setup is that you have to use the browse file dialog, one file at a time, to add multiple file attachments to your Gmail message. But the DragDropUpload extension eliminates all that inefficiency. Install it and you can just drag-n-drop all your files in one fell swoop on top of the “Attach a file” link and BAM! you are good to go! This is absolutely a must-have Firefox extension if you use Gmail.

Wouldn’t it be handy if you could “save” specific types of searches of your Gmail content? Turns out you can. Install Greasemonkey and then saunter over to the Gmail-Greasemonkey page at Google Code, where you’ll find several Gmail goodies including the Saved Searches script. Install it and your Gmail account will automatically save your Gmail searches for you. Comes with a couple of handy dandy “saved searches” already set up for you including “Attachments” and “Last Week.” Killer.

You would not be the first person to grumble, “Yeah, I love how Gmail works but, whew, is it ever butt ugly!” That’s being a bit harsh, I think, but if you are needin’ some serious Gmail beautification, there are plenty of options out there. For starters you could install the Stylish Firefox extension (think of it as a Greasemonkey alternative) and then go wallow in all the UserStyle.org Gmail extensions. Need to hide the ads in Gmail? Want a cooler look to your left-side navigation and list of labels? Think the Inbox is way overdo for a makeover? It’s all there for you. And if you’re motiviated, dig into the scripts for each of the individual extensions and tweak the CSS code to make the colors your own. Sweet.