hack gmail

Download Hack gmail

Post on 08-May-2015




1 download

Embed Size (px)


ben.hammersley@gmail.com | Settings | Help | Sign out
Showsearchoptions 49. 35Chapter 4 Skinning Gmail Createafilter

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 theres 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. 50. 36 Part II Getting Inside Gmail FIGURE 4-7: The Gmail navigation menu The code that produces this import part of the page is here, in Listing 4-2. Listing 4-2: The HTML That Produces the Gmail Navigation Menu

Compose Mail
Inbox (1)
51. 37Chapter 4 Skinning Gmail
Sent Mail
All Mail
Invite 4 friends
to Gmail
52. 38 Part II Getting Inside Gmail Youll notice when you read through this code that what look like links (the Inbox, Starred, Sent Mail, and so on) actually arent. Theyre just plain text wrapped in spans that provide just enough styling to make them look like links: Theyre underlined, the mouse pointer changes, and so on. This is just another symptom of how cunning the Gmail application is. Ill be explaining all of this in Chapter 5. Just so you know. The styling is simple here. After the Compose Message link (thats not, as I just said, a link in the sense of but rather just the plain text styled up to look like one), theres a table containing only the Inbox link and new mail count and then a succession of divs with class nl, containing spans with each of the menu options. Then theres another non-link link to the Contacts functionality, and another table used to produce the label box. With labels defined, as you will see later, this table has more content. Finally, after the table, is a div called il containing the invitation link. (My bet is that il stands for Invitation Link, but ignorance of such things is the mark of the reverse engineer.) As you will have noticed by now, Gmail is built with very small names for all of the divs and spans. This is also true of the JavaScript functions covered in the next chapter. This is because Gmail is serving these pages millions of times a day, and the bandwidth saved by dropping every- thing down to one- or two-letter variable names is well worth the obfuscation. Onward, then, to the real meat of the page. The Activity Area Right in the middle of the page, surrounded with a blue border, is what Ill call the central activity area. Its in this section that the majority of your work within Gmail is done: writing and reading mail, for example. It looks like Figure 4-8. FIGURE 4-8: The central activity area 53. 39Chapter 4 Skinning Gmail The central activity area is controlled by the code in Listing 4-3. Listing 4-3: The Central Activity Area in HTML
Archive ReportSpam More Actions ... --------Apply label:New label... Refresh 1 - 1 of 1 Select: All , Read , Unread , Starred , Unstarred , None
Ben Hammersley (2) Skinning Gmail? Thats so cool! - BEGIN PGP SIGNED MESSAGE-- Hash: SHA1 la la la --BEGIN PGP SIGNATURE-- Version: GnuPG v1 2:29pm 55. 41Chapter 4 Skinning Gmail

Select: All , Read , Unread , Starred , Unstarred , None Archive ReportSpam More Actions Continued 56. 42 Part II Getting Inside Gmail Listing 4-3 (continued) ... --------Apply label:New label... 1 - 1 of 1
This code is also quite complicated, but working through it is just a matter of looking through the code for the class and id attributes and noting the tables in the middle. By now, you should be quite good at this, so you wont do that here. The next section, after all, provides a map of all of the classes and ids you need. The Bottom Section Now we come to the last remaining section of the Gmail screen: the bottom of the screen, as shown in Figure 4-9. Again, the drudgework is left out here; you see only the code. In the tradition of software textbooks, the figuring out of the names of the divs and spans within the bottom section is left as an exercise to the reader. Listing 4-4 shows you the code if you want to do this, or you can skip past Listing 4-4 to Figure 4-10, which outlines the whole pages structure in CSS. FIGURE 4-9: The bottom section of the screen 57. 43Chapter 4 Skinning Gmail Listing 4-4: The Bottom Section of the Screen in HTML
Use the search box or search options to find messages quickly!
You are currently using 0 MB (0%) of your 1000 MB.
TermsofUse - PrivacyPolicy - ProgramPolicies - GoogleHome