Hacking Gmail

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
08_59611x pt02.qxp  11/28/05  11:13 PM  Page 27

---

08_59611x pt02.qxp  11/28/05  11:13 PM  Page 28

---

Skinning Gmail
B
eing 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 ele-
ments, but it also consists of at least nine iframes inside a frame-
set. 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