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
http://www.mozilla.organd http://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