Recientemente, te mostramos cómo diseñar el diseño de tus comentarios y cómo diseñar tu formulario de comentarios. Uno de nuestros usuarios nos envió un correo electrónico y preguntó: “¿cómo hiciste que tus imágenes de Gravatar fueran redondas? ¿Estás almacenando las imágenes de Gravatar localmente para hacerlas redondas?” En este artículo, te mostraremos cómo mostrar imágenes de Gravatar redondas en WordPress. Usaremos la propiedad border-radius de CSS3 para crear imágenes de Gravatar circulares.
Lo primero que debes hacer es editar el archivo style.css de tu tema. Puedes hacerlo usando un programa FTP o yendo a Apariencia » Editor en tu administrador de WordPress. A continuación, querrás agregar el siguiente código en tu archivo CSS:
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Esto debería funcionar en la mayoría de los temas de WordPress. Sin embargo, si esto no funciona en tu tema, entonces probablemente haya algún plugin o la función de tu tema interfiriendo con las clases predeterminadas que se usan para Gravatar en WordPress. Para averiguar qué clase CSS están usando las imágenes de Gravatar en tu tema, necesitas abrir una entrada de blog que tenga comentarios. Desplázate hacia abajo hasta la sección de comentarios, haz clic derecho en la imagen de Gravatar y selecciona Inspeccionar elemento. Te mostrará el código fuente de tu Gravatar, así:
Si la imagen de Gravatar tiene algo diferente a avatar, úsalo en lugar de .avatar en el código CSS anterior.
Esperamos que este artículo te haya ayudado a mostrar imágenes de gravatar redondas en tu blog de WordPress. Déjanos saber si tienes alguna pregunta o comentario dejándonos un comentario abajo.
Rex
Muy oportuno. Muchas gracias.
Soporte de WPBeginner
You’re welcome
Administrador
pujara
¿Cómo agregar imágenes de comentarios automáticamente como en tu sistema de comentarios?
Nataly
hola, funcionó, gracias, pero la descripción aparece muy arriba. sobre la imagen, ¿sabes cómo hacer que aparezca al lado de la imagen?
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.
Soporte de WPBeginner
¿Agregaste el CSS en la hoja de estilos de tu tema?
Administrador
ERFmama
Sí, lo hice. Tengo el tema Twenty Twelve.
¿Hay algún lugar específico donde deba ir? En el style.css
Edit: Never mind it suddenly worked now!
¿Puedo preguntar cómo cambiar el tamaño de los avatares por favor? ¿O ya lo has escrito en alguna parte?
¡Muchas gracias por esto!
Daniel
Funcionó, gracias
Chrissy
¡Fantástico! ¡Exactamente lo que estaba buscando! ¡Gracias, ustedes son geniales!
Jacky
¡MUCHAS GRACIAS por esto, pasé horas intentando lograrlo. ¡Proporcionaste la solución más sencilla!
Abdul Samad
Bro, gracias por este código. Soy nuevo en WP y realmente disfruto tu blog, hombre. Gracias por esto y por todos los tutoriales...
Richie
Iba a compartir este consejo y, por supuesto, lo probé primero en uno de mis sitios.
Funcionó de maravilla, simplemente cambié mi CSS de px a % para el borde moz y webkit.
Aquí es donde se puso interesante.
Fui a otro sitio, hice el mismo ajuste y no funcionó. Después de rascarme la cabeza un poco, recordé que tenía instalado el plugin WP User Avatar en el sitio donde funcionó y no lo tenía instalado en el sitio donde no funcionó.
Instalé el plugin y ¡voilà!, funcionó de maravilla.
Para ambos sitios estoy usando un tema personalizado construido sobre el framework Presswork.
En resumen, logré que funcionara pero solo con el plugin.
¿Alguna idea?
Personal editorial
Es posible que tu tema no estuviera usando la clase css .avatar, y el plugin la añadió.
Administrador
Richie
I’ll check it out. Thanks
Roselle Celina
Hola, ¡gracias por este tutorial! Está funcionando muy bien en Chrome y Firefox, pero para Safari, tengo el mismo problema: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Personal editorial
Parece que el ancho del borde es donde parece estar el problema en Safari.
Administrador
RW
Estoy de acuerdo y solo uso IE el 4% del tiempo, pero varios de mis clientes todavía usan la versión 8.
Gracias,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Gran consejo. Ten en cuenta que IE8 no renderiza esquinas redondeadas de forma nativa (border-radius). Necesitarías usar javascript, pie, etc. para esto, pero no vale la pena el problema. Por suerte, IE9 reconoce los estándares actuales...
Gracias.
Jim Burnett
Recuerdo los días en que intentábamos mantener el soporte de IE6. Ahora es IE 8 para las esquinas redondeadas. Por suerte, IE9 está mejorando.
Por otro lado, FF 3.0 no soporta ningún HTML 5. *cara triste*
¡Buen truco de CSS!