Skinning Gmail with a Custom Stylesheet

Short Version Install the URLid Mozilla/Firefox extension. Download this CSS file. Locate your profile folder and the chrome folder within that. Copy the downloaded CSS file to the chrome folder and rename it to userContent.css (if you already have such a file, you will have to merge the two). Restart Firefox. Visit Gmail. Gmail meets […]

Short Version

  • Install the URLid Mozilla/Firefox extension.
  • Download this CSS file.
  • Locate your profile folder and the chrome folder within that.
  • Copy the downloaded CSS file to the chrome folder and rename it to userContent.css (if you already have such a file, you will have to merge the two).
  • Restart Firefox.
  • Visit Gmail.

Gmail meets The CSS Zen Garden

Click to enlargeOne advantage of getting on the CSS/XHTML bandwagon (i.e. not just standards-compliant design, but truly separating markup from presentation) is that different style sheets can be swapped in, totally modifying the appearance of a site, without requiring any tag-level changes at all. This has been demonstrated to great effect in the CSS Zen Garden, and can be seen from time to time in the form of style sheet switchers on sites. However, even if a site's designer doesn't deem to provide alternate stylesheets, most modern browsers support client stylesheets that can override the appearance. Most of the time these are used for little tweaks such as hiding ads from common providers or disabling link underlining in browsers that do not specifically have such a feature (Safari).

However, there is nothing stopping one from going all out with client stylesheets and completely revamping the appearance of a site to suite one's aesthetic sense (or lack thereof). To this effect, I have made a stylesheet that is designed to override the appearance of Gmail, not necessarily because I think my take on the UI is that much better, but because I wanted to show that it could be done.

One traditional limitation of client stylesheets is that they are applied to all sites indiscriminately, making it difficult to target specific ones. Mozilla 1.8a3 and later do in fact support per-domain CSS rules, but this doesn't help us with my browser of choice, Firefox (starting with version 0.9, Firefox is on a separate branch for stability reasons, and changes such as this one won't be picked up until version 1.1). However we can use the URLid extension, which provides very similar functionality (it assigns the domain of each site as the id attribute of the current page's <body> tag; since all other nodes are children of it, it is easy to restrict rules on a site basis).

The stylesheet itself is nothing special, just a basic makeover with a different color scheme. Its one trick is to leverage Gecko's (decent) support for the :hover pseudo-class and the content attribute to allow a bit more information to be shown about each message when it is moused over in the mailbox view.

When looking at the CSS file, one may wonder how I was able to decipher all of the cryptic two/tree letter CSS class names that Gmail uses. I took a two-pronged approach:

First, I wanted to get a dump of the HTML that Gmail generates, so that I could get a feel for its structure (remember, Gmail generates nearly all its HTML through Javascript, thus a "View Source" command will not reveal much). The DOM Inspector showed that Gmail relies on a few IFRAMES for its different views. Once I had figured out which IFRAME contained the mailbox view, I exported its generated source to the clipboard using a JavaScript one-liner invoked from the location bar: javascript:window.clipboardData.setData('Text', window.frames[0].frames[3].document.body.innerHTML). This step had to be done in IE; while Mozilla also supports copying to the clipboard, the code to do so is much longer. The extracted source could then be pasted into a file, run through HTML Tidy (for easier reading) and examined.

For on-the-spot examinations of the DOM hierarchy and for checking to see which styles were being applied, I used the always-handy Web Developer Extension. The extension also had the added benefit of allowing me to modify and reapply the stylesheet without restarting Firefox via the "Apply User Style Sheet..." command from the "CSS" button.

Writing the actual stylesheet was somewhat tedious since the code is somewhat convoluted, unlike the academic-like cleanness of the CSS Zen Garden markup. Styles are sometimes inlined, thus one is compelled to use the !important value in order to override them. Of course, once you start using that for your base elements, your child elements have to use it as well, lest their properties be overridden as well. However, the number of hacks was kept to a minimum, and Mozilla-only features such as -moz-border-radius and -moz-opacity made life easier.