poluição visual não

10 de setembro de 2006

Vendo os comentários do pessoal do Br-Linux.org sobre as mudanças novas do visual do site, eu me foquei em um comentário especial que FINALMENTE mencionava a poluição visual do Br-Linux.org nos últimos tempos: anúncios demais jogados pelo site, banners de sites pessoais do Augusto (o Efetividade.net é muito massa, o Poeira Cósmica é uma droga) etc.

Resolvi reviver uma coisa que eu havia esquecido de postar, seja por falta de tempo ou tesão mesmo, pois não é algo tão fantástico assim quando você passa a conhecer a idéia. Um recurso que curiosamente iria ser incluído na última versão do Mozillão morto, e não foi, era a possibilidade de personalizar como os sites se comportam pro seu browser.

Na verdade o userChrome e userContent são antigos, como são chamados os dois arquivos CSS pra personalizar o visual dos sites e do próprio navegador (respectivamente, o renderizador HTML dos sites e o que desenha a interface do programa). Acontece que a feature esquecida é poder usar CSS per site, per domain, per o que cacete à quatro.

Uns 4 meses atrás eu brinquei com o site do UOL mexendo no meu userContent e até que ficou legal o resultado. Botei no Ueberalles pra não esquecer de postar. E agora resolvi mexer no visual do Br-Linux.org que eu vejo. Se quiser ver como ficou o novo UOL, clique nos links do início do parágrafo. Caso queira ter um Br-Linux.org menos poluído e bem espartano, copie e cole isso dentro do seu userContent:

@-moz-document url(http://br-linux.org/), url-prefix(http://www.br-linux.org), domain(br-linux.org) {

div#avmenu, div#footer, table, div#extras, div.visite {
display: none !important;
}

li {
padding-bottom: 10px !important;
}

div#content {
margin-left: 10% !important;
margin-right: 10% !important;
padding: 2% !important;
width: 75% !important;
border: none !important;
}

div.node-links {
text-align: left !important;
border-bottom: 1px solid #000000 !important;
}

body {
margin: 0px !important;
padding: 0px !important;
}

div#wrap {
width: 95% !important;
text-align: center !important;
border-left: 1px solid #000000 !important;
border-right: 1px solid #000000 !important;
}

}

O arquivo CSS do userContent que suporta isso vem em toda instalação do Firefox e Seamonkey (além de navegadores baseados no código Mozilla 1.8.x). Eles possuem um "example" ou "sample" no nome por padrão, se não me engano. Basta remover isso e começar a brincar.

Br-Linux.org Remodelado

PS: não testei as mudanças em outras resoluções... fiz isso for fun e pra uso próprio (e o WordPress comeu tanto tabs quanto espaços do bloco de CSS acima).

UPDATE: se quiser estilizar vários sites por URL ou prefixo, basta agrupá-los entre os { e } principais do CSS acima (que infelizmente o WordPress meio ocultou quando matou a identação)... e lembre-se de usar o "!important" no fim de cada valor das propriedades, caso contrário o browser vai ignorar seu estilo local.

© caio1982