Como consertar pequenos aborrecimentos na web com o Stylish [Firefox e Chrome]

Os web designers têm um trabalho quase impossível. Eles precisam criar um design que agrade a todos. Ao falar sobre um serviço como o Gmail, usado por incontáveis milhões de pessoas em todo o mundo, você pode realmente abandonar a parte 'quase' - é simplesmente impossível. Mesmo que uma reformulação seja bem aceita pela maioria das pessoas, sempre haverá usuários que realmente não gostam do novo visual.

Às vezes, há um número suficiente desses usuários para forçar uma empresa a voltar atrás, como o Google fez recentemente com os botões de ícones do Gmail. Mas e se houver algo que você realmente odeio, e a empresa não muda isso de volta? Você está preso com isso para sempre? Graças aos estilos de usuário, você mesmo pode corrigir esses problemas.

Apresentando o Stylish

Stylish é um complemento gratuito disponível para Raposa de fogo e cromada , e permite que você faça algo muito mágico - aplique seus próprios estilos aos elementos da página da web. Mesmo que você não seja um desenvolvedor web e nunca tenha escrito um pouco de CSS na vida, isso é muito mais fácil do que parece. Você pode usar o Stylish para transformar sites completamente (como mostrarei na próxima seção), mas ainda mais importante, você pode usar o Stylish para consertar pequenos aborrecimentos em minutos.

Por exemplo, tive um problema com o tamanho da fonte padrão no Gmail. A interface estava bem - eu não queria aumentar o zoom (Ctrl +) com meu navegador, porque isso aumentaria o tamanho de todos os elementos da interface e seria muito feio. Eu só queria uma maneira de tornar a fonte da mensagem um pouco maior.

Com o Stylish, era muito simples e vou mostrar como. Mas antes de olharmos para a criação de seus próprios estilos de usuário, vamos falar sobre como aproveitar o trabalho de outras pessoas.

UserStyles.org

Se algo está lhe dando nos nervos, é perfeitamente possível que você não esteja sozinho. UserStyles.org é um site que permite aos usuários compartilhar os estilos que criaram. Acima você pode ver um estilo ( Adicionar rótulos aos ícones da barra de ferramentas ) recomendado pelo comentarista da MakeUseOf RandyN em resposta à nossa história sobre os botões de ícones do Gmail. Este estilo permite que você mantenha os ícones, mas adicione rótulos de texto - algo que o Google não permite que você faça.

UserStyles.org é ótimo, mas não é perfeito. Alguns dos designs tentam fazer muito (mudar totalmente a aparência de um site), e alguns são para versões antigas de sites e agora estão corrompidos. Se você está tentando consertar algo pequeno e não consegue encontrar em UserStyles.org, talvez o melhor a fazer seja fazer isso sozinho.

Criando Seu Próprio Estilo de Usuário Simples

Para criar seu próprio estilo de usuário, primeiro você precisa saber qual elemento da página você está tentando alterar e, em seguida, qual alteração deseja fazer. Então, para começar, clique com o botão direito do mouse no que você deseja alterar e escolha Inspecionar elemento . Você deve ver algo assim:

O Firefox escurece o resto da página e desenha um quadro muito claro em torno do elemento que você selecionou. Acima desse elemento, o texto que diz div # 2d6.ii.gt.adP.adO , é um grupo de classes CSS, junto com um ID (a parte que começa com #). Este é o seletor que afeta o estilo deste elemento. Ao longo da parte inferior da tela, há uma barra de navegação que permite ' atravesse a árvore DOM ', ou em palavras mais simples, vá para cima e para baixo na hierarquia de elementos que levam ao elemento que você escolheu.

O nome do jogo aqui é escolher o elemento que você deseja estilizar e fazer a seleção não tão restrita a ponto de não afetar tudo o que você deseja, nem tão ampla a ponto de atrapalhar outras coisas.

Eu cliquei em um elemento acima, div.gs , só porque gosto do nome (parece algo que não mudará tão cedo, mas é um palpite completo da minha parte). Afeta toda a área de mensagem. Assim que a área que você deseja estilizar for selecionada, clique no Estilo botão no canto inferior direito, para abrir o Regras pão:

Eu sei, é assustador no começo. Mas é aqui que você vê as diferentes regras CSS que afetam o elemento selecionado, e é aqui que você pode fazer suas próprias modificações temporárias e ver seu impacto na página em tempo real, sem recarregá-la. Mas o que você deve mudar? Clique no Propriedades botão e desmarque Apenas estilos de usuário :

Aqui você pode ver uma lista completa de tudo Regras CSS. Você pode rolar a lista para baixo até encontrar uma regra que faça sentido para o que você precisa (tamanho da fonte em nosso caso) e até mesmo clicar no ponto de interrogação próximo a ele para abrir uma página de explicação. Então, agora sabemos que queremos ajustar a propriedade font-size para todos os elementos div que têm uma classe de ' gs '(escrito em taquigrafia como div.gs )

A única questão que permanece é qual é o seu valor. Para isso, voltamos ao painel Regras e começamos a brincar:

40 pixels pode ser um pouco louco, mas essa é a idéia geral. Brinque com isso e fique à vontade para adicionar quaisquer outras propriedades, até obter a aparência desejada. Não feche a página, porque suas alterações são não salvo em qualquer lugar.

Salvando seu novo estilo

Depois de fazer com que essa parte do site fique do jeito que você deseja, é hora de salvá-la. Clique no À moda ícone na barra de complementos e selecione Escreva um novo estilo . O Stylish então gostaria de saber em quais páginas ele deve aplicar o novo estilo - no nosso caso, escolha a segunda opção, mail.google.com . Em seguida, você verá esta caixa de diálogo:

Eu já preenchi. Obviamente, escolhi um nome e algumas tags para o estilo. Mas a coisa real acontece dentro do código: a linha 3 já estava lá - a Stylish colocou no lugar para saber em quais páginas o estilo se aplica. Mas as linhas 5-7 são minhas. Vamos analisá-los:

Linha 5: div.gs { - esta parte você deve reconhecer. Este é o elemento que decidimos estilizar. A chave de abertura significa que agora vamos escrever algumas regras CSS. Linha 6: tamanho da fonte: 20px! importante; - essa é a regra que desejamos alterar (tamanho da fonte), seguida por sua nova definição (20 pixels) e, em seguida, por uma declaração! Important, o que significa que o Firefox obedeceria a essa regra mesmo se um elemento mais próximo do texto tentasse definir o tamanho da fonte para algo diferente. Linha 7:} - fechando a definição do estilo.

Em seguida, clique em Visualizar e maravilhe-se com seu trabalho:

E, finalmente, quando você ver que está funcionando, clique Salve .

Este não é um guia completo

Estou bem ciente de que, para manter este breve tutorial dentro dos limites de uma única postagem, tive que dar vários saltos e saltos. Se você ficou confuso ao longo do caminho, aceite minhas desculpas. CSS é complicado no início, mas não é tão complicado depois que você pega o jeito - e personalizar sites localmente continua sendo uma das melhores maneiras de aprender.

Se você ficou confuso com alguma coisa, pergunte-me abaixo e farei o possível para ajudar.

disco rígido externo não aparece pc

Compartilhado Compartilhado Tweet O email 5 dicas para turbinar suas máquinas Linux VirtualBox

Cansado do fraco desempenho oferecido pelas máquinas virtuais? Aqui está o que você deve fazer para aumentar o desempenho do VirtualBox.

Leia a seguir Tópicos relacionados

Navegadores
Desenvolvimento web
Ferramentas para webmasters
Mozilla Firefox
Google Chrome
Designer de Web

Sobre o autor Erez Zukerman(288 artigos publicados) Mais de Erez Zukerman

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever