Diseño de la caja de comentarios Parte 2: Tamaño y forma del avatar del comentarista

¡Hola!
Les he preguntado en COMUNIDAD BLOGGER ARGENTINA qué tutoriales quieren que haga en mi blog. Uno de los pedidos me lo ha hecho Francisco Vogt del blog Perdido entre los libros.

Muchos siempre tienen la duda de cómo modificar el tamaño del avatar en la zona de comentarios, o su forma. Dependiendo de la plantilla de un blog, el código a modificar es distinto así que tendremos que hacer uso de Inspeccionar en este caso.

¡Empecemos!

1. Deben ir a Plantilla - Crear/Restablecer copia de seguridad (PASO OBLIGATORIO)
2. Plantilla - Editor html
3. Dar click en el cuadro de código y hacer Ctrl+f

Ahora bien, en otra ventana deben abrir su blog y en una entrada con comentarios, hacer click derecho sobre el avatar de alguien que comentó y dar Inspeccionar. 

En mi caso es este:

.comments .avatar-image-container img {

En otros casos puede ser:

<div class="avatar-image-container">

1. Volvemos a la ventana de código (si dentro de la caja de código no aparece la ventanita del buscador, hagan Ctrl+f nuevamente) y buscan el código que hayan obtenido de su avatar. Puede llegar a suceder que aparezcan varias líneas bajo ese elemento y/o etiqueta. Yo me guiaré por el primero que pasé arriba ya que es el que tengo. Cuando aparece una llave { , significa que a continuación aparecerán datos que definen a ese elemento/objeto. En este caso nos referimos al avatar. 
2. Debería aparecer height y width como atributos, en este momento es cuestión de probar a base de prueba y error. Algo a aclarar es que está en la mayoría el border-radius, tengan cuidado ya que si modifican height y width, también deben modificar el border-radius para que no deforme a la circunferencia. Si lo que quieren es que sea cuadrado el avatar, solo deben borrar la línea de border-radius.
3. En esto es necesario estar guardando plantilla pero sin salir de la ventana de código sino tener otra ventana en el navegador con el blog abierto e ir actualizando para ir viendo los cambios. En caso de que no les guste el cambio, vuelven a la ventana de código y hacen click dentro. Luego hacen Ctrl+z hasta que se deshagan las modificaciones.

¡ESO ES TODO!

 Recuerda seguirme en facebook para estar al día de mis actualizaciones: