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!

  

11 comentarios:

  1. ¡Hola! Te acabo de nominar al Liebster Award. Si deseas realizarlo visita este enlace http://leebooksleebooks.blogspot.com/2017/02/liebster-award.html

    ¡Felicidades!

    ResponderEliminar
  2. Hola Mar!
    Me encantan todos tus tutoriales. La verdad que la parte de comentarios es super dificil y mas si debes utilizar todos codigos html. Yo te quiero pedir un tutorial sobre las citas. Cómo modificar el color, agregarle textura,etc. Vi muchos sitios donde lo tienen super personalizado y me encanta.
    Gracias por la entrada, un beso!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Sí y es algo que todavía me cuesta ya que cuando le agarras la mano, sale algo más actualizado. Es un no terminar. Si te refieres a ponerle un fondo a las citas, ya hice un tutorial. Si no es eso, dejame un ejemplo aquí.

      ¡Saludos!

      Eliminar
  3. Hola, Maar!
    Me encantan estas entradas porque son cosas que no tengo idea cómo se odifican y me da pereza buscar jajaja
    Voy a aplicar algunas muy pronto en el blog :)
    Gracias por la entrada.
    Besos

    ResponderEliminar
    Respuestas
    1. ¡Hola Flor!
      Estos días estuve con un poco de flojera con los tutoriales. Pero ya me pondré con más tutoriales para ustedes <3

      ¡Saludos!

      Eliminar
  4. Hola Mar! Por lo que veo sos de las mias♥ Yo también me llevo muy bien con el diseño web y tenia ideas de hacer proximamente algunos tutoriales sobre esto. Asi que espero que te vaya genial con los tutoriales y segui haciendolos ;)

    Saludos!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Jaz!

      ¡Que genial! ♥ Que bueno que te animes a hacerlo y en cuanto lo hagas dímelo así te afilio a mi blog =D

      Eliminar
  5. Hola!! Gracias por otro tutorial. Capaz le doy una renovada a la caja de comentarios. Lo que me molesta mucho en mi diseño son las respuestas! cuando respondo un comentario se me pone un fondo de color gris y no se como sacarlo para que quede en blanco xD
    Un beso

    ResponderEliminar
    Respuestas
    1. ¡Hola Anto! La caja de comentarios es una Odisea siempre. Trataré de hacer o buscar otro diseños para ustedes <3

      Eliminar
  6. Hola Mar!
    Estudiante de ingeniería en informática! ¿Dónde estudias? Yo estoy dando el ingreso de sistemas en la UTN, y me está costando horrores... pero bueno.
    Gracias por el tutorial, voy a quedarme por acá a chusmear un poco tus otros tutoriales :D
    Explicas de una forma bastante sencilla los pasos a seguir, y estos tips siempre son bienvenidos y útiles
    ¡Saludos!

    ResponderEliminar