Skinned GmailI love using Gmail; and have used it as my primary email application for a couple of years now. The reasons for this lie in its power and flexibility, rather than its appearance. For a great piece of software, it looks as though the front-end was an afterthought. And that’s being charitable.

If you find yourself in the same boat, you’ll be pleased to know that there’s a growing community of users out there who are bent on tweaking the design. Same interface, different CSS. Simple.

Personally I’ve only tried this on Firefox – my weapon of choice. However, I’m sure it won’t be long before other browsers follow suit; and I’d love to hear from anyone that’s got everything working with one of them.

The process for Firefox is simple. Copy the code below, paste it into your favourite text editor, and save it as userContent.css (as plain text). Place the file in Firefox’s ‘chrome’ directory. Restart Firefox.

Log in to Gmail, and things should look quite different. Modify the CSS to suit your own taste, logout and restart Firefox. Repeat as necessary.

A note on the userContent.css – this was written by chezar, commenting on this article over at Persistent Info. Despite the article’s age, everything works just fine.

The code itself

Here is the CSS code. Just copy/paste it into a text editor and save it as userContent.css. Enjoy.

@-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;
}
}

Advertisements