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 inspec-
tion 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 http://extensionroom.mozdev.org/more-
info/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 http://www.mozilla.org/support/firefox/edit.
html#profilefor the official reference. Once inside the Profile folder, you will be
adding the CSS you are about to write to the userContent.cssfile inside the
chrome subdirectory.Open the userContent-example.cssfile, 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 gmail-
google-com will be added to the body. The style sheet can then use the
#gmail-google-comselector 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.