Chapter 4: Skinning Gmail

Being a web-based application, and written by people who understand modern practices, Gmail is skinnable using a user-side CSS file. This chapter analyzes Gmail’s HTML layout, and shows you how to create and use CSS files that will give the application a whole new look. It won’t change the way that Gmail works, only the way it looks, but you will learn a lot about the way Gmail has been built: knowledge that will prove invaluable in the following chapters. Besides, it’s really cool

EMail Hacking Mar 18, 2023 0 185 Add to Reading List

Deconstructing Gmail

In order to pack most of its functionality into a browser-side
application, Gmail employs an extremely complex page structure.
It does use CSS very heavily, happily making the styling of the
page quite simple once you understand the names of the elements, but it also consists of at least nine iframes inside a frameset. To make things worse, much of the markup is dynamically
created by JavaScript, meaning that just viewing the source won’t
help you.
Before you can get onto reskinning Gmail, then, you need to
deconstruct it, and see how it is put together. Only then can you
think about messing around with it.
To do that, you should use the Mozilla Firefox browser (at the
time of this writing version 1.0), and the extremely popular
Web Developer Extension, written by Chris Pederick. These
are both highly recommended, and using them will help you
to follow along at home with the rest of this section. Go to
www.mozilla.org and www.chrispederick.com/work/
firefox/webdeveloper/, respectively, and download the
applications.
˛ Gmail’s layout
˛ The user interface
˛ Changing colors
˛ Changing layout
chapter
in this chapter
09_59611x ch04.qxp 11/28/05 11:12 PM Page 29
30 Part II — Getting Inside Gmail
Once you’ve downloaded the applications, you can start. Figure 4-1 shows my
own Gmail Inbox with a single message inside.
The first thing to do is open up Firefox’s DOM inspector, which tells you what
the browser itself is seeing. Half expanded, it looks like Figure 4-2.
The figure shows you that the application is made up of a single document (obviously), containing a frameset and some markup. That tiny amount of markup,
shown in Figure 4-2 as the NOSCRIPT section, is simply a message that displays
only if you’re trying to look at Gmail with JavaScript turned off, telling you that
you’re out of luck without JavaScript. The frameset is where it’s at. It contains two
frames, the first of which has 12 divs in its body, while the second frame has a
large script element, but nothing of note in the body. Further exploration, not
shown here, will point out that the second frame contains a vast amount of
JavaScript and nothing else. That, as you will see in later chapters, makes up the
real client-side workings of Gmail. For your purposes now, however, you can concentrate on the first frame.
So, working with the first frame, you see it is made up of 12 divs, each with its
own class name, as illustrated in Figure 4-3.
FIGURE 4-1: A simple Gmail Inbox
09_59611x ch04.qxp 11/28/05 11:12 PM Page 30
Chapter 4 — Skinning Gmail 31
FIGURE 4-2: What the DOM
inspector tells you about the Inbox
FIGURE 4-3: The first frame’s structure showing
class names
There’s a great deal going on here, much of which will be revisited over the
course of this book. For now, you need to keep drilling down to the interface itself.
09_59611x ch04.qxp 11/28/05 11:12 PM Page 31
32 Part II — Getting Inside Gmail
To see which of these divs is the mother lode, use the Web Developer Extension
to Firefox to turn off the styling (click on the Disable menu, the first on the left,
and then Disable Styles), outline the block level elements in red, and display
their names. Doing this, you get the horrible Figure 4-4.
It’s very plain from Figure 4-4 that the div called d_tlist2 is the one you’re
really interested in. It’s the one that isn’t empty, which is something of a giveaway.
Using the DOM inspector, you can drill down further. Notice that d_tlist2
contains an iframe, called tlist, and that that iframe, when opened in a new
DOM inspector, looks like Figure 4-5.
You can also see from the DOM inspector that the iframe that makes
up this interface is addressed as follows: http://gmail.google.
com/gmail?search=inbox&view=tl&start=0&init=1&zx=3177c401850460
90895581735.
FIGURE 4-4: Gmail with no styling . . . quite ugly
09_59611x ch04.qxp 11/28/05 11:12 PM Page 32
Chapter 4 — Skinning Gmail 33
FIGURE 4-5: Gmail’s Inbox exposed in
the DOM inspector
Ferret that bit of information away for the moment. It will come in handy.
Meanwhile, back at the browser, you can dump the contents of this page from
the DOM inspector to a text editor. Remember that although this all seems a bit
long-winded, you cannot do it just by using View Source: Most of the markup is
created by JavaScript, and you’ll get to see only some of the JavaScript if you do
that. You needed to use the DOM inspector to get to the actual code that the
browser is rendering and displaying on your screen. Rather than subject you, dear
readers, to the horrors of 14 pages of HTML here, I’ve placed the entire listing in
Appendix A. Before moving on to the style sheet’s nuts and bolts, consider turning to Appendix A and perusing Listing A-1 first.
To make things a bit easier, let me strip out the JavaScript and isolate the style
sheet, tidy the whole thing up a bit, and walk through the document showing you
what each section does. From the top, then.

The Top Section

[email protected] | Settings | Help | Sign out

09_59611x ch04.qxp 11/28/05 11:12 PM Page 34 Chapter 4 — Skinning Gmail 35

Show search options

Create a filter

As you can see, the HTML uses tables, divs, and spans, and takes its styling from both the style sheet and some inline styling as well. This means that you must forcibly override some of their styling using the !important modifier. More on that in a few pages. So, going from left to right, the Gmail logo is marked up with a div with an id of ds_inbox and a class of h. Looking in the style sheet, notice that this class merely changes the shape of your mouse pointer when you mouse over it. No styling there as such, but plenty of opportunity to remove the Gmail logo and add your own. Moving over, my e-mail address and the links to the Settings, Help, and Sign Out buttons are all contained within an unnamed div, with a class of s. From the style sheet, you can see that s simply sets the font size to 80 percent. So there’s scope here for styling, but not specifically this section. Nor can you really move it around. That row is the top half of a table. The bottom half of the table has another table nesting inside it (and another nesting inside that one, as you shall see). The outermost of those tables is split in two, with the left-hand side containing the search form, and the right-hand side containing the innermost table, which splits it into two rows. The top row, a span called mt_adv, acts as a link, showing the search options. The cunning way in which this JavaScript works is dealt with in Chapter 5. The bottom row is another span called mt_cf1, which opens the filter creation box. After that, the code closes the table and the surrounding div.

The Navigation Menu

After two divs with no content, we come to the div called nav, which contains the entire navigation menu from the left of the screen, as in Figure 4-7. 09_59611x ch04.qxp 11/28/05 11:12 PM Page 35 36 Part II — Getting Inside Gmail FIGURE 4-7: The Gmail navigation menu The code that produces this import part of the page is here, in Listing 4-2. Listing 4-2: The HTML That Produces the Gmail Navigation Menu

Compose Mail


	Inbox (1)

Starred

09_59611x ch04.qxp 11/28/05 11:12 PM Page 36 Chapter 4 — Skinning Gmail 37

Sent Mail

Drafts

All Mail

Spam

Trash

Contacts

Labels

Edit labels

Invite 4 friends
to Gmail

09_59611x ch04.qxp 11/28/05 11:12 PM Page 37 38 Part II — Getting Inside Gmail You’ll notice when you read through this code that what look like links (the Inbox, Starred, Sent Mail, and so on) actually aren’t. They’re just plain text wrapped in spans that provide just enough styling to make them look like links: They’re underlined, the mouse pointer changes, and so on. This is just another symptom of how cunning the Gmail application is. I’ll be explaining all of this in Chapter 5. Just so you know. The styling is simple here. After the Compose Message link (that’s not, as I just said, a link in the sense of but rather just the plain text styled up to look like one), there’s a table containing only the Inbox link and new mail count and then a succession of divs with class nl, containing spans with each of the menu options. Then there’s another non-link link to the Contacts functionality, and another table used to produce the label box. With labels defined, as you will see later, this table has more content. Finally, after the table, is a div called il containing the invitation link. (My bet is that il stands for Invitation Link, but ignorance of such things is the mark of the reverse engineer.) As you will have noticed by now, Gmail is built with very small names for all of the divs and spans. This is also true of the JavaScript functions covered in the next chapter. This is because Gmail is serving these pages millions of times a day, and the bandwidth saved by dropping everything down to one- or two-letter variable names is well worth the obfuscation. Onward, then, to the real meat of the page

The Activity Area

Right in the middle of the page, surrounded with a blue border, is what I’ll call the central activity area. It’s in this section that the majority of your work within Gmail is done: writing and reading mail, for example. It looks like Figure 4-8. FIGURE 4-8: The central activity area 09_59611x ch04.qxp 11/28/05 11:12 PM Page 38 Chapter 4 — Skinning Gmail 39 The central activity area is controlled by the code in Listing 4-3. Listing 4-3: The Central Activity Area in HTML

	Refresh	1 - 1 of 1
	Select: All , Read , Unread , Starred , Unstarred , None

09_59611x ch04.qxp 11/28/05 11:12 PM Page 40 Chapter 4 — Skinning Gmail 41


	Select: All , Read , Unread , Starred , Unstarred , None

		1 - 1 of 1

This code is also quite complicated, but working through it is just a matter of looking through the code for the class and id attributes and noting the tables in the middle. By now, you should be quite good at this, so you won’t do that here. The next section, after all, provides a map of all of the classes and ids you need

The Bottom Section

Now we come to the last remaining section of the Gmail screen: the bottom of the screen, as shown in Figure 4-9. Again, the drudgework is left out here; you see only the code. In the tradition of software textbooks, the figuring out of the names of the divs and spans within the bottom section is left as an exercise to the reader. Listing 4-4 shows you the code if you want to do this, or you can skip past Listing 4-4 to Figure 4-10, which outlines the whole page’s structure in CSS. FIGURE 4-9: The bottom section of the screen 09_59611x ch04.qxp 11/28/05 11:12 PM Page 42 Chapter 4 — Skinning Gmail 43 Listing 4-4: The Bottom Section of the Screen in HTML

Use the search box or search options to find messages quickly!

You are currently using 0 MB (0%) of your 1000 MB.

Applying a New Style

Now that you’ve slogged your way through the structure of the Gmail markup,
you can use this knowledge to give the application a new look. First, however, you
will need to install another extension to Firefox. You need the URIid extension
written by Chris Neale, found at http://extensionroom.mozdev.org/moreinfo/uriid.
Once that is installed, go to your Profile folder. With Firefox, which is the browser
I’m recommending for this chapter, the location of the Profile folder changes per
operating system. Look at www.mozilla.org/support/firefox/edit.
html#profile for the official reference. Once inside the Profile folder, you will be
adding the CSS you are about to write to the userContent.css file inside the
chrome subdirectory.
Open the userContent-example.css file, and rename it as userContent.css.
You can now add any CSS you like, and have it affect the pages you are applying
them to. You differentiate between the sites you want it to act upon by appending
the base URL as a class. For example, to apply styles to Gmail, the ID gmailgoogle-com will be added to the body. The style sheet can then use the
#gmail-google-com selector to apply styles only to that site. Once the CSS
file is saved, restart Firefox, and your styles will take hold

Creating Gmail Lite

During the course of my working day, I spend most of my time looking at my
computer’s screen. After a while, I yearn for calmer pages, with less to focus on.
As I use Gmail a lot of the time, it’s good to use the knowledge worked out in the
preceding text to restyle the page into something easier to look at after a hard day.
Figure 4-10 shows this newly styled Gmail, Gmail Lite.
09_59611x ch04.qxp 11/28/05 11:12 PM Page 44
Chapter 4 — Skinning Gmail 45
FIGURE 4-10: Gmail Lite
As you can see, it’s a much simpler page layout, with no images, a muted color
scheme, and without the labels, invitation link, and other superfluous material that
just irritates after a day’s writing. It’s a minimalist Gmail whose styles are covered
in the next section

Walking Through the Style Sheet

The effects you see in Figure 4-10 are simple to achieve with a style sheet, and
certainly much more impressive ones can be achieved by someone with more
design skill than myself.
Begin with the following CSS:
body#gmail-google-com {
background-color: #ffffff !important;
}
body#gmail-google-com img{
display: none !important;
}
/* regular links */
09_59611x ch04.qxp 11/28/05 11:12 PM Page 45
46 Part II — Getting Inside Gmail
body#gmail-google-com span.lk,
body#gmail-google-com a.lc,
body#gmail-google-com a.lk
{
text-decoration: none !important;
color: #191b4c !important;
}
/* The Search Form */
body#gmail-google-com div#mt1 form{
display: none !important;
}
body#gmail-google-com div#mt1 table{
display: none !important;
}
This code starts by declaring the background color of the whole page to be white,
and then turning off any images by setting them to display:none. This CSS
command is extremely useful for stripping sites of dullness, as you can see, after
the section giving the links and pseudo-links on the page a nice dark blue color.
From the previous section, you already know that the Gmail logo and the search
box are held in a table and a form, inside a div called mt1. By setting both of these
to display:none, you remove them entirely.
The next section of CSS is as follows:
/*------------------------------------------------------------
*/
/*The Navigation Menu */
body#gmail-google-com span#comp {
font-family: cursive;
}
/* sidebar links */
body#gmail-google-com div#nav table.cv,
body#gmail-google-com div#nav table.cv td {
background: #ffffff !important;
}
body#gmail-google-com table.cv td.tl,
body#gmail-google-com table.cv td.bl {
height: 0 !important;
09_59611x ch04.qxp 11/28/05 11:12 PM Page 46
Chapter 4 — Skinning Gmail 47
}
/* both current and other */
body#gmail-google-com table.cv td span.lk,
body#gmail-google-com div.nl span.lk{
display: block !important;
background: #ffffff !important;
color: #191b4c;
border: none !important;
padding: 2px !important;
margin-right: 5px !important;
}
/* Override the background color for the unselected options*/
body#gmail-google-com div.nl span.lk {
background: #ffffff !important;
border: none !important;
}
/* For the mouse-over color change */
body#gmail-google-com div.nl span.lk:hover {
background: #d3cbb8 !important;
border-color: #fef759 !important;
}
/* hide “New!” super-script */
body#gmail-google-com div#nav sup {
display: none !important;
}
/* remove the colored left border of the inbox */
body#gmail-google-com div#co div {
border: 0 !important;
}
/*-------------------------------------------------------*/
This section of the CSS file deals with the navigation sidebar. It did look like
Figure 4-7, but now it’s a great deal simpler. The link color change at the top of
the CSS takes care of the color, so the first thing you do is restyle the font for
the Compose Mail link. You know that this has an id of comp, so you set the
font-family: cursive. This will, in compatible browsers, choose the default
cursive typeface.
Next you override the background colors and borders of the menu items and
finally remove the light blue edge of the application area that stretches from the
09_59611x ch04.qxp 11/28/05 11:12 PM Page 47
48 Part II — Getting Inside Gmail
active menu option in the normal view. It’s much simpler now. Having manipulated these elements, consider this CSS:
/* labels */
body#gmail-google-com div#nb_0 {
display: none !important;
}
/* The Invitation Link */
body#gmail-google-com #il {
display: none !important;
}
/* The footer */
body#gmail-google-com div#ft {
display: none !important;
}
These three short sections turn off the labels, the invitation link, and the whole
footer section. We’re almost Zen-like now. Final stop: the application area:
/*------------------------------------------------------------
*/
/* THE APPLICATION AREA */
/* top bar */
body#gmail-google-com div#tc_top table,
body#gmail-google-com div#tc_top table td.tl,
body#gmail-google-com div#tc_top table td.tr,
body#gmail-google-com div#tc_top table.th,{
background: #ffffff !important;
border: none !important;
padding: 2px !important;
margin: 5px 0 5px 0 !important;
}
/* bottom bar*/
body#gmail-google-com div#tc_bot table,
body#gmail-google-com div#tc_bot table td.bl,
body#gmail-google-com div#tc_bot table td.br,
body#gmail-google-com div#tc_bot table.th{
display: none !important;
}
/* selection links in bar */
body#gmail-google-com div#co div#tc_top span.l{
color: #191b4c !important;
}
09_59611x ch04.qxp 11/28/05 11:12 PM Page 48
Chapter 4 — Skinning Gmail 49
/* mailbox contents */
body#gmail-google-com div#co div#tbd {
background: #ffffff !important;
border: none !important;
padding: 4px 0 4px 0 !important;
}
/* unread mail row inside the inbox */
body#gmail-google-com table.tlc tr.ur {
background-color: #d7d7d7 !important;
height: 30px;
}
/*read mail row inside the inbox */
body#gmail-google-com table.tlc tr.rr {
background-color: #ffffff !important;
}
body#gmail-google-com table.tlc tr.ur td,
body#gmail-google-com table.tlc tr.rr td{
border: 0 !important;
}
/* message hovering snippet expansion */
body#gmail-google-com table.tlc tr.ur:hover,
body#gmail-google-com table.tlc tr.rr:hover{
background-color: #ffffff !important;
}
body#gmail-google-com table.tlc tr.ur:hover td,
body#gmail-google-com table.tlc tr.rr:hover td{
border: none !important;
vertical-align: top !important;
}
body#gmail-google-com table.tlc tr.ur:hover .sn,
body#gmail-google-com table.tlc tr.rr:hover .sn{
display: block !important;
white-space: normal !important;
}
/* and email address display */
body#gmail-google-com table.tlc tr.ur:hover td span,
body#gmail-google-com table.tlc tr.rr:hover td span {
display: block; !important;
color: #ff0000;
}
/* labels should still be inline */
09_59611x ch04.qxp 11/28/05 11:12 PM Page 49
50 Part II — Getting Inside Gmail
body#gmail-google-com table.tlc tr.ur:hover td span.ct,
body#gmail-google-com table.tlc tr.rr:hover td span.ct{
display: inline;
}
body#gmail-google-com table.tlc tr.ur:hover td span[id]:after,
body#gmail-google-com table.tlc tr.rr:hover td span[id]:after{
content: attr(id);
display: block;
margin-left: -38px; /* hack to hide “user_” id prefix */
color: #b6af9e;
}
/*-----------------------------------------------------------
*/
The first thing to notice is that you turned off the bottom button bar. There’s no
need to have two, and you have one at the top already. Then you recolor the links
within the top bar.
The next section colors the background of the application white and removes the
solid borders. Then you have two bits of CSS: You define the background color of
the rows for each message within the mailbox that is being viewed. Within the
Inbox, these lines of CSS put a gray background behind unread mail, and a white
background behind read mail (see Figure 4-11).
FIGURE 4-11: The new style sheet applied
09_59611x ch04.qxp 11/28/05 11:12 PM Page 50
Chapter 4 — Skinning Gmail 51
The rest of the code deals with the physical layout of the application area, especially removing the borders. If you want to see the CSS listing in its entirety, flip
to Appendix A and check out Listing A-2.
Thanks for the basis for this style sheet must go to Mihai Parparita, who released
the original underneath the Creative Commons Attribution-ShareAlike license at
http://persistent.info/archives/2004/10/05/gmail-skinning. Now
that you have your new style sheet applied, you can get down to the business of
ridding Gmail of advertising

Removing Google’s Advertising

Gmail is advertising-supported, and Google’s advertising is in no way intrusive,
and can be very useful. But if you’re totally against the concept, and serene within
your soul about the idea of using a service without the quid pro quo, it is entirely
possible to remove the advertising using the techniques in this chapter. The advertising is contained entirely within a div called ad, so the code in Listing 4-5 turns
off advertising.
I do not recommend you use this code to turn off advertising, but I include it
regardless and leave the determination to you.
Listing 4-5: Turning Off Google’s Advertising with CSS
/* Adverts */
body#gmail-google-com div#ad {
display: none !important;

And Now . . .

In this chapter, you explored how Gmail is structured and saw that the entire
interface is loaded into a complex selection of frames. You learned how to change
the styling of this interface, and while doing so saw a lot of the interface code. You
09_59611x ch04.qxp 11/28/05 11:12 PM Page 51
52 Part II — Getting Inside Gmail
should be confident now that Gmail is not an enormously complex and incomprehensible application that instills fear into your heart: It’s just very complex, slightly
incomprehensible, and not at all scary.
So, now you’ve started to delve into Gmail’s workings. The next chapter moves
beyond the surface and shows you how your browser communicates with the
Gmail server, how the interface is put together, and how Gmail actually works.
You’ll be using many of the same techniques as you did in this chapter but to a
much greater depth. Put the kettle on, make some coffee, and let’s go.