Redondea las fotos de tus comentarios, con una sola línea de código

25.2.15

La verdad es que hay mucha gente que no le gustan los iconos o las pequeñas fotos cuadradas, lo prefieren todo redondo.

Un día ya te conté cómo puedes poner tus iconos del Linkwithin redondos, hoy le toca el turno a las fotos de los usuarios que comentan en tu post.

¿Te atreves a cambiar su aspecto?

fotos redondas comentarios



Simplemente cambiando el radio del borde de las fotos, conseguirás un aspecto diferente a tus comentarios.


1. Entra en "Plantilla"

2. Clica Editar HTML


3. Clica encima de tu código y a continuación presiona  Control + f (command + f si tienes Mac) al mismo tiempo y te aparecerá este cuadro de búsqueda



4. Busca el siguiente código


  #comments .avatar-image-container img 
  {
     border: 1px solid $(image.border.color);
  }





Si el valor del borde está a 1px, cámbialo a 0.

Te quedará así:



  #comments .avatar-image-container img 
   {
     border: 0px solid $(image.border.color);
  }





5. Para redondear los bordes de la foto sólo tienes que añadir una línea de código antes de cerrar la llave }

Si no añades nada, la foto se ve por defecto cuadrada.

Cómo más grande sea el valor, más redonda será la pequeña foto de la persona que hace el comentario.

A continuación te enseño como queda con diferentes valores del radio.



  border-radius: 5px;








  border-radius: 10px;







  border-radius: 15px;






Las fotos hacen 36px de ancho, por lo tanto para hacerlas redondas necesitas poner 18px.




  border-radius: 18px;






Espero que te haya gustado. 

¿Te gustaría saber cómo puedes personalizar  más los comentarios?  No te pierdas los próximos posts!



Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.