Getting Inside Gmail
So, by now you should be up to speed with actually using
Gmail. It’s time to get a bit dirtier.Time to get under the
hood, so to speak, and fiddle with the application. In this
part, you look at how Gmail works and how to make it work
for you.
First, you look at skinning Gmail in Chapter 4. Making Gmail
look different might seem to be a strange thing to do, but it’s
both fun and educational. The knowledge you pick up there, and
in Chapter 5 where you investigate the JavaScript-ybased workings
of the application, will enable you to fully understand how
Gmail works. In Chapter 6, you learn how Greasemonkey and
Firefox can be used to radically improve your Gmail experience
and to build your own Greasemonkey scripts.
In Chapter 7, you encounter the various programming language
libraries available for use with Gmail, and you start to use them:
writing scripts to check for and read mail (Chapters 8 and 9), and
to send replies (Chapter 10). By the end of that chapter, you’ll be
writing little mini applications that use Gmail as their remote
processing system. Exciting? Oh yes!
Chapter 4
Skinning Gmail
Chapter 5
How Gmail Works
Chapter 6
Gmail and Greasemonkey
Chapter 7
Gmail Libraries
Chapter 8
Checking for Mail
Chapter 9
Reading Mail
Chapter 10
Sending Mail
in this part
part
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.
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
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
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.
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: gmail.google.
com/gmail?search=inbox&view=tl&start=0&init=1&zx=3177c401850460
90895581735.
FIGURE 4-4: Gmail with no styling . . . quite ugly
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
Figure 4-6 shows the top section of the Gmail Inbox, with the table elements artificially
outlined with dotted lines.
FIGURE 4-6: The Gmail Inbox’s top section, showing table elements
34 Part II — Getting Inside Gmail
In the code, the top section of the Inbox is produced by the following HTML,
shown in Listing 4-1.
Listing 4-1: The Top Section of the Gmail Inbox in HTML
<body>
<table width=”100%” cellspacing=”0” cellpadding=”0”>
<tbody>
<tr>
<td width=”149” valign=”top” rowspan=”2”>
<div id=”ds_inbox” style=”padding-top: 1ex;” class=”h”>
<img width=”143” height=”59” src=
“/gmail/help/images/logo.gif”></div></td>
<td valign=”top” align=”right”>
<div class=”s” style=”padding-bottom: 2px; text-align:
right;”>
<b>ben.hammersley@gmail.com</b> | <span id=”prf_g” class=
“lk”>Settings</span> | <a target=”_blank” href=”/support/”
class=”lc” id=”help”>Help</a> | <a target=”_top” onclick=
“return top.js._Main_OnLink(window,this,event)” class=”lk”
href=“?logout”>Sign out</a></div></td></tr>
<tr>
<td valign=”bottom”>
<div class=”s” id=”mt1”>
<table cellspacing=”0” cellpadding=”0”>
<tbody>
<tr>
<td valign=”bottom”>
<form onsubmit=”return top.js._MH_OnSearch(window,0)” style=
“padding-bottom: 5px; white-space: nowrap;” class=”s” id=”s”>
<input value=”” name=”q” maxlength=”2048” size=”28”>
<input type=”submit” value=”Search Mail”>
<input type=”submit” onclick=
“return top.js._MH_OnSearch(window,1)” value=
“Search the Web”> </form></td>
<td>
<table cellspacing=”0” cellpadding=”0” style=
“vertical-align: top; padding-bottom: 4px;”>
<tbody>
<tr>
<td><span id=”mt_adv” style=”font-size: 65%;” class=
“lk”>Show search options</span>
</td></tr>
<tr>
Chapter 4 — Skinning Gmail 35
<td><span id=”mt_cf1” style=”font-size: 65%; vertical-align:
top;”
class=
“lk”>Create a filter</span></td></tr></tbody></table
></td></tr></tbody></table></div>
<div style=
“height: 2.1ex; padding-right: 149px; visibility: hidden;”
class=”nt” id=”nt1”></td></tr></tbody></table>
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.
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
<div style=”padding-bottom: 1px;” id=”mt2”>
<div class=”nt” id=”nt2” style=”display: none;”>
<div id=”nav” style=”position: absolute; left: 1ex; width:
14ex;”>
<div class=”nl”><span id=”comp” class=”lk”><b>Compose
Mail</b></span></div>
<div style=”padding-top: 9px;”>
<table cellspacing=”0” cellpadding=”0” border=”0” style=
“background: rgb(195, 217, 255) none repeat scroll 0%; -mozbackground-
clip: initial; -moz-background-origin: initial;
-moz-background-inline-policy: initial;”
class=”cv”>
<tbody>
<tr height=”2”>
<td width=”8” class=”tl”></tr>
<tr>
<td>
<td><span id=”ds_inbox” class=”lk b”><b>Inbox
(1)</b></span></td></tr>
<tr height=”2”>
<td class=”bl”></tr></tbody></table>
<div class=”nl”><span id=”ds_starred” class=”lk”>Starred
<img width=”13” height=”13” src=
“/gmail/images/star_on_sm_2.gif” id=”_ss”></span></div>
Chapter 4 — Skinning Gmail 37
<div class=”nl”><span id=”ds_sent” class=”lk”>Sent
Mail</span></div>
<div class=”nl”><span id=”ds_drafts”
class=”lk”>Drafts</span></div>
<div class=”nl”><span id=”ds_all” class=”lk”>All
Mail</span></div>
<div class=”nl”><span id=”ds_spam”
class=”lk”>Spam</span></div>
<div class=”nl”><span id=”ds_trash” class=
“lk”>Trash</span></div></div>
<div style=”padding-top: 8px;”>
<div class=”nl”><span id=”cont” class=
“lk”><b>Contacts</b></span></div></div>
<div id=”nb_0” style=”padding-top: 8px;”>
<div style=”width: 95%;”>
<table width=”100%” cellspacing=”0” cellpadding=”0” bgcolor=
“#B5EDBC”>
<tbody>
<tr height=”2”>
<td class=”tl”>
<td class=”tr”></tr></tbody></table>
<div style=
“padding: 0pt 3px 1px; background: rgb(181, 237, 188) none
repeat scroll 0%; -moz-background-clip: initial; -mozbackground-
origin: initial; -moz-background-inline-policy:
initial;”>
<div id=”nt_0” class=”s h”><img width=”11” height=”11” src=
“/gmail/images/opentriangle.gif”> Labels</div>
<table cellspacing=”2” class=”nb”>
<tbody>
<tr>
<td>
<div align=”right” id=”prf_l” class=”lk cs”>
Edit labels</div></td></tr></tbody></table></div>
<table width=”100%” cellspacing=”0” cellpadding=”0” bgcolor=
“#B5EDBC”>
<tbody>
<tr height=”2”>
<td class=”bl”>
<td class=”br”></tr></tbody></table></div></div>
<div id=”nb_2” style=”padding-top: 7px;”>
<div style=”padding-top: 7px;” class=”s”><span style=
“color: rgb(170, 0, 0);” class=”ilc” id=”il”>Invite 4
friends<br>
to Gmail</span> </div></div>
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 <a href=””></a> 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
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
<div style=”margin-left: 14ex;” id=”co”>
<div id=”tc_top”>
<table width=”100%” cellspacing=”0” cellpadding=”0” bgcolor=
“#C3D9FF”>
<tbody>
<tr height=”2”>
<td class=”tl”>
<td class=”tr”></tr></tbody></table>
<table width=”100%” cellspacing=”0” cellpadding=”0” style=
“background: rgb(195, 217, 255) none repeat scroll 0%; -mozbackground-
clip: initial; -moz-background-origin: initial;
-moz-background-inline-policy: initial;”
class=”th”>
<tbody>
<tr>
<td width=”8”>
<td><button style=”font-weight: bold;” id=”ac_rc_^i”
class=”ab”
type=”button”>Archive</button> <button style=
“width: 8em; text-align: center;” id=”ac_sp” class=”ab”
type=”button”>Report Spam</button> <select
id=
“tamu” onchange=
“top.js._TL_OnActionMenuChange(window,this)” onfocus=
“return
top.js._TL_MaybeUpdateActionMenus(window,this)”
onmouseover=
“return
top.js._TL_MaybeUpdateActionMenus(window,this)”
style=”vertical-align: middle;”>
<option style=”color: rgb(119, 119, 119);” id=”mac”>More
Actions
...</option>
<option style=”color: rgb(119, 119, 119);” disabled id=”nil”>
--------</option>
<option style=”color: rgb(119, 119, 119);” disabled
id=”al”>Apply
label:</option>
<option value=”new”> New
label...</option></select> <span id=”refresh”
class=”lk”>Refresh</span></td>
<td align=”right”> <span style=
Continued
40 Part II — Getting Inside Gmail
Listing 4-3 (continued)
“white-space: nowrap;”><b>1</b> - <b>1</b> of
<b>1</b></span></td>
<td width=”4”></tr>
<tr>
<td>
<td valign=”bottom” style=”padding-top: 3px;”
colspan=”2”>Select:
<span id=”sl_a” class=”l”>All</span> , <span id=”sl_r” class=
“l”>Read</span> , <span id=”sl_u” class=”l”>Unread</span> ,
<span id=”sl_s” class=”l”>Starred</span> , <span id=”sl_t”
class=”l”>Unstarred</span> , <span id=”sl_n” class=
“l”>None</span></td></tr>
<tr height=”3”>
<td></tr></tbody></table></div>
<div style=”border-left: 9px solid rgb(195, 217, 255);”>
<div id=”tbd”>
<form target=”hist” method=”post” name=”af” action=
“/gmail?search=inbox&view=tl&start=0”><input
type=”hidden”
name=”act”> <input type=”hidden” name=”at”> <input
type=”hidden”
name=”vp”>
<table width=”100%” cellspacing=”0” cellpadding=”1” id=”tb”
class=”tlc”>
<col style=”width: 31px; text-align: right;”>
<col style=”width: 20px;”>
<col style=”width: 24ex;”>
<col style=”width: 2ex;”>
<col>
<col style=”width: 17px;”>
<col style=”width: 8ex;”>
<tbody>
<tr id=”w_0” class=”ur”>
<td align=”right”><input type=”checkbox”></td>
<td><img src=”/gmail/images/star_off_2.gif”></td>
<td><span id=”_user_ben@benhammersley.com”><b>Ben
Hammersley</b></span> (2)</td>
<td> </td>
<td><b>Skinning Gmail? That’s so cool!</b> <span class=”p”>-
BEGIN
PGP SIGNED MESSAGE-- Hash: SHA1 la la la --BEGIN PGP
SIGNATURE--
Version: GnuPG v1 …</span></td>
<td> </td>
<td><b>2:29pm</b></td></tr></tbody></table></form>
Chapter 4 — Skinning Gmail 41
<div style=”padding: 0pt 20px;” class=”s c”><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br></div></div></div>
<img width=”9” height=”11” src=”/gmail/images/chevron.gif”
style=”position: absolute; display: none;” id=”ar”>
<div id=”tc_bot”>
<table width=”100%” cellspacing=”0” cellpadding=”0” style=
“background: rgb(195, 217, 255) none repeat scroll 0%; -mozbackground-
clip: initial; -moz-background-origin: initial;
-moz-background-inline-policy: initial;”
class=”th”>
<tbody>
<tr height=”2”>
<td></tr>
<tr>
<td width=”8”>
<td>Select: <span id=”sl_a” class=”l”>All</span> , <span
id=”sl_r”
class=”l”>Read</span> , <span id=”sl_u”
class=”l”>Unread</span> ,
<span id=”sl_s” class=”l”>Starred</span> , <span id=”sl_t”
class=”l”>Unstarred</span> , <span id=”sl_n” class=
“l”>None</span></td></tr>
<tr height=”4”>
<td></tr>
<tr>
<td>
<td><button style=”font-weight: bold;” id=”ac_rc_^i”
class=”ab”
type=”button”>Archive</button> <button style=
“width: 8em; text-align: center;” id=”ac_sp” class=”ab”
type=”button”>Report Spam</button> <select
id=
“bamu” onchange=
“top.js._TL_OnActionMenuChange(window,this)” onfocus=
“return
top.js._TL_MaybeUpdateActionMenus(window,this)”
onmouseover=
“return
top.js._TL_MaybeUpdateActionMenus(window,this)”
style=”vertical-align: middle;”>
<option style=”color: rgb(119, 119, 119);” id=”mac”>More
Actions
Continued
42 Part II — Getting Inside Gmail
Listing 4-3 (continued)
...</option>
<option style=”color: rgb(119, 119, 119);” disabled id=”nil”>
--------</option>
<option style=”color: rgb(119, 119, 119);” disabled
id=”al”>Apply
label:</option>
<option value=”new”> New
label...</option></select></td>
<td align=”right”><span style=”white-space: nowrap;”><b>1</b>
-
<b>1</b> of <b>1</b></span></td>
<td width=”4”></tr></tbody></table>
<table width=”100%” cellspacing=”0” cellpadding=”0” bgcolor=
“#C3D9FF”>
<tbody>
<tr height=”2”>
<td class=”bl”>
<td class=”br”></tr></tbody></table></div></div>
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
Chapter 4 — Skinning Gmail 43
Listing 4-4: The Bottom Section of the Screen in HTML
<div style=”padding: 0ex 14ex;” id=”ft”>
<div style=”margin-top: 20px;” class=”c s”>Use the <span
id=”fsb”
style=
“color: rgb(0, 0, 204); text-decoration: underline; cursor:
pointer; white-space: nowrap;”>
search</span> box or <span id=”mt_adv” style=
“color: rgb(0, 0, 204); text-decoration: underline; cursor:
pointer; white-space: nowrap;”>
search options</span> to find messages quickly!</div>
<div style=”margin-top: 12px; color: rgb(0, 102, 51);” class=
“c s b”>You are currently using 0 MB (0%) of your 1000
MB.</div>
<div style=”margin-top: 4px;” class=”c xs”>
<div><a href=”/gmail/help/terms_of_use.html” target=”_blank”
class=”lc”>Terms of Use</a> - <a href=
“/gmail/help/privacy.html” target=”_blank” class=
“lc”>Privacy Policy</a> - <a href=
“/gmail/help/program_policies.html” target=”_blank” class=
“lc”>Program Policies</a> - <a href=
“http://www.google.com/” target=”_blank” class=”lc” id=
“googh”>Google Home</a></div>
<div style=”color: rgb(68, 68, 68); margin-top: 4px;”>
©2004 Google</div></div></div>
<script type=”text/javascript”>
var fp=’9cf0974955f546da’;
</script><script type=”text/javascript”>
var loaded=true;D([‘e’]);
</script><script type=”text/javascript”>
try{top.js.L(window,45,’f4ba224ac4’);}
catch(e){}
</script>
<div id=”tip” style=
“border-style: outset; border-width: 1px; padding: 2px;
background: rgb(255, 255, 221) none repeat scroll 0%;
position: absolute; -moz-background-clip: initial; -mozbackground-
origin: initial; -moz-background-inline-policy:
initial; left: 309px; top: 125px; display: none;”>
<center><small>ben@benhammersley.com</small></center></div>
</body>
</html>
44 Part II — Getting Inside Gmail
So, now you have worked your way through each of the separate sections of the
Gmail layout, and you should have a good idea of the structure of the page and
how it is produced by the HTML.
Why, you might ask have you just gone through 20 pages of gritty DOM inspection
and poring over code? Because, and you have to trust me on this, Gmail’s
workings are almost entirely contained in that ungodly lump of framesets and
JavaScript. Over the majority of the rest of the book, you will spend your time
embedded in the depths of this code, so it’s extremely useful to jump off into the
deep end, as it were.
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 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.
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 */
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;
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
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;
}
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 */
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
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
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
