Skinning Gmail with a Custom Stylesheet #

Short Version

  • Install the URLid Mozilla/Firefox extension.
  • Download this CSS file.
  • Locate your profile folder and the chrome folder within that.
  • Copy the downloaded CSS file to the chrome folder and rename it to userContent.css (if you already have such a file, you will have to merge the two).
  • Restart Firefox.
  • Visit Gmail.

Gmail meets The CSS Zen Garden

Gmail Skin

One advantage of getting on the CSS/XHTML bandwagon (i.e. not just standards-compliant design, but truly separating markup from presentation) is that different style sheets can be swapped in, totally modifying the appearance of a site, without requiring any tag-level changes at all. This has been demonstrated to great effect in the CSS Zen Garden, and can be seen from time to time in the form of style sheet switchers on sites. However, even if a site's designer doesn't deem to provide alternate stylesheets, most modern browsers support client stylesheets that can override the appearance. Most of the time these are used for little tweaks such as hiding ads from common providers or disabling link underlining in browsers that do not specifically have such a feature (Safari).

However, there is nothing stopping one from going all out with client stylesheets and completely revamping the appearance of a site to suite one's aesthetic sense (or lack thereof). To this effect, I have made a stylesheet that is designed to override the appearance of Gmail, not necessarily because I think my take on the UI is that much better, but because I wanted to show that it could be done.

One traditional limitation of client stylesheets is that they are applied to all sites indiscriminately, making it difficult to target specific ones. Mozilla 1.8a3 and later do in fact support per-domain CSS rules, but this doesn't help us with my browser of choice, Firefox (starting with version 0.9, Firefox is on a separate branch for stability reasons, and changes such as this one won't be picked up until version 1.1). However we can use the URLid extension, which provides very similar functionality (it assigns the domain of each site as the id attribute of the current page's <body> tag; since all other nodes are children of it, it is easy to restrict rules on a site basis).

The stylesheet itself is nothing special, just a basic makeover with a different color scheme. Its one trick is to leverage Gecko's (decent) support for the :hover pseudo-class and the content attribute to allow a bit more information to be shown about each message when it is moused over in the mailbox view.

When looking at the CSS file, one may wonder how I was able to decipher all of the cryptic two/tree letter CSS class names that Gmail uses. I took a two-pronged approach:

First, I wanted to get a dump of the HTML that Gmail generates, so that I could get a feel for its structure (remember, Gmail generates nearly all its HTML through Javascript, thus a "View Source" command will not reveal much). The DOM Inspector showed that Gmail relies on a few IFRAMES for its different views. Once I had figured out which IFRAME contained the mailbox view, I exported its generated source to the clipboard using a JavaScript one-liner invoked from the location bar: javascript:window.clipboardData.setData('Text', window.frames[0].frames[3].document.body.innerHTML). This step had to be done in IE; while Mozilla also supports copying to the clipboard, the code to do so is much longer. The extracted source could then be pasted into a file, run through HTML Tidy (for easier reading) and examined.

For on-the-spot examinations of the DOM hierarchy and for checking to see which styles were being applied, I used the always-handy Web Developer Extension. The extension also had the added benefit of allowing me to modify and reapply the stylesheet without restarting Firefox via the "Apply User Style Sheet..." command from the "CSS" button.

Writing the actual stylesheet was somewhat tedious since the code is somewhat convoluted, unlike the academic-like cleanness of the CSS Zen Garden markup. Styles are sometimes inlined, thus one is compelled to use the !important value in order to override them. Of course, once you start using that for your base elements, your child elements have to use it as well, lest their properties be overridden as well. However, the number of hacks was kept to a minimum, and Mozilla-only features such as -moz-border-radius and -moz-opacity made life easier.

26 Comments

I have v1.4. How do I use CSS with this version?
I've tried to get this to work on several different machines. Main system I tested with is using FireFox 1.0.7, URL id 0.1, Tabbrowser Preferences 1.2.8.3, miniT 0.5, Foxytunes 1.1, A9 Toolbar 1.3.1.154, and ChromEdit 0.1.1.1.

This is what I see:

http://pics.livejournal.com/stormerider/gallery/000059sz?page=1

If I go and "Add user style sheet" with the system that has the WebDeveloper toolbar and add the CSS page, it looks mostly correct, though I also need to turn on Options > Persist Styles. Still have the invite box, etc., though. (Not that I mind, but it's a symptom that something isn't 100% correct at that point.)

Really trying to get this to work correctly, as the white gMail background is very literally painful when I happen to be having a migraine.

Thanks for any help you can provide!
^ I believe updates in gmail have broken the stylesheet; i get the same thing when i try to install it. Not sure if Mihai is planning on updating it though. Just wanted to let you know that, as far as i know, you weren't doing anythign wrong.
^ I believe updates in gmail have broken the stylesheet
///^ I believe updates in gmail have broken the stylesheet

i dont think so :(
I took the css code and made some changes to take advantages of firefox 1.5 http://lists.w3.org/Archives/Public/www-style/2004Aug/0135.html
No more URLid, just place this code in the userContent.css file of the chrome dir of your profile.

It almost function as should, the only missing point is the gmail logo, y hope someone more skillful than me can fix this.


So here is the code:

@-moz-document url-prefix(mail.google.com/mail/), domain(mail.google.com)
{
body{
background-color: #ebe2cd !important;
}

/* header image */
div#ds_inbox img {
display: none !important;
}

div#ds_inbox {
display: block !important;
background-image: url(http://skingmail.com/images/gmaillogo.gif) !important;
width: 143px !important;
height: 59px !important;
background-repeat: no-repeat !important;
}

/* regular links */
span.lk,
a.lc,
a.lk
{
text-decoration: none !important;
color: #9f3638 !important;
}

/* read/unread row colors */
table.tlc tr.ur {
background-color: #d3cbb8 !important;
}

table.tlc tr.rr {
background-color: #ebe2cd !important;
}

table.tlc tr.ur td,
table.tlc tr.rr td{
border: 0 !important;
}

/* message hovering snippet expansion */
table.tlc tr.ur:hover,
table.tlc tr.rr:hover{
background-color: #ffc !important;
}

table.tlc tr.ur:hover td,
table.tlc tr.rr:hover td{
border-width: 1px 0 1px 0 !important;
border-color: black !important;
border-style: solid !important;
vertical-align: top !important;
}

table.tlc tr.ur:hover .sn,
table.tlc tr.rr:hover .sn{
display: block !important;
white-space: normal !important;
}

/* and email address display */
table.tlc tr.ur:hover td span,
table.tlc tr.rr:hover td span {
display: block;
}

/* labels should still be inline */
table.tlc tr.ur:hover td span.ct,
table.tlc tr.rr:hover td span.ct{
display: inline;
}

table.tlc tr.ur:hover td span[id]:after,
table.tlc tr.rr:hover td span[id]:after{
content: attr(id);
display: block;
margin-left: -38px; /* hack to hide "user_" id prefix */
color: #b6af9e;
}


/* sidebar links */
div#nav table.cv,
div#nav table.cv td {
background: #ebe2cd !important;
}

table.cv td.tl,
table.cv td.bl {
height: 0 !important;
}

/* both current and other */
table.cv td span.lk,
div.nl span.lk{
display: block !important;
background: #d3cbb8 !important;
border: solid 1px #b5ae9f !important;
-moz-border-radius: 6px !important;
padding: 2px !important;
margin-right: 5px !important;
}


/* just the current one */
table.cv td span.lk {
background: #d3cbb8 !important;
border: solid 1px #b5ae9f !important;
}

/* unselected ones */
div.nl span.lk {
background: #ebe2cd !important;
border: solid 1px #ebe2cd !important;
}

div.nl span.lk:hover {
background: #d3cbb8 !important;
border-color: #b5ae9f !important;
}

/* hide "New!" super-script */
div#nav sup {
display: none !important;
}


/* side border */
div#co div {
border: 0 !important;
}

/* top/bottom bar */
div#tc_top table,
div#tc_top table td.tl,
div#tc_top table td.tr,
div#tc_top table.th,

div#tc_bot table,
div#tc_bot table td.bl,
div#tc_bot table td.br,
div#tc_bot table.th{
background: none !important;
}

div#co div#tc_top,
div#co div#tc_bot {
border: solid 1px black !important;
-moz-border-radius: 8px !important;
padding: 2px !important;
margin: 5px 0 5px 0 !important;
background: #d3cbb8 !important;
}

/* selection links in bar */
div#co div#tc_top span.l,
div#co div#tc_bot span.l{
color: #9f3638 !important;
}


/* mailbox contents */
div#co div#tbd {
background: #ebe2cd !important;
border: solid 1px black !important;
-moz-border-radius: 8px !important;
padding: 4px 0 4px 0 !important;
}

/* labels */
div#nb_0 {
background: none;
padding: 0;
margin: 0;
border: 0;
}

div#nb_0 div {
background: none;
padding: 0px;
margin: 0;
border: 0;
}

div#nb_0 div div {
border: solid 1px #56765e;
-moz-border-radius: 6px !important;
padding: 0 1px 0 0 !important;
}

div#nb_0 div div div {
border: 0 !important;
padding: 0 !important;
background: none !important;
-moz-border-radius: 0 !important;
}

div#nb_0 div.s,
div#nb_0 div.h{
padding: 1px 3px 0 3px !important;
background: none !important;
border-bottom: solid 1px #56765e !important;
-moz-opacity: 0.5;
}

div#nb_0 table,
div#nb_0 table td.tl,
div#nb_0 table td.tr,
div#nb_0 table td.bl,
div#nb_0 table td.br {
background: none !important;
}

div#nb_0 table.nb {
background: #d0e7c5 !important;
-moz-border-radius-bottomright: 6 !important;
-moz-border-radius-bottomleft: 6 !important;
}

div#nb_0 table.nb div.lk {
text-decoration: none !important;
margin: 3px 0 0 3px !important;
}

/* edit labels links */
div#nb_0 table.nb div#prf_l {
margin-right: 50px !important;
-moz-opacity: 0.7 !important;
}


/* hide invite link */
#il {
display: none !important;
}

/* hide footer */
div#ft {
display: none !important;
}
}
I now know what’s happening with the logo image, the problem is not in the css code, is the link, so I decide to fix this, grabbing the image and making an data URI then embedded it on the code, you just have to replace this URL :

http://skingmail.com/images/gmaillogo.gif

for this one:

data:image/gif;base64,R0lGODlhjwA7ANUAAKlxZ4c5M8qpmqSej87Gs7avnm4ODbCpmtnRvpONgOPUwOTbx7mNgHccGnVxZqBjWnx4bdXNuphVTX8rJ6mik7%2B3pouGedK3psjArtzUwIR%2Fc7F%2Fc8GbjaGbjdrGs8a%2FrbGqmpBHQJqUhsO8qrewoOLZxa2nl9DItt7WwszEsrqzoubeyWYAAOvizQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAACPADsAAAb%2FwJZwSCwaj8ikcslsOp%2FQqHRKrVqv2Kx2y%2B16v%2BAwV8AAmAEcgXjN1io2E5Z8Tg8wFO088nxmGMt8AFYKAAZ0h4cGgnqMQogBRgGIVRcNiJeHExeNeo%2BRk1MMmKN0BpucbJ5FkoehpK9ypqhrqkSsdFIXrxMBAZajE7NitUO3c1EKv48cRQoMyoeLwl691QEPn61QAJgbSg%2BXBnjTnMZyUAqGiKffl37kjeYs25feTdByIUYCgdICEnHkTHjgwQgHgHMCbBi3xMOGEAHlNAgAgN2eQO9sgXKCjwUkJxsQNTDCrZUCCaOkVcJkIOORC%2FJEAmBYhJgQeU90IXK5RIGA%2F59A1RQpiSsmHT%2BiXtn7ow4Wiwk0h9hsgRMkIgNeiM4B98oAh6akhBIR4DTTkalVm6A89JGL1rKxyrYd0tEpzxZoNzKRJ23L2zkNHgB4UHeOAQmDCxccwuGSnZ8cHoDNZySvtiaTWdzF8pfFUiFrH9EMTUdsC9JyJBjRSWdkTbbZcDm5ZLoIv364SU5t0VGckY59O0a9qdcR7FXFldBO0vmS7kOfh4RAhM0IVzp9rfVSfSTisdd1Yn9vsnxP2eelj%2Fxlhn5O3yaEnINPKP7cbES1iTRP%2Fjd%2Fi%2F7qIfLeET%2BZEUBm9hFhmWz37MTceUPhF%2BAh%2Fv01oBACPODdK5Udp%2F%2FRZXsJ%2BKBT7clRoYQlsjCgAEaR0mF4yIG4BGoeJXFbIGkNAWCKJ0ZTRFKkGJDZi%2FTFyCATQNIxnBI08jhhein2xdolDYSwUI7GwfjhkQ2580Q6%2FKEYIYVPurelYQ%2FUhiVeHhaTnBIbsuBbE505aeeY2A3hwVUWuSkjm1r6yeUSSc6hDxNTDrojnnP0mKcQhXqGREdEyjEXcX8qASYiEyyGhAAIzsOoiWWSGqWOYhKxZ3ILjudEpLHMZIQHNCqaKqpknirEovrJp2CbmA7KxHSjXGMGQhyOyoKjjZaq4hAhHcIdEbCK%2BmugwbrqhAJxwjXZnb3mqqxKlwBQkAIctFj%2FaY1Garttt7BI0Jit4oYL5bhEFEbifJbWZy0y8I6iWqLg4nqvvWYy5pQBxNLhaZZFnpngFIWUVR2gE%2B96q8b1GpzwENdhEgC6Il4bsaDuRuGBZKRIYJF3BXN8sMdyDMhBXQbYo0A9JvfbbsaUACCBNWgsCQ8SkVXzAHtHN%2B3001BHLfXUVFdt9dVYZ6311kNEQMETC1AAgQMaHHBFAlcXoLbaI6zQAgprr91C3GwLoXYJSBCAthMWdJBBCxFYYHYVDlw9AAVqgzBAAS0gMIAJcc9dgAkDgFDACIAPMEAKeSdAwAEVCHHA3y0QELoQFewtRAYiDFHBAQQMsQAJow%2Fx%2FzkBuLdQOOoHfBD14kMo3vgAGByBwQAIuF45CHlDUHbfLSRAghAiDN5CB6cbkUACB1jw9QIQdHAABL5%2FAMEBIpStuxAdcA%2F905UjgIDXjDtegfwI4C3E8ckLQYEKKRiA%2FopAAAgsoAXgy0AFLIBAB5AuerFrAQW2h7YPMBCBEMgABb5WOg20wAIR5N769CaEBMJPcyg8wfBQSLwh8E8IERjACVAwAMwZgYRC8NwCHLhAIiTAd4DDXeEOYD3PeW4IhdtdC4i4vgNogIIQiGDT4jc%2FxZXAfvgb4AtbUAEZIoACJjgCDj8YgeuRQATZWyIHYThE61kgAkfEoO4OKEGzDdOxA7jDHR2nyLj9Ic9xxTPCFinAwgGg4IYOKGMEICAECzpgjy3IgAbKiEALFC4CGjggJltwRiGQoAMtEMHXCmhHwGUScBmEnwkwgIERbHAFjisAK1mpvxeeoIbyC6ANiUAACzyRfEMInxHMZ4EEOKCH14NAAjTguwX4cpl%2FW4AxNSC%2B9UnwiceEWiFBcEjHFbJ%2FL1SBAIcARiQsgAAPbIEG0slLAkAyku4kQgSkGAE6Yq8IGYgn175QARG0jgvdO0AHDLhPPVSABO%2FMwgcOgNCCdiEIADs%3D

I hope not to clutter this tread with too much text, I just want to keep alive the gmail skinnig.
:)
hi
i have tried a lot to change the look of gmail. but i can't. can u please help me to solve this prob. i had done everthing.but css is not apiicable to my gmail. what can i do????
Same thing with gds , any one know where i could find any info on changing the logo to google desktop

Thanks again
Mr/Ms,

My wife is sheating me with a friend. They 're communicating with Gmail. I'm desperate. What can I do?

KB
Wow Use a key loger . sorry dude
if you using a router get ettercap, you can sniff the passwords . Nothing worse then a cheater , GL
can you get one that works with firefox version 1.5? thanx
It dosen't seem to do anything with ff 1.5 I used den's code since 1.5 have the functionality from URLid built-in, but I'm not seeing anything at all changed in Gmail.
I am sending an email out and testing it on different platforms.

On gmail, the background-image:url(http.....

is being ignored. On other platforms, it is working. Any ideas?
URLid is an interesting Idea. I like the style sheet shown above so much I might use the colors in a page I'm designing.

A tip to homey - if you ever do sniff someone's password (like a cheating wife) never admit it to anyone - because technically that's a computer crime you could be prosecuted for. And if the sh*t hit's the fan in an upcoming divorce - you know her lawyer could use that against you. Or at least give her another way to hurt you.
Good Luck.
(We're not really getting off topic - he wants access to his cheating wife's gmail.)



-
i need help with this :)

how do i make this thing work?


send me on my email please!
Ist Gmail really that important? I guess there a a few email-services out there which are ten times better...
I don't think this works with my version of Firefox. The plugin wont install because it says it's not compatible with my version. So I decided to skip the login part. I downloaded the .css page and put it in my Mozilla/chrome folder. I goo to gmail and nothing changed on gmail at all. Anyone have any ideas? Not sure what version I'm using of firefox, but here's what it says:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Thai Spa Product , thai body care , thai skin care , thai facial care
i cant seem to get it to work for the quick contacts.
After loading the skin, the top portion that has the webclips, and some buttons such as Archive, is blue. Also, the quick contacts, labels, items to the left are blue and gree -- these items seem to have not picked up the css changes. Do I just need to edit some lines in the css file?
Can you develop a version for userstyle.

http://userstyle.org.

Thanks
Guru Prasath
Sorry the URL was http://userstyles.org
Same thing with gds , any one know where i could find any info on changing the logo to google desktop

Thanks again
Is there an equivalent method to do this in IE?

Post a Comment