Caio Moritz Ronchi

Nota (08/11/2007): Após a modificação da interface do Gmail o código CSS apresentado neste post deixou de funcionar.

Há alguns meses, procurando entender para que serviam as tais “user stylesheets”, me deparei com a extensão Stylish, para o Firefox. Não vou entrar em detalhes sobre todo o potencial dela, mas basta saber que com ela é possível definir suas folhas de estilo para todos os sites que você visualiza. Essas folhas passam a ser carregadas automaticamente, e você pode desabilitá-las facilmente. Sim, isso é muito bonito… mas tem algum uso prático?

Instalação e utilização

Após instalar a extensão reinicie seu Firefox. Note que, agora, aparece um novo ícone no canto inferior direito da janela. Clicando sobre esse ícone, e em seguida passando o mouse sobre a opção “Write style…”, podemos escrever estilos para a URL sendo visualizada (1ª opção) e para o domínio sendo visualizdo (2ª opção). Deixo para você a missão de descobrir as demais possibilidades. Para este tutorial você precisa lembrar apenas da 2ª opção.

Gmail

Eu utilizo o Gmail já há alguns anos, e embora goste bastante de sua usabilidade, considero sua interface muito poluída para alguém que utiliza sua interface por várias horas ao dia. Como não sou o desenvolvedor do Gmail, você pode pensar que eu terei de conviver com a minha infelicidade pelo resto da vida, certo? Mas com a Stylish é possível modificar (quase) por inteiro a interface de um site e, portanto, do Gmail.

Minhas mudanças foram simples: eliminei alguns links do menu esquerdo, eliminei algumas bordas, consegui remover duplicações da interface… Basicamente utilizei CSS para esconder elementos. Se você quiser ver o Gmail da mesma forma que eu vejo, siga a receita de bolo a seguir. Note, no entanto, que você precisa conhecer os principais atalhos de teclado do Gmail para não prejudicar sua usabilidade após importar estes estilos. Fique atento para os comentários que deixei no código CSS para saber qual declaração deve ser omitida para reativar algum link que você não consiga viver sem.

• Clique no ícone da Stylish, no canto inferior direito da sua tela do Firefox
• Vá para a opção “Write style…”, e em seguida em “For mail.google.com…”
• Substitua toda a declaração que aparece na área central da nova janela pela listagem de código CSS abaixo
• Defina uma descrição para essa folha de estilos
• Salve a configuração

Meu CSS para o Gmail:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mail.google.com") {

body .lk { /* Tries to remove the underline from all the links - but fails */
    text-decoration: none !important;
}

body div#gbar { /* The Google Services links on the top left */
    display: none !important;
}

body div#guser.mlo { /* The "username@gmail.com | ... | Sign out" links */
    float: left !important;
    padding-left: 1em !important;
}

body #guser #prf_g.setl,
body #guser a { /* The "Settings | Help | Signout" links */
    text-decoration: none !important;
}

/* The search-related elements */
body table tr td div#mt1.s table tr td span#mt_cf1.lk { /* The "Create a filter" link */
    display: none !important;
}

body div#nav div#nb_1 { /* "Invite a friend" box */
    display: none !important;
}

body div#nav div#nb_2 { /* "Messaging" box */
    display: none !important;
}

body div#nav div#nb_0 div#nvl table tr td b.rnd { /* Green lines that stand above and below the "Label" box */
    display: none !important; 
}

body div#nav div#nb_0 div#nvl div.nb { /* "Label" box outter */
    background: none !important;
}

body div#nav div#nb_0 div#nvl div.nb div#nt_0.s td.s { /* "Label" box header */
    display: none !important;
}

body div#nav div#nb_0 div#nvl div.nb div#prf_l.lk { /* The "Edit labels" element */
    display: none !important;
}

body div#nav div.nl span#comp.lk, /* The "Compose Mail" element */
body div#nav div.nl span#ds_all.lk, /* The "All Mail" element */
body div#nav div.nl span#ds_drafts.lk, /* The "Drafts" element */
body div#nav div.nl span#ds_starred.lk, /* The "Starred" (and star image) elements */
body div#nav div.nl span#ds_sent.lk, /* The "Sent Mail" element */
body div#nav div.nl span#ds_chats.lk, /* The "Chats" (and ballon image) elements */
body div#nav div.nl span#ds_spam.lk, /* The "Spam" element */
body div#nav div.nl span#cont.lk { /* The "Contacts" element */
    display: none !important;
}

body div div#co div#tct.thc div.tbc div.tbcr { /* "Refresh" */
    display: none !important;
}

body div#co div#tct.thc div.tbc div.tbcb button { /* The "Archive", "Report Spam" and "Delete" buttons */
display: none !important;
}

body div#co div#tct.thc div.tbc div.tbcs span#sl_r.l, /* Select: Read */
body div#co div#tct.thc div.tbc div.tbcs span#sl_u.l, /* Select: Unread */
body div#co div#tct.thc div.tbc div.tbcs span#sl_s.l, /* Select: Starred */
body div#co div#tct.thc div.tbc div.tbcs span#sl_t.l { /* Select: Unstarred */
    display: none !important;
}

body div div#co div#tcb.thc div.tbc { /* The message toolbar of the bottom (Select: All, None, ..., Unstarred) */
    display: none !important;
}

body div div#co div.fs table tr td#fi div#rhc div.rh div#ra { /* The big AdSense box */
    display: none !important;
}

body div div#co div.fs table tr td#fi div#rhc div.rh div#rb div.rhh { /* The "About these links" container */
    display: none !important;
}

body div#ft div.ft {
    display: none !important; /* The first line: random help messages */
}

body div#ft div.fv {
    display: none !important; /* Last but one (Gmail view: standard with...) */
}

body div#ft div.fcs {
display: none !important; /* The last line (Termos of User, Privacy Policy etc.) */
}

}

Se tudo deu certo as mudanças se aplicarão ao Gmail imediatamente. Para desabilitar o estilo é só clicar no ícone da Stylish, e em seguida clicar sobre a primeira opção que aparece, de baixo para cima, que será a descrição que você deu ao estilo.

Para editar esse código uma vez que ele foi aplicado a um site, clique no ícone da Stylish e vá em “Manage Styles…”. Em seguida escolha a folha de estilos desejada.

Conclusões

O grau de utilidade da Stylish para determinado site é diretamente proporcional ao grau de preocupação dos criadores desse site com a separação entre estrutura (HTML) e apresentação (CSS). Os desenvolvedores do Gmail, por exemplo, possuem diversas propriedades ligadas à apresentação expressas inline em seu código HTML (como a largura do logo do Gmail). Neste caso em especial é impossível para mim sobrescrever a largura desse logo pelo CSS, pois a prioridade dos estilos inline é sempre superior a daqueles declaradas em um arquivo CSS externo.

Portanto, saiba desde já que você não poderá fazer tudo que pensar com todos os sites que você mais gosta, mas provavelmente poderá se divertir bastante tentando.

Atualização 1 (15/10/2007):

• Link “Sent Mail” foi retirado
• Link “Drafts” foi retirado
• Link “All Mail” foi retirado
• Botão “Archive” foi retirado
• Botão “Report Spam” foi retirado
• Botão “Delete” foi retirado
• Os links do topo esquerdo foram removidos
• Os links do topo direito foram arrastados para o extremo esquerdo
• Muitos links perderam o sublinhado

Atualização 2 (17/10/2007):

• Links “Settings | Help | Logout” não são mais sublinhados

Atualização 3 (30/10/2007):

• Link “Spam” foi retirado: os spams são removidos pelo Gmail em 30 dias, então melhor não vê-los, certo?

Atualização 4 (08/11/2007):

• O código CSS não funciona com a nova interface do Gmail.