¿Cómo hacer un avatar circular en tu blog WordPress?

El minuto de diseño DIY

Este sábado estreno una nueva sección en el blog, dentro de la temática crear un blog. Se trata de un apartado de diseño web DIY llamado «El minuto de diseño DIY».

Cada sábado te enseñaré cosas muy básicas de CSS, XHTML o PHP para empoderarte a personalizar mucho mejor tu tema WordPress. A veces, las técnicas serán aplicables a todos los temas, en otros (muchos) casos, dependerán del nuevo tema que yo uso en este blog, Genesis de StudioPress.

Mi misión en este blog es ayudarte a hacer más cosas, vencer de una vez el bloqueo tecnológico que paraliza tantos buenos proyectos y hacer que avances en modo DIY en el desarrollo de tu proyecto.

Episodio nº1: ¿Cómo hacer un avatar circular?

¿De qué estamos hablando?

Me refiero a personalizar la imagen de tus comentaristas y la tuya en el hilo de comentarios así como tu foto en la caja de autor, si es que tu tema la muestra.

¿Cómo hacer un avatar circular en WordPress?

El código del día

[css]

/* Cómo hacer un avatar circular
——————————————— */
.avatar {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

[/css]

¿Cómo implementarlo en tu propio tema?

  1. Copia el código arriba (pasa tu ratón arriba a la derecha, en la caja del código y haz clic en el primer botón, View Source)
  2. Desde el panel de administración de tu blog, ve a Aparencia/Editar CSS (si no ves Editar CSS, tendrás que instalarte el plugin Jetpack y activar este módulo de Editar CSS)
  3. Pega el código (CRTL V) tal cual en esta página, al final del todo si ya tienes otros elementos de personalización
  4. Guarda las modificaciones

Ya puedes disfrutar de tu avatar (y los de tus comentaristas) en un círculo sexy. Esta técnica es nativa WordPress.org y debería funcionar con todos los temas disponibles.

¡Quiero aprender más!

Genial, ¡ésa es la actitud!

Pues si quieres ver otros ejemplos de uso de esta misma técnica de etiquetas CSS? Haz Clic Aquí. Y si quieres profundizar con el tema de las etiquetas de estilo CSS, te recomiendo este manual de CSS3 (para principiantes) de los amigos de Desarrollo Web.

Feliz fin de semana, aprendiz diseñador web DIY!

Acerca del autor de esta entrada,

Franck Scipion

Acerca del autor de esta entrada,

Franck Scipion

¿Harto de nunca saber que pasos dar?

Reserva ya tu sesión 1 a 1 «Claridad Total» y saldrás con un plan de acción cristalino para llegar a tus metas a 12 meses vista. Si vas en serio y valoras tu tiempo, esta sesión es para ti.

¿Harto de nunca saber que pasos dar?

Reserva ya tu sesión 1 a 1 «Claridad Total» y saldrás con un plan de acción cristalino para llegar a tus metas a 12 meses vista. Si vas en serio y valoras tu tiempo, esta sesión es para ti.

¿Te gustaría transformar tu talento en un negocio digital y conseguir tus primeros clientes en 60 días?