Hacking Gmail

“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 !importantmodifier. 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_inboxand 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 ssimply 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.