Cómo mostrar imágenes redondas de Gravatar en WordPress

Recientemente, te mostramos cómo dar estilo a tu diseño de comentarios y cómo dar estilo a tu formulario de comentarios. Uno de nuestros usuarios nos ha enviado un correo electrónico y nos ha preguntado "¿cómo habéis hecho que las imágenes de gravatar sean redondas? ¿Guardas las imágenes de gravatar localmente para que sean redondas?" En este artículo, te mostraremos cómo mostrar imágenes de gravatar redondas en WordPress. Utilizaremos la propiedad border-radius de CSS3 para crear imágenes gravatar circulares.

Lo primero que debes hacer es editar el archivo style.css de tu tema. Puedes hacerlo utilizando un programa FTP o yendo a Apariencia " Editor en tu administración de WordPress. A continuación, debes añadir 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 no funciona en tu tema, es probable que algún plugin o la función de tu tema esté alterando las clases por defecto utilizadas para gravatar en WordPress. Para averiguar qué clase css utilizan las imágenes de gravatar en tu tema, tienes que abrir una entrada del blog que tenga comentarios. Desplázate hasta la sección de comentarios y haz clic con el botón derecho del ratón en la imagen de gravatar para seleccionar Inspeccionar elemento. Te mostrará el código fuente de tu gravatar, así:

Encontrar la clase css utilizada por el icono de gravatar

Si la imagen de gravatar tiene algo distinto a avatar entonces usa eso 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. Haznos saber si tienes alguna pregunta o comentario dejando un comentario abajo.

Si quieres conocer otros artículos parecidos a Cómo mostrar imágenes redondas de Gravatar en WordPress puedes visitar la categoría Themes.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up