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.


31 comentarios:

  1. Eres un sol, lo voy a poner en práctica en cuanto tenga un minuto.
    Muah!!!
    Anne.

    ResponderEliminar
    Respuestas
    1. No será tanto Anne! Sólo escucho lo que necesitan mis lectores como tu! :) Saludos!

      Eliminar
  2. Laura ya me estoy leyendo el blog y poniendo cosas en práctica!!!Muchas gracias!!!
    un beso

    ResponderEliminar
    Respuestas
    1. Que bien! Seguro que encuentras algo interesante que puedas aplicar a tu blog! De nada. Un abrazo.

      Eliminar
  3. LAURA... :) me parece fantástico este post, pero no me atrevo a entrar en el HTLM del blog.
    Lo hice una vez para meter un código y se me fastidió todo. Las recetas que tenia en borradores se me volvieron "locas" todas con las palabras cruzadas y sin sentido. Gracias a un amigo lo pude recuperar, así que ya te digo... para mí entrar en esa zona me da terror.
    Yo todo lo que sea en añadir gadges perfecto, y nada más.

    Un beso y gracias por tus ayudas

    ResponderEliminar
    Respuestas
    1. Ei Pepi! No tienes que tener miedo. Sobretodo antes de hacer cualquier cambio debes guardar la plantilla y si hay algo que haces mal, vuelves a poner la plantilla que tenías antes. No tengas miedo! Puedes personalizar mucho tu blog. Un abrazo.

      Eliminar
  4. Holaaa Laura, ya estoy aquí !!
    He leído tu mensaje y te agradezco mucho tus consejos y la información que me facilitas. De momento he quitado la barra de navegación, ni sabía que podía hacerse, lo del Favicón es otro rollo, tendré que mirarlo con más detenimiento.
    Todo lo que ayude para mejorar el diseño y practicidad del blog es bienvenido!!
    Muchas gracias, ahora ya me quedo por aquí para no perderme nada!!
    Besotesss!!

    ResponderEliminar
    Respuestas
    1. Hola! Encantada de tenerte po aquí!

      Tómate tu tiempo y vas mejorando poco a poco. Un abrazo.

      Eliminar
  5. En cuanto pueda lo hago! Gracias guapa

    ResponderEliminar
  6. Laura cuántas cosas aprendemos de tus tutoriales! un besazo guapa!

    ResponderEliminar
    Respuestas
    1. Eso espero María Jesús! Y si lega un día que no aprendes nada, avisa que me pondré las pilas.

      Eliminar
    2. Hola Laura, hoy me he levantado con ganas de cambios ajaj...también he redondeado el avatar...me encana cómo queda...bsts guapa

      Eliminar
    3. Hola Laura, hoy me he levantado con ganas de cambios ajaj...también he redondeado el avatar...me encana cómo queda...bsts guapa

      Eliminar
    4. Ya has visto que queda bien en el ejemplo, no! :P

      Eliminar
  7. Wow! Me ha encantado este tutorial :) Queda muy chulo ponerlo así. Un beso y feliz finde!

    ResponderEliminar
    Respuestas
    1. Que bien! Yo también pienso que le da un toque original y diferente, me encanta.
      Un abrazo.

      Eliminar
  8. Hola, qué gran tutorial <3 ¡Te lo agradezco mucho!
    Te hago una consulta, ¿cómo puedo hacer para ponerle un borde a la imagen redondeada?

    ¡Gracias de antemano!
    Besos :)

    ResponderEliminar
    Respuestas
    1. Hola Constelación!
      Estaba un poco liada y tu comentario se perdió en mi bandeja de entrada.
      Contarlo aquí sería un poco largo, o sea que lo tendrás en forma de post el sábado de la semana que viene (13 de junio), que antes tengo otros temas programados!

      Saludos y gracias por tus comentarios!

      Eliminar
    2. ¡Perfecto y muchas gracias por responder! Espero el tutorial con ansias :)

      Besos <3

      Eliminar
    3. Hola! Al final salió un poco más tarde, pero aquí está http://www.thelittlecoccinelle.com/2015/06/marco-borde-avatar-foto-comentarios.html

      Espero que te sirva.
      Saludos

      Eliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Matias, me encanta que comentes lo que piensas!

      Gracias a ti una vez más Sin los lectores los blogs no existirían!
      Saludos

      Eliminar
  10. Buenísimo, también lo apliqué. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. De nada Victoria! Cuando le encuentras el gustillo a esto de personalizar el blog...no hay quien pare. :-)
      Saludos.

      Eliminar
  11. Wooo!! Me ha encantado este tutorial ya lo he aplicado y ha quedado muy chulo así :D

    ¡Muchas gracias! Como siempre buenísimos tus posts^^
    Un besazo^^

    ResponderEliminar
    Respuestas
    1. Gracias por tus palabras Maria! Estoy encantada de que te haya funcionado y de que te guste! :-)

      Eliminar
  12. Qué mono! otra cosa resuelta por mí misma! bueno, con ayuda :P. Me hacen cada vez más gracia los sitios que recomiendan pagar para tener el blog a tu manera; con lo que ayuda a reflexionar sobre cómo tenerlo el ir haciendo ajustes paso a paso! Muuuchas gracias, una vez más!

    ResponderEliminar
    Respuestas
    1. Que bien que lo hayas resuelto y que te haya salido! Lo que comentas de tener que pagar para tener un blog a tu gusto es muy relativo. No todo el mundo tiene tiempo para dedicarle ni idea de por donde empezar. A mucha gente le pasa que al final su blog es un enganche de parches por todos lados. Cada uno tiene sus necesidades :-)
      Un abrazo

      Eliminar
  13. Hola!
    He seguido los pasos y he copiado el código en el buscador pero no me encuentra nada. También he intentado cambiar el diseño de la cajita de comentarios siguiendo tu tutorial y al copiar y guardar el código en "Añadir CSS" tampoco se me ha cambiado nada. No sé que hago mal podrías ayudarme? Gracias ^^

    ResponderEliminar
    Respuestas
    1. Hola Arisa.
      Primero de todo, si no encuentras el código, intenta buscar alguna palabra que esté en él y no el código entero, por ejemplo puedes buscar .avatar-image
      Si tampoco no lo encuentras, mira bien no vaya a ser que tengas un trozo de código comprimido, que esto pasa muy a menudo. Debes fijarte que en la parte izquierda del código no tengas un triángulo de color azul que señala el código. En caso de tenerlo , pinchas encima de él y se desplegará otro trozo de código.
      En el caso de lo que dices del CSS que no se guarda, busca una entrada en Tutoriales, donde cuento cómo puedes añadir el código CSS de otra manera, directamente en el código HTML. Seguro que te sirve de ayuda!
      Saludos!

      Eliminar