Como corrigir pequenos aborrecimentos na web com elegante [firefox e cromo]

Web designers têm uma tarefa quase impossível. Eles precisam vir para cima com um design que agrada a todos. Quando se fala de um serviço como o Gmail, usado por incontáveis ​​milhões de pessoas em todo o mundo, você pode realmente cair o “quase” parte - é simplesmente impossível. Mesmo se um redesenho é muito querido pela maioria das pessoas, sempre haverá usuários que realmente não gostam do novo visual.

Às vezes, há o suficiente desses usuários para forçar uma empresa a recuar, como o Google fez recentemente com os botões de ícones do Gmail. Mas o que se há algo que você realmente odeiam, e que a empresa não mudá-lo de volta? Você está preso com ele para sempre? Graças a estilos do usuário, você pode corrigir esses problemas por si próprio.

Apresentando Stylish

Elegante é um add-on gratuito disponível tanto para Firefox e Chrome, e permite que você faça algo muito mágico - aplicar seus próprios estilos de elementos do Web page. Mesmo se você não for um desenvolvedor web e você nunca tenha escrito um pouco de CSS em sua vida, este é muito mais fácil do que parece. Você pode usar elegante para transformar sites completamente (como eu lhe mostrarei na próxima seção), mas mais importante ainda, você pode usar Stylish para corrigir pequenos aborrecimentos em minutos.

Por exemplo, eu tive um problema com o tamanho da fonte padrão no Gmail. A interface era bom - eu não queria para fazer zoom (Ctrl +) com o meu navegador, porque isso iria aumentar o tamanho de todos os elementos da interface e ser realmente feio. Eu só queria uma maneira de tornar a fonte mensagem ligeiramente maior.

Com design elegante, foi realmente simples, e eu vou lhe mostrar como. Mas antes de olharmos para criar seus próprios estilos do usuário, vamos falar sobre alavancar o trabalho de outras pessoas.

Video: Mozilla Firefox 11 - 3D view of the structure of the page

UserStyles.org

Se algo está recebendo em seus nervos, é inteiramente possível que você não está sozinho. UserStyles.org é um site que permite aos usuários compartilhar estilos que eles criaram. Acima você pode ver um estilo (Adicione etiquetas aos ícones da barra de ferramentas) Recomendado por MakeUseOf comentarista RandyN em resposta a nossa história sobre o ícone do Gmail botões. Este estilo permite que você mantenha os ícones, mas adicionar rótulos de texto - algo que o Google não vai deixar você fazer.

UserStyles.org é grande, mas não é perfeito. Alguns dos projetos tentar fazer muito (alterar a aparência de um site inteiramente), e alguns são para versões antigas de sites e agora estão quebradas. Se você está tentando consertar algo pequeno e não pode encontrá-lo em UserStyles.org, talvez o melhor curso de ação é fazê-lo em seu próprio país.

Criando seu próprio estilo simples Usuário

Para criar seu próprio estilo de usuário, primeiro você precisa saber o elemento da página que você está tentando mudar, e então o que a mudança que você quer fazer. Então, para começar, clique com o botão direito o que quer que é que você quer mudar, e escolher Inspecionar elemento. Você deve ver algo como isto:

Firefox escurece o resto da página, e desenha um quadro muito claro em torno do elemento selecionado. Acima desse elemento, o texto que diz div # 2d6.ii.gt.adP.adO, é um monte de classes CSS, juntamente com um ID (a parte que começa com #). Este é o seletor que afeta o estilo para este elemento. Ao longo da parte inferior da tela há uma barra de navegação que lhe permite “percorrer a árvore DOM“, Ou em palavras mais simples, ir para cima e para baixo na hierarquia dos elementos principais para o elemento que você escolheu.

O nome do jogo aqui é escolher o elemento que você deseja estilo, e fazer a seleção não tão estreito que não vai afetar tudo o que você deseja afetar, nem tão ampla que iria atrapalhar outras coisas.

Eu cliquei um elemento superior, div.gs, só porque eu gosto seu nome (parece ser algo que não vai mudar muito em breve, mas isso é uma suposição completa da minha parte). Ela afeta toda a área de mensagem. Uma vez que a área que você deseja estilo é selecionado, clique no Estilo botão no canto inferior direito, para abrir o Regras painel:

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

Aqui você pode ver uma lista completa de todos regras CSS. Você pode rolar a lista até encontrar uma regra que faz sentido para o que você precisa (font-size no nosso caso), e até mesmo clique no ponto de interrogação ao lado dele para abrir uma página de explicação. Então, agora sabemos que quiser 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 é o que nós queremos o seu valor ser. Para isso, vamos voltar ao painel de regras e começar a brincar:

40 pixels pode ser um pouco louco, mas você começa a idéia geral. Brincar com isso, e se sentir livre para adicionar quaisquer outras propriedades, até chegar a aparência que você estava indo para. Não se esqueça de fechar a página, porque as alterações são não salvo em qualquer lugar.

Salvando o seu novo estilo

Assim que tiver esta parte do site para olhar apenas como você quer, é hora de guardá-lo. Clique no À moda ícone no add-on bar, e selecione “Escrever novo estilo”. Elegante, então, quer saber sobre as páginas que ele deve aplicar o novo estilo - no nosso caso, escolher a segunda opção, “mail.google.com”. Em seguida, você verá este diálogo:

Já encheu-lo. Obviamente, eu escolhi um nome e algumas tags para o estilo. Mas a coisa real acontece dentro do código: Linha 3 já estava lá - Elegante colocá-lo no lugar para que ele sabe sobre as páginas que o estilo se aplica. Mas a linha 5-7 são meus. Vamos analisá-los:

Linha 5: div.gs { - Nesta parte você deve reconhecer. Este é o elemento decidimos estilo. A chave de abertura significa que estamos indo agora para escrever algumas regras CSS.

Linha 6: font-size: 20px importante- - essa é a regra que deseja mudar (font-size), seguido por sua nova definição (20 pixels), e em seguida por um “importante!” Declaração, o que significa Firefox iria obedecer a essa regra, mesmo que um elemento “mais perto” do texto tenta definir o tamanho da fonte para algo diferente.

Linha 7:} - fechando a definição de estilo.

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

E, finalmente, uma vez que você ver que ele está trabalhando, clique em Salve .

Este não é um guia completo

Estou bem ciente de que, para manter este curto tutorial dentro dos limites de um único post, eu tive que fazer uma série de saltos e saltos. Se você estava confuso ao longo do caminho, por favor, aceite minhas desculpas. CSS é complicado no início, mas não é tão complicado quando você pegar o jeito dele - e personalização de sites localmente continua sendo uma das melhores maneiras de aprender.

Se você foi confundido por qualquer coisa, por favor me perguntar abaixo e eu vou fazer o meu melhor para ajudar.