Hace poco te enseñamos cómo dar estilo a la estructura / disposición / diseño / plantilla de tus comentarios y cómo dar estilo al formulario de comentarios. Uno de nuestros usuarios nos envió un correo electrónico y nos preguntó: “¿Cómo conseguisteis que las imágenes de gravatar fueran redondas? ¿Guardáis las imágenes de gravatar localmente para que sean redondas?”. En este artículo, le mostraremos cómo mostrar imágenes gravatar redondas en WordPress. Utilizaremos la propiedad border-radius de CSS3 para crear imágenes gravatar circulares.
Lo primero que tienes que 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, debe añadir el siguiente código en su 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 su tema, entonces es probable que haya algún plugin o la función de su tema jugando con las clases por defecto utilizadas para gravatar en WordPress. Para averiguar qué clase css están usando las imágenes gravatar en tu tema, necesitas abrir una entrada de blog que tenga comentarios. Desplázate hasta la sección de comentarios y haz clic con el botón derecho en la imagen de gravatar para seleccionar Inspeccionar elemento. Se le mostrará el código fuente de su gravatar, como este:
Si la imagen de gravatar tiene algo distinto de avatar, utilícelo en lugar de .avatar en el código css anterior.
Esperamos que este artículo te haya ayudado a mostrar imágenes gravatar redondas en tu blog de WordPress. Háganos saber si usted tiene alguna pregunta o comentario dejando un comentario a continuación.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Rex says
Very timely. Thank you so much.
WPBeginner Support says
You’re welcome
Administrador
pujara says
How to add comment image automatically like in your comment system?
Nataly says
hello, It worked, thank you, but, the description appear to high. over the pic, do you know to make it appear at the side of the pic?
Therese says
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 says
Did you add the CSS in your theme’s stylesheet?
Administrador
ERFmama says
Yes I did. I have the Twenty Twelve theme.
Is there a specific place it has to go? In the style.css
Edit: Never mind it suddenly worked now!
Can I ask how to change the size of the avatars please? Or have you already written that down somewhere?
Thank you so much for this!
Daniel says
It worked, thank you
Chrissy says
Fantastic! Exactly what I was looking for! Thanks you guys rock!
Jacky says
THANK YOU so much for this, spent hours trying to accomplish. You provided the most straightforward solution!
Abdul Samad says
Bro Thanks For This Code I’m New In WP and I really Enjoying Your Blog Man Thanks For THis And All Tutorials ….
Richie says
I was going to pass along this tip and of course tried it first on one of my sites.
Worked like a champ I simply changed my CSS from px to % for the border moz and webkit.
Here’s where it got interesting.
I went to another site, did the same tweak and it didn’t work. After a little head scratching I remembered that I had the plugin WP User Avatar installed on the site that it worked on and didn’t have it installed on the site it didn’t work on.
I installed the plugin and whalah, works like a champ.
For both sites I’m using a custom theme built on the Presswork framework.
Bottom line, I got it to work but only with the plugin.
Any ideas?
Editorial Staff says
It is possible that your theme wasn’t using the css class .avatar, and the plugin added that.
Administrador
Richie says
I’ll check it out. Thanks
Roselle Celina says
Hi there, thanks for this tutorial! It’s working great on chrome and Firefox, but for Safari, I’m getting this same problem: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Editorial Staff says
It seems that the border width is where the issue seems to be in safari.
Administrador
RW says
I agree and I only use IE about 4% of the time but several of my customers are still on 8.
Thanks,
Bob
Martin says
If somebody uses IE8 does not deserve for round image
RW says
Great tip. Please note that IE8 doesn’t natively render round corners (border-radius). You’d need to use javascript, pie, etc… for this but not worth the trouble. Luckily IE9 recognizes current standards…
Thanks.
Jim Burnett says
I remember the days we were trying to keep IE6 support in the loop. Not it’s IE 8 for rounded corners. Lucky us, IE9 is picking up.
Then again, FF 3.0 doesn’t support any HTML 5. *sad face*
Cool CSS trick though!