Known Issues

April 24, 2007

Well, after having received so many bugs for Super Clean, I thought I better release a known issues post. I still haven’t found time to sit and squash all these bugs, but trust me I’ll do them soon! Till then, please grin and bear!

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.

Understanding the Script

April 22, 2007

The Super Clean Skin is quite simple, and you can edit it yourself with a little knowledge of CSS and Javascript. For a detailed info on how-to create and edit Greasemonkey scripts go to their Dive Into page. This is the first time I’ve written a tutorial like this, so please forgive me this isn’t that good. 🙂

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*
// @include*
// @include        http://**
// @include        https://**
// ==/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 = '';


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

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.');
} 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 = '';
	emailCC = '';
	emailSubject = 'GSkin Bug';
	emailBody = '';
	mailLink = "" +
		(emailTo ? ("&to=" + emailTo) : "") +
		(emailCC ? ("&cc=" + emailCC) : "") +
		(emailSubject ? ("&su=" + emailSubject) : "") +
		(emailBody ? ("&body=" + emailBody) : "");;
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


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.


And we’re done!

The Skin

April 20, 2007

Why Skin Gmail?

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 SkinGmail Super Clean 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, 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