Stylish: deixando a Web do seu gosto

Na semana passada fiz uma grande mudança no visual de três dos meus principais sites, sendo que em um deles (o Lucrando na Rede) os feedsbacks foram os mais radicais possíveis: houve quem amasse e houve quem odiasse, principalmente por causa da predominância da cor amarela na página. Para estes eu mandei que se virassem com o Stylish, pois eu é que não iria mexer em mais nada, já que havia curtido muito minha criação.

Contudo, pode que as pessoas não saibam direito o que é o Stylish, e muito menos como utilizá-la, e por isso nasceu esse humilde tutorial. Na verdade eu poderia usar qualquer site para transformar, mas como não quero arranjar sarna pra me coçar com designers jurássicos que ainda não entenderam que o poder está na mão do usuário, e não na deles, resolvi usar um site meu próprio.

Para quem anda desatualizado, Stylish é uma extensão para o Firefox que permite ao usuário instalar userstyles, folhas de estilo personalizadas, que são o equivalente aos userscripts do GreaseMonkey.

Naturalmente, para poder usar o Stylish a contento ou você fica restrito aos userstyles que são publicados no site userstyles.org, ou então você tem conhecimentos de HTML e CSS suficientes para criar suas próprias folhas de estilo. Não cabe num pequeno tutorial como esse, claro, ensinar toda a teoria por trás disso, mas sim iniciar o leitor mais corajoso nessa aventura de modificar websites.

Uma vez instalado Stylish e reiniciado o Firefox, ele acrescentará na barra de status um ícone de acesso às suas funções. Na imagem abaixo ele aparece bem à direita, ao lado do ícone do Greasemonkey.

Agora é hora de identificarmos o problema, para saber como resolvê-lo. Em nosso exemplo, o problema é que muitos usuários de gosto duvidoso não gostaram do amarelo do site, fere seus olhinhos sensíveis.

Não são uns tapados?

A primeira coisa a fazer, então, é clicar com o botão direito sobre o ícone do Stylish, e no menu que se abre escolher a opção para iniciar um novo estilo para "lucrandonarede.com". Isso porque devido às estruturas de URLs amigáveis comuns a muitos blogs, se você criar um estilo que não seja global ao domíno na maior parte das vezes estará gastando tempo para personalizar apenas uma página de todo um site.

O Firefox então vai abrir uma janela para você editar o código de sua folha de estilo personalizada, já com uma parte (importante) do código previamente preenchida. Não se preocupe com o significado do que estiver ali, apenas tenha em mente que não deve modificá-lo (a não ser que saiba o que está fazendo), e que as suas regras devem ser colocadas entre os símbolos de abre e fecha chaves.

Não esqueça de dar uma descrição ao seu novo estilo.

Agora, podemos começar a atacar o problema, criando as regras que redefinirão a apresentação da página. Como o que nos incomoda (a mim não, reitero, eu gosto do meu site do jeito que está) é a cor amarela no fundo, vamos mudá-la para, digamos, azul escuro.

Temos que saber de antemão que a regra que define a cor de fundo de uma página, no CSS, é a background, ou background-color, para ser bem específico. Então, seguindo a sintaxe do CSS vamos escrever na janela de código, o trechinho abaixo.

body {

background-color: |

}

Bem, o código acima está incompleto (e o "pipe" representa onde eu quero que você deixe o cursor para o próximo passo), porque a gente não sabe (OK, eu sei e muita gente sabe de cabeça, antes que os trolls venham aporrinhar) o código da cor azul escuro. Então vamos fazer o Stylish trabalhar, e vamos clicar no botão Insert, escolher Color, e então a cor desejada.

O Stylish então completará nossa regra de cor de fundo (na verdade, inserirá o código da cor exatamente onde estava o cursor). Mas isso não é suficiente: para que nossa folha de estilos personalizada sobreponha-se à definida pelo site, é necessário acrescentar o modificador !important a cada regra. O botão !important do Stylish faz isso pela gente. Ao finalizar a regra, um ponto e vírgula deve ser colocado para que o navegador saiba que ali terminam os parâmetros daquela regra, para começar uma nova regra em seguida. O código completo dessa regra pode ser visto na imagem abaixo.

Isso já deveria ser o suficiente para agradar a maioria dos chatos que pensam que a Web deveria ainda ser feita de páginas cinzas com fonte Times e links azuis. Para ver como ficará a página modificada, podemos usar o botão Preview, que instantaneamente aplica nossa folha de estilos à página.

Mas talvez os chatos ainda achem que há muito amarelo na página, e que os banners dos patrocinadores também estão excessivos ali. Naturalmente, a não ser que o dono do site que queremos adequar ao nosso gosto não entenda nada de XHTML e folhas de estilos, tem que ter um jeito de remover aquilo ali.

Usando o próprio Firefox podemos visualizar o código-fonte da página (não é necessário fechar a janela do Stylish), e botando a cabeça para funcionar descobrir quais são as tags que contém aqueles anúncios.

Como eu sou um cara bacana, demarquei aquele espaço com uma div identificada pelo sugestivo nome de 'ads'. E essa div, por sua vez, está dentro de uma outra div, que contém o nome de 'splash'. Com um pouco de tentativa e erro qualquer um descobriria que a div 'splash' contém a imagem do cabeçalho, bem como o código dos anúncios. Veja a imagem abaixo para entender por que seria fácil de identificar esse padrão.

Então, se queremos que o cabeçalho suma, temos de fazer com que a div nomeada como 'splash' tome um Doril e desapareça. Para isso usamos a propriedade "display" dos elementos, com o valor "none". Aplicamos a regra apenas à div com a identificação que nos interessa, usando a sintaxe padrão do CSS:

#splash { display:none !important; }

O código todo da nossa folha de estilo que vai desfigurar um lindo site, portanto, fica como segue na imagem abaixo.

Enquanto estiver brincando com as folhas de estilo você pode (e deve) usar o botão Preview tanto quanto necessário para ver como ficará o resultado de sua arte. Quando estiver satisfeito, clique no botão Save (não esqueça que é necessário ter dado uma descrição à folha de estilo), para que ela fique ativa automaticamente para todas as vezes que você for visitar o site.

O resultado da sacanagem pode ser visto na imagem abaixo.

Claro que há detalhes que não foram tratados, como o amarelo no fundo do menu, ou as cores das opções dele próprio.

Caso você faça um bom trabalho, pode submeter sua folha de estilos ao site site userstyles.org, para que mais pessoas beneficiem-se de sua criação.

Apenas a título de curiosidade: também poderíamos fazer estas modificações usando GreaseMonkey, mas como estamos tratando apenas de CSS o Stylish é melhor e custa menos em termos de processamento.