Wikia

Wiki Community

Comentários0

Dúvidas sobre CSS - Parte 2

Olá, Wikianos!

Esse post é a continuação do resumo do atendimento do dia 12 de maio. Como o CzechOut não teve tempo de responder todas as perguntas daquela vez, aqui está a segunda parte do resumo.


  • Há alguma maneira de personalizar o masthead usando CSS?

Sim! Na verdade, desde que o "user profile masthead" (cabeçalho do perfil de usuário) — ou o que eu chamarei de UPM daqui por diante — foi apresentado, muitas wikis gostam de personalizá-los de várias maneiras diferentes!

Mas não vamos nos apressar. Primeiramente, o que é o UPM? Para responder a essa pergunta, é melhor olharmos a imagem abaixo, onde nós abrimos o console do navegador e destacamos somente a ID do CSS que é a ID principal de tudo: #UserProfileMasthead:

Screen Shot 2016-05-16 at 07.21.40.png

O que percebemos é que tudo que está desde o avatar na esquerda (.masthead-avatar) até o principal retângulo à direita (.masthead-info), até todas as coisas dentro de .masthead-info como .masthead-info-lower, que contém o registro (.tally, ou nesse caso, o númerwo 320), os links de website (.UserProfileMasthead .links), e o texto ao lado direito do registro (.tally span).

Os três itens ao lado direito do retângulo principal são juntamente conhecidos como .UserProfileMasthead .details. Se você quiser afetar o espaçamento dos três parágrafos no lado direito, você precisa fazer algo como .UserProileMasthead .details { padding:20px }. Se você quiser mudar todas as palavras introdutórias nesses parágrafos — "Vivo em", "Minha ocupação é" e "Eu sou" — você notará que essas palavras estão em tags <span>. Você pode mudá-las digitando .UserProfileMasthead .details span { text-transform:lower-case } — ou como quer que você queira mudá-las.

E também há outra mudanças que você pode fazer, também, mas essas são as maiores.

Como eu posso saber os nomes dessas classes e IDs? Bem, não importa qual seja o seu navegador, você pode sempre clicar com o botão direito em uma parte da página e clicar no menu suspenso em "Inspecionar elemento". Isso abrirá uma área, usualmente dentro da própria janela do navegador, onde você pode começar a desconstruir a página. Essa ferramenta — chamada pelos navegadores de "inspetor da Web" — permite que você veja áreas específicas da página para ver como elas foram arrumadas. Pense uma máquina de raio x que faz com que você veja dentro da página. Aqui está um vídeo com instruções em inglês, e aqui está outro em português. Há provavelmente muitos outros vídeos em português sobre isso no YouTube, então não deixe de perguntar a Ana se você tiver dificuldades em encontrar as informações que você precisa em português.

Se você quer aprender mais a fundo sobre personalização do UPM, o melhor a fazer é olhar alguns dos mais criativos pela Wikia. Na Tardis, há uma página de CSS dedicada somente ao UPM. Essa página é bem detalhada e você provavelmente não terá problemas em compreendê-la. A Deadspace Wiki tem códigos ótimos na página Wikia.css — procure por "profile redesign" (remodelação de perfil). Não é muito explicado, mas eu aposto que se você tentar aprender os códigos de lá, você aprenderá alguma coisa. Depois que você se familiarizar mais com as classes e IDs que são usadas para construir um UPM, você poderá navegar pela Wikia.css de qualquer comunidade que você gosta e entenderá o que eles fizeram.

Eu quero terminar essa aula com uma palavra de prudência. Há algumas coisas que você pode mudar através de CSS, mas que você não pode mudar de acordo com os termos de uso da Wikia. Você não pode, por exemplo, fazer o masthead desaparecer. Você também não pode fazer o UPM mover de tal forma que ele fique de fora do enquadramento da página, ficando em cima do fundo nem que seja por um pixel. E, em geral, você não pode fazer nenhum elemento desaparecer. E embora isso não seja uma violação explícita dos Termos de Uso, você deve usar bom senso quando escolher as suas cores. Na imagem mostrada anteriormente, se você colocar "CzechOut" com o mesmo azul do fundo, você não poderá ler o nome de usuário. Então tente pensar primeiro na legibilidade quando você fizer o seu design. E lembre-se, nem todas as pessoas enxergam da mesma maneira, então tente usar cores que tenham um alto contraste. Isso permitirá que mais pessoas desfrutem dos seus UPMs.


Obrigada, CzechOut por mais uma ótima aula. Semana que vem postarei mais respostas.

Ao redor da rede Wikia

Wikia aleatória