Hacking Gmail

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

“/gmail/help/images/logo.gif”>	right;”> [e-mail] | “lk”>Settings | class=”lc” id=”help”>Help | “return top.js._Main_OnLink(window,this,event)” class=”lk” href=“?logout”>Sign out
“padding-bottom: 5px; white-space: nowrap;” class=”s” id=”s”>     “return top.js._MH_OnSearch(window,1)” value= “Search the Web”>   “vertical-align: top; padding-bottom: 4px;”> 09_59611x ch04.qxp  11/28/05  11:12 PM  Page 34 35 Chapter 4 — Skinning Gmail “lk”>Show search options    top;” class= “lk”>Create a filter > “height: 2.1ex; padding-right: 149px; visibility: hidden;” class=”nt” id=”nt1”>

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