Recentemente, mostramos a você como estilizar o layout dos seus comentários e como estilizar o formulário de comentários. Um de nossos usuários nos enviou um e-mail perguntando: “como você deixou suas imagens de gravatar redondas? Você está armazenando as imagens de gravatar localmente para deixá-las redondas?” Neste artigo, mostraremos como exibir imagens de gravatar redondas no WordPress. Usaremos a propriedade border-radius do CSS3 para criar imagens de gravatar circulares.
A primeira coisa que você precisa fazer é editar o arquivo style.css do seu tema. Você pode fazer isso usando um programa FTP ou acessando Aparência » Editor no seu painel do WordPress. Em seguida, adicione o seguinte código ao seu arquivo CSS:
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Isso deve funcionar na maioria dos temas do WordPress. No entanto, se isso não funcionar no seu tema, provavelmente há algum plugin ou a função do seu tema interferindo nas classes padrão usadas para gravatar no WordPress. Para descobrir qual classe CSS as imagens de gravatar estão usando no seu tema, você precisa abrir uma postagem de blog que tenha comentários. Role para baixo até a seção de comentários e clique com o botão direito na imagem de gravatar para selecionar Inspecionar Elemento. Isso mostrará o código-fonte do seu gravatar, assim:
Se a imagem de gravatar tiver algo diferente de avatar, use isso em vez de .avatar no código CSS acima.
Esperamos que este artigo tenha ajudado você a exibir imagens gravatar redondas em seu blog WordPress. Informe-nos se tiver alguma dúvida ou feedback deixando um comentário abaixo.
Rex
Muito oportuno. Muito obrigado.
WPBeginner Support
You’re welcome
Admin
pujara
Como adicionar imagem de comentário automaticamente como no seu sistema de comentários?
Nataly
olá, funcionou, obrigado, mas a descrição parece estar muito alta. sobre a foto, você sabe como fazê-la aparecer ao lado da foto?
Therese
I can’t make it work.
I can’t figure out where exactly to put it, nothing seams to change. I’ve looked at the source code and it’s got avatar just like the example source code.
WPBeginner Support
Você adicionou o CSS na folha de estilos do seu tema?
Admin
ERFmama
Sim, eu fiz. Eu tenho o tema Twenty Twelve.
Existe um lugar específico onde ele tem que ir? No style.css
Edit: Never mind it suddenly worked now!
Posso perguntar como mudar o tamanho dos avatares, por favor? Ou você já escreveu isso em algum lugar?
Muito obrigado por isso!
Daniel
Funcionou, obrigado
Chrissy
Fantástico! Exatamente o que eu estava procurando! Obrigado, vocês são demais!
Jacky
MUITO OBRIGADO por isso, passei horas tentando realizar. Você forneceu a solução mais direta!
Abdul Samad
Bro Obrigado por este código, sou novo no WP e estou realmente curtindo seu blog, cara, obrigado por isso e por todos os tutoriais...
Richie
Eu ia passar essa dica e, claro, testei primeiro em um dos meus sites.
Funcionou como um encanto. Eu simplesmente mudei meu CSS de px para % para a borda moz e webkit.
É aqui que as coisas ficaram interessantes.
Fui para outro site, fiz o mesmo ajuste e não funcionou. Depois de quebrar um pouco a cabeça, lembrei que tinha o plugin WP User Avatar instalado no site em que funcionou e não tinha instalado no site em que não funcionou.
Instalei o plugin e pronto, funciona como um encanto.
Para ambos os sites, estou usando um tema personalizado construído no framework Presswork.
Resumindo, consegui fazer funcionar, mas apenas com o plugin.
Alguma ideia?
Equipe Editorial
É possível que seu tema não estivesse usando a classe CSS .avatar, e o plugin a adicionou.
Admin
Richie
I’ll check it out. Thanks
Roselle Celina
Olá, obrigado por este tutorial! Está funcionando bem no Chrome e Firefox, mas para o Safari, estou tendo o mesmo problema: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Equipe Editorial
Parece que a largura da borda é onde o problema parece estar no Safari.
Admin
RW
Concordo e só uso o IE cerca de 4% do tempo, mas vários dos meus clientes ainda estão no 8.
Obrigado,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Ótima dica. Por favor, note que o IE8 não renderiza cantos arredondados nativamente (border-radius). Você precisaria usar javascript, pie, etc... para isso, mas não vale a pena o incômodo. Felizmente, o IE9 reconhece os padrões atuais...
Obrigado.
Jim Burnett
Lembro-me dos dias em que estávamos tentando manter o suporte ao IE6. Agora é o IE 8 para cantos arredondados. Sorte a nossa, o IE9 está pegando.
Por outro lado, o FF 3.0 não suporta nenhum HTML 5. *cara triste*
Truque CSS legal, no entanto!