Skinning Gmail with a Custom Stylesheet #
Short Version
- Install the URLid Mozilla/Firefox extension.
- Download this CSS file.
- Locate your profile folder and the
chromefolder within that. - Copy the downloaded CSS file to the
chromefolder and rename it touserContent.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
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
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 dont think so :(
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;
}
}
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.
:)
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????
Thanks again
My wife is sheating me with a friend. They 're communicating with Gmail. I'm desperate. What can I do?
KB
On gmail, the background-image:url(http.....
is being ignored. On other platforms, it is working. Any ideas?
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.)
-
how do i make this thing work?
send me on my email please!
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
http://userstyle.org.
Thanks
Guru Prasath
Thanks again
Post a Comment