0 Compartilhamentos 145 Views

Como sobrepor seus estilos no Firefox

23 de fevereiro de 2017

Recentemente, fui usuário de um sistema que não foi desenvolvido por mim, em um projeto que se estenderia por 30 dias.

Por ser confidencial, não posso revelar as telas, então você terá que acreditar em mim: a interface era feia. Feia e bem pouco amigável, com barras de rolagem para toda parte, desperdiçando espaço na tela e elementos que só estavam ali para poluir.

Com uma hora de CSS e configurando o Firefox direitinho, a interface na minha máquina ficou mais agradável e, melhor ainda, com maior usabilidade, e tenho certeza que minha produtividade melhorou uns 50% no uso do sistema. Tudo isso, sem acesso ao servidor, sem mexer no código-fonte original e sem que ninguém jamais soubesse.

Desde muito tempo, os navegadores web oferecem a possibilidade do usuário criar e editar sua própria folha de estilo, que funciona como um arquivo CSS normal, com a diferença que ele roda localmente e não no servidor, ou seja, a página ou site só tem sua aparência alterada para o próprio usuário. No caso do Firefox, basta inserir suas definições no arquivo userContent.css, que fica hospedado na sua máquina para a mágica acontecer. Vamos ver um passo a passo:

1) O arquivo .CSS

Crie um arquivo chamado userContent.css.

Ele deve conter a seguinte estrutura:

Sem especificar o domínio, qualquer CSS implementado irá valer para todos os sites que o Firefox navegar. Pode ser útil se você nunca mais quiser ver um link sublinhado na vida ou se desejar que todos os H1 sejam verdes, independentemente do fundo…

Exemplo:

No código acima, você está especificando para que todas as páginas do Código Fonte sejam exibidas com a infame fonte Comic-Sans. O resultado chega a ser maldade:

cf-comic-sans

Muito provavelmente, você terá que usar muitas vezes o “!important” em suas declarações de CSS, para sobrepor as definições que está criando em cima das definições originais do CSS do site. Minha recomendação é que você trabalhe de olho no código HTML original da página ou domínio que quer alterar, para que seu CSS mire nas mesmas classes e ids. Aqui, eu cheguei a criar uma réplica local para facilitar a visualização das alterações enquanto montava meu CSS.

Em outras palavras, você estará refazendo o estilo do site para seu uso pessoal. Elementos podem ser escondidos com “display:none”, reposicionados com “position”, ampliados ou reduzidos, o limite é sua necessidade e imaginação. O site CSS Zen Garden é um excelente exemplo do que pode ser conseguido apenas alterando o CSS de uma página, sem mexer no conteúdo HTML.

2) Salve seu CSS no seu perfil do Firefox

Agora que você tem o userContent.css perfeito, você precisa instruir o Firefox a usá-lo.

Primeiro, é necessário encontrar a pasta do seu perfil no navegador:

  1. Digite about:support na barra de endereços do Firefox e aperte enter para ir para a página de Dados do Suporte de sua instalação.
  2. Clique no botão abrir pasta do campo “Pasta do Perfil”:

    firefox-suporte

  3. Procure pela pasta chrome dentro da pasta do seu perfil e abra. Se ela não existir, crie uma com esse nome e abra.
  4. Coloque seu arquivo userContent.css dentro da pasta chrome. Se já existia a pasta anteriormente e já existia o arquivo, sobrescreva ou adicione seu CSS no arquivo anterior.
  5. Reinicie o Firefox.

Se o resultado final não for satisfatório, você precisará reabrir o arquivo userContent.css e reeditá-lo. Para ver as alterações, será necessário reiniciar o Firefox todas as vezes.

Você pode se interessar

Promoções de Jogos do Final de Semana (15/02)
Notícias
11 visualizações
Notícias
11 visualizações

Promoções de Jogos do Final de Semana (15/02)

Carlos L. A. da Silva - 15 de fevereiro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Como salvar seus dados do Google Plus
Dicas
9 visualizações
Dicas
9 visualizações

Como salvar seus dados do Google Plus

Carlos L. A. da Silva - 15 de fevereiro de 2019

Com o fim anunciado, você tem até primeiro de Abril para resgatar tudo que publicou na rede social.

Reagindo a Vagas de Emprego para Programadores // Vlog React #89
Vídeos
1,655 compartilhamentos6,810 visualizações
Vídeos
1,655 compartilhamentos6,810 visualizações

Reagindo a Vagas de Emprego para Programadores // Vlog React #89

Thais Cardoso de Mello - 14 de fevereiro de 2019

Decidimos mostrar algumas vagas de trabalho para programadores e vamos comprovar se as empresas estão realmente loucas pedindo coisas demais nos perfis profissionais.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Manifesto Ágil: Tipos de demanda e classes de serviço
Artigos
12 visualizações
12 visualizações

Manifesto Ágil: Tipos de demanda e classes de serviço

Plataformatec - 12 de fevereiro de 2019
Mark Zuckerberg conseguiu destruir o Google Plus
Artigos
16 visualizações
16 visualizações

Mark Zuckerberg conseguiu destruir o Google Plus

Carlos L. A. da Silva - 11 de fevereiro de 2019
W3C // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,814 visualizações
1,655 compartilhamentos6,814 visualizações

W3C // Dicionário do Programador

Thais Cardoso de Mello - 11 de fevereiro de 2019
Promoções de Jogos do Final de Semana (08/02)
Notícias
22 visualizações
22 visualizações

Promoções de Jogos do Final de Semana (08/02)

Carlos L. A. da Silva - 8 de fevereiro de 2019