The Solution

Thanks to G Trapani of http://lifehacker.com, who has modified the script to include the necessary images within the script. The modified version of the script is now available at http://userscripts.org/scripts/show/7646. So download it and continue enjoying super clean!

I apologize for the inconvenience caused due to the bandwidth limit issue. I’ll be releasing a new and improved version of this skin in a couple of months though.

Here’s the list (more bugs? comment away!)

1. Search field: I think on some old versions of Greasemonkey, the search field is very long.
2. Reply formating: while replying to a mail using the “reply” button, the formating options wont be visible, i.e. options like font colors, highlights are functional but the colors menu is not visible.
3. Reply drop-down menu: The drop down menu with reply, reply to all etc options was initially hidden for the sake of simplicity, but quite a few people have requested to get this back. This can actually be done by tweaking the code a bit, there’s this small fragment in the code that says “visibility:hidden” just delete it and your reply button will be back. But i don’t recommend this, wait for the new version of GSC.
4. A horizontal scrollbar appears below the sender’s details when the sender’s email address is very long.
5. Text may overlap at a few places if your screen width is below 600 pixels or so.

The Header Section

Here we specify the meta data of the script such as name, author info, description etc. The important stuff here is the “@include” which specify the URLs for which this script will be executed. There’s nothing you would want to change, if you intend to customize this skin.

// ==UserScript==
// @name           Gmail Super Clean
// @description    Cleans up Gmail. Adds Shine & Gloss.
// @author         Ganesh Rao
// @include        http://mail.google.com/*
// @include        https://mail.google.com/*
// @include        http://*.mail.google.com/*
// @include        https://*.mail.google.com/*
// ==/UserScript==

The Body

Here we start the actual Javascript code of the script. I’ll Try and explain each of these functions and bits now.

Firstly, the “host” is the URL where I’ve placed all the images that are used by this skin. If you wish, you could place these images on your own system and change this URL accordingly. That would speed up the initial load time a bit (I guess)

var host = 'http://artrulesmyworld.googlepages.com/';

Preferences

Initially, we set the default values of the variables, which will be loaded if the user has not changed the preferences.

//defaults
var customLogoURL = host+'gs_logo.png';
var showCustomLogo = 1;    //gmail will use its default logo when this is set to false
var showAds = 0;
var showBookmarks = 0;
var defaultFont = 'lucida grande';
//set by script

This script makes use of the user script command, so a latest version of Greasemonkey is necessary. If the current version of GM doesn’t support the user command functions, then we alert the user.

Else we go ahead and retireve the user’s preference values using the GM_getValue(‘preferenceName’, variableToValueLoadInto). Next, we register the necessary user script commands using the GM_registerMenuCommand( ‘Menu Caption’, functionName). Each of these functions are defined below.

if (!GM_xmlhttpRequest) {
	alert('Please upgrade to the latest version of Greasemonkey.');
	return;
} else {
	showCustomLogo = Number(GM_getValue('showCustomLogo', showCustomLogo));
	showAds = Number(GM_getValue('showAds', showAds));
	showBookmarks = Number(GM_getValue('showBookmarks', showBookmarks));
	customLogoURL = GM_getValue('customLogoURL', customLogoURL )
	defaultFont = GM_getValue('defaultFont', defaultFont);
	GM_registerMenuCommand((showCustomLogo ? 'Hide' : 'Show') + ' Custom Logo', switchLogo);
	GM_registerMenuCommand((showAds ? 'Hide' : 'Show') + ' Advertisements', switchAds);
	GM_registerMenuCommand((showBookmarks ? 'Hide' : 'Show') + ' Bookmarks', switchBookmarks);
	GM_registerMenuCommand('Change Font (currently: '+defaultFont+')', changeDefaultFont);
	if( showCustomLogo ) { GM_registerMenuCommand('Change Custom Logo URL', getCustomURL); }
	GM_registerMenuCommand('Post GSkin Bug', postBug);
}

Next, we define each of the functions that we attached to the menu. These functions determine what happens when the user clicks on the user script command menus. The logic for each of these functions is quite simple, first, we accept the new value for the preference using javascript prompt, then we copy that value into the preference variable using GM_setValue(‘preferenceName’, newValueLoadInto) and then we refresh the page so that the changes become visible.

function changeDefaultFont() {
	//accept new font name
	defaultFont = prompt('Enter Font-Family Name ex. Arial, Verdana, Tahoma etc', defaultFont);
	//set preference value
	GM_setValue('defaultFont', defaultFont );
	//refresh the page
	window.location.href = window.location.href;
}
function postBug() {
	emailTo = 'xxx@gmail.com';
	emailCC = 'xxx@gmail.com';
	emailSubject = 'GSkin Bug';
	emailBody = '';
	mailLink = "https://mail.google.com/mail?view=cm&tf=0" +
		(emailTo ? ("&to=" + emailTo) : "") +
		(emailCC ? ("&cc=" + emailCC) : "") +
		(emailSubject ? ("&su=" + emailSubject) : "") +
		(emailBody ? ("&body=" + emailBody) : "");
	window.open(mailLink);
}
function switchBookmarks(){
	GM_setValue('showBookmarks', showBookmarks ? 0 : 1 );
	window.location.href = window.location.href; //refresh page
}
function switchLogo(){
	GM_setValue('showCustomLogo', showCustomLogo ? 0 : 1 );
	window.location.href = window.location.href; //refresh page
}
function switchAds(){
	GM_setValue('showAds', showAds ? 0 : 1 );
	window.location.href = window.location.href; //refresh page
}
function getCustomURL() {
	url = prompt('Custom Logo Image URL',customLogoURL);
	GM_setValue('customLogoURL', url);
	window.location.href = window.location.href; //refresh page
}

The CSS

Finally, we add the css to the script. We do this using the DOM createElement and appendChild function, a standard GM technique. Here’s a great tutorial on creating DOM elements and accessing them. The variable css holds the css styles that you want to apply for the skin (I will be discussing this soon in another article).

var css = '/*your css code*/';

First, we initialize the css style node.

var header = document.getElementsByTagName('head');
var node = document.createElement('style');
node.type = 'text/css';
node.innerHTML = css;

Then, we append this node into the header section of the HTML file.

if(header)header[0].appendChild(node);

And we’re done!

1. Mozilla Firefox Internet Browser available for free download at www.mozilla.org
2. Greasemonkey plugin for Firefox available for download at http://www.greasespot.net/
3. After you have installed the plugin, go here and click on install script.

For more info, here’s a better guide on installing scripts using Greasemonkey.

The font

The default font “Lucida Grande”, a beautiful Mac fontis available for download here. A better alternative for Windows users is “Lucida Sans”, it looks pretty much like Grande. To change the default login into Gmail and go to Tools > Greasemonkey > User Script Commands > Change Font.

Gmail is an amazing email service, its by far the best email service that I’ve come across. The only thing I’m not happy about Gmail is the way it looks. Google guys have done beautiful stuff like Picasa, but Gmail has remained pretty much the same. So, I made “Gmail Super Clean” a simple little skin for Gmail, using Greasemonkey.

The Skin

Gmail Super Clean was made to simplify the way Gmail looks. It’s got quite a few customization options. You can change the logo, fonts, show/hide ads etc using the User script commands on Greasemonkey. I posted this script on userscripts.org, and I’m happy to see that the script has had more than 25,000 installs there (thanks people ). Besides I’ve been getting quite a lot of emails suggesting ideas/bugs and tips to improve this skin. So, I made this blog is dedicated to this skin, and I’ll try to keep it updated and improve it. If you have comments or new ideas for this skin or bug reports then please do post it here, and I’ll try my best to do something about it.

You can download the Gmail Super Clean script here