¿Avatares redondos y algo más grandes? Fácil con CSS | Oloblogger Esto es tan fácil que casi me da vergüenza publicarlo, pero se sale de lo normal y eso ya es un moti...

15 de febrero de 2012

¿Avatares redondos y algo más grandes? Fácil con CSS

Esto es tan fácil que casi me da vergüenza publicarlo, pero se sale de lo normal y eso ya es un motivo para que a alguien le pueda resultar interesante.


Para conseguir que los avatares que se muestran junto a los comentarios, se vean redondos en lugar cuadrados, no hay mas que localizar la clase CSS que los gobierna y aplicar la propiedad border-radius.



border-radius nos sirve, como su traducción casi nos indica, para crear bordes redondeados. En este generador online podéis ver cómo funciona esa propiedad si no la conocéis y a la derecha, una demo con dos enlaces para visualizar lo que pretendemos conseguir.


Como queremos que la silueta sea absolutamente circular, el valor en píxeles del radio de la curva, tendrá que ser al menos el de la mitad del ancho del cuadrado a reconvertir. Traducción: valor=la mitad del ancho. De todas formas creo que no hay inconveniente en que sea un valor mayor como vamos a ver y así eliminamos posibles fallos por efecto de la incorporación de bordes.

En Blogger los avatares son de 36x36 px así que esa medida es la que nos sirve para esta plataforma. En cuanto a la clase, esta es .avatar-image-container. Si queremos abundar, para el que tenga los nuevos comentarios anidados le ponemos .comments delante:

.comments .avatar-image-container {
border-radius: 36px;
}

Y ya está, con eso tenemos nuestros avatares redondos y ahora sólo vamos a mejorar un poquito.

Si queremos que esto nos funcione en el máximo posible de navegadores, aunque sean versiones antiguas, le añadimos los kits de compatibilidad de los más usuales. Cuando hagáis esto no olvidéis que la propiedad original (sin prefijos), debe ir la última, detrás de las otras. De paso añadimos también un borde del color que prefiramos:

.comments .avatar-image-container {
border: 2px solid #000000;
-webkit-border-radius: 36px; /*Safari-Chrome*/
-moz-border-radius: 36px; /*Firefox*/
border-radius: 36px;
}

Cómo hacerlos más grandes


Los avatares son algo pequeños en Blogger y este ajuste los hace parecer todavía más diminutos debido al "recorte" de las esquinas. Por eso y como complemento, vamos a ver la forma de hacerlos redondos y al mismo tiempo agrandarlos un poco.

Lo del tamaño está algo limitado por la calidad de la miniatura que Blogger proporciona y por eso siempre estoy hablando de un cambio de poca envergadura. El motivo es que la imagen es de 36px y si ampliamos demasiado con CSS, esta simplemente se redimensiona y la calidad resultante es muy deficiente. A la izquierda un ejemplo de una imagen de 36px ampliada a 100px.

Sin embargo, si ampliamos sólo un poco, nuestros ojos no percibirán tanto esa deficiencia. Servidor está usando actualmente una redimensión de 48px y creo que el resultado es satisfactorio.

En este caso habría que ajustar el ancho y el alto del contenedor y lo mismo para la imagen, cosa que hacemos con el siguiente código. Si sólo queréis ampliar el avatar, quitamos el border-radius y listo.

.comments .avatar-image-container {
overflow: hidden;
width: 48px;
height: 48px;
max-height: 48px;
border: 4px solid $#000000;
border-radius: 48px;
}
.comments .avatar-image-container img {
width: 48px;
height: 48px;
}

No tengo ninguna plantilla para hacer la prueba con el sistema de comentarios antiguo, pero creo recordar que las clases que se usaban para los avatares eran estas mismas. En ese caso, con quitar .comments de los anteriores códigos, el sistema os funcionará igualmente sin problemas.

16-Feb-2012. Se me olvidó que esta era una entrada BPT (Blogger Para Torpes) y no avisé de que la parte de estilo (CSS), en Blogger va entre las etiquetas SKIN. Por tanto, estos códigos hay que insertarlos antes de }]]></b:skin> para que funcionen.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

58 comentarios :

  1. Hola, mira ando desesperado llevo dias y dias buscando un menu para mi blog y no consigo nada he visto que tu tienes uno que aparecen mucho menus pero me cuesta mucho hacerlo...
    Podrias hacer un tuto de un menu sencillo .... ?
    O como hacer uno por favor Ayuda...
    Mi blog: www.reventanime.blogspot.com

    Gracias espero que me puedas ayudar.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Aqui un esquema mas o menos del menu.......
      http://i43.tinypic.com/2wem4wn.jpg
      :)

      Eliminar
    2. Pon la palabra "menu" en el buscador y te aparecerán varios ejemplos. No te pierdas una entrada que se llama "Crear fácilmente un menú". Ahí se hace referencia a una herramienta online con la que generar el código para un buen puñado de modelos distintos.

      Si la idea que llevas es muy distinta, sería mejor que me la terminaras de "dibujar" y si puedo y sé, pues intento publicar cómo se hace.

      Eliminar
    3. A ya vi ese tuto pero ne entre en la pag ya que las fotos no me convencia pero ahora que me he metido he visto que esta muy bien GRACIAS

      Eliminar
  2. ¡Aaaaaahhhhhhhh! Me quedé con la boca abierta por el cambio de plantila. ¡Es herrrrrrmosaaa!
    Voy a probar con los avatares, y no es una tontería, para legos como yo todo es importante!

    ResponderEliminar
  3. Hola Oloman, encontré un error en tu plantilla. Al pasar el cursor sobre el boton para compartir EN FACEBOOK aparece el mensaje "Compartir en Twitter". También quería decirte que yo también publiqué en mi blog un tutorial muy semejante a este:
    http://www.sinlevantarlapiz.com/2012/02/personalizar-avatares-en-los.html

    Gracias, hasta la próxima.

    ResponderEliminar
    Respuestas
    1. Gracias por el aviso. Ya lo he subsanado; un error en el "title".

      He visto tu entrada y le das un enfoque más amplio explicando varias maneras de cambiar el aspecto del avatar. Perfecto ;)

      Eliminar
    2. Muchas Gracias Lucas, justo iba a preguntar a Oloman cómo aplicar el código y lo he descubierto en tu entrada :)

      Eliminar
    3. En la parte CSS, Antes del cierre SKIN. No siempre incluyo ese detalle en las entradas porque lo he dicho en muchas ocasiones y a veces se me olvida. Lo incluyo.

      Eliminar
  4. La verdad, es que los avatares se ven mejor redondeados que con su estilo cuadrado. Así que he aprovechado y jugado un poco con tus dos ejemplos y al final lo voy a dejar con la medida estándar.

    ResponderEliminar
  5. Gracias por el aporte oloman :D

    ResponderEliminar
  6. Qué bonito Oloman!!! ya probaré si me sale.

    La plantilla te ha quedado genial, limpia, clara :)

    Saludos.

    ResponderEliminar
  7. Hola Oloman, que agradable plantilla traes... ;)
    Me encanto esto de los avatares, va mucho con la estética de nuestros blogs.
    Es genial a mi parecer.
    Saludos.

    ResponderEliminar
  8. Oloman los avatares, ahora que comento se ven desubicados, corridos hacia un lado.

    ResponderEliminar
    Respuestas
    1. Gracias Roudy. Ayer, que me puse a tocar cositas y borré sin querer un max-width. Arreglado... creo ;)

      Eliminar
  9. Hola me podrías decir como puedo introducir esto en wordpress, me agrada mucho este efecto redondeado, lo quisiera implementar en este blog www.the-genuine.com

    ResponderEliminar
  10. No conozco bien esa plataforma, pero pienso que con esto podrás hacer algo parecido. El problema es que he visto que no hay un contenedor específico con clase propia para el avatar en Wordpress:
    .comment-author img {overflow: hidden;
    width: 32px;
    height: 32px;
    border: 4px solid $#000000;
    border-radius: 32px;}

    ResponderEliminar
  11. Pero oloman donde tendría que implementar el escrito

    ResponderEliminar
    Respuestas
    1. ¿Puedes incorporar estilos (CSS) o modificar tu plantilla en WordPress? Es que ahora que recuerdo, me parece que en la versión gratuita no podéis. Si es como me parece, va a ser que de ninguna manera.

      Eliminar
    2. Hola Oloman yo tengo wordpress de pago, quiero decir que es propio, a ver si me puedes echar un cable con este tuto por favor, si puedes.
      Gracias

      Eliminar
    3. Puedo intentar echar un vistazo si me pasas la dirección de tu sitio, pero no te prometo nada porque WordPress no lo conozco.

      Eliminar
  12. Oloman los avatares en IE9 se ven cuadrados

    ResponderEliminar
    Respuestas
    1. ¿Te refieres a mi blog o en general?

      Eliminar
    2. Oloman me refiero al mio,lo puse pero aparecen cuadrados por lo que decidi quitar el codigo

      Eliminar
    3. ¿De todas formas te salen cuadrados no? Pues deja el código y así veo qué ocurre. Luego me pasas la dirección de un post con comentarios y en cuanto pueda lo veo.

      Eliminar
  13. Como hago para que me funcionen oloman

    ResponderEliminar
    Respuestas
    1. ¿Leiste lo que contesté en 13.3?

      Eliminar
  14. Hola, me funcionaban medio mal.. :/
    se veia la mitad de los avatares.. de todos. Crees que haya una forma para que TODOS los avatares de los comentaristas sean los mismos menos los del autor?

    ResponderEliminar
    Respuestas
    1. Quizás con JavaScript, pero no se me ocurre nada que no lleve un mini-programa de ese tipo.

      PD: Me gusta el estilo retro-arquitecto de tu blog ;)

      Eliminar
  15. Me ha dado un trabajo de aquellos! :)
    No me quedaron como a vos, tengo divididos los del autor/comentaristas...en fin, tiene que ver el tamaño de la imágen que subimos?

    ResponderEliminar
    Respuestas
    1. No. De hecho dependiendo del tipo de perfil que tengas (Blogger-Google Plus), la imagen es de distinto tamaño. Puedes comprobarlo en algunas de las que hay aquí mismo con botón derecho>abrir imagen en nueva ventana

      Pero algo si puedes mejorar. Tienes un error tipográfico aquí:
      border: 4px solid $black;

      Ese símbolo de dólar lo tienes que quitar. Luego, si quieres, añade en esa misma parte un margin-right:5px;

      Eliminar
  16. Algo no hago bien... se me corta el avatar a casi la mitad, he probado a poner el margin ese, pero no me funciona... en que me he equivocado? me podrías ayudar?

    ResponderEliminar
  17. Ya lo he solucionado, gracias a Amiitha que me ha pasado el seguiente código me ha quedado genial y se ve perfectamente en el Opera ;)

    /* Avatar redondo */
    .comments .avatar-image-container {
    position:relative;
    float: left;
    overflow: hidden;
    width: 50px ;
    height: 50px;
    max-height: 50px ;
    margin: 0 0 0 -15px;
    padding: 0px;
    border: 2px solid #A4A4A4;
    border-radius: 50px; }

    .comments .avatar-image-container img {
    width: 50px;
    height: 50px;
    max-width:50px;
    border-radius:50px;}

    .comment-thread li li .avatar-image-container {
    margin-left: 0px; }

    ResponderEliminar
    Respuestas
    1. Estupendo Alexia. Ese es más completo que el que yo di. Gracias por pasarlo.

      Eliminar
    2. exelente me quedo de maravilla pero tengo un problemilla desaparecio el lapiz de las respuestas del autor

      Eliminar
    3. Aquí tienes como destacar los comentarios del autor con ese lápiz o con otra cosa si lo deseas.

      Eliminar
    4. Alexia y Oloman, muchísimas gracias, lo he podido hacer con mis avatares y me ha quedado genial.

      Eliminar
  18. Hola oloman nuevamente por aqui, queria saber si esta entrada de avatares redondeados es justo la que tienes tu aqui en oloblogger, con los comentarios numerados en forma ascendente ejemplo de lo que digo seria comentario 18, 18.1, 18.2 y sucesivamente y si el efecto redondeado es este misma entrada.

    Gracias

    ResponderEliminar
    Respuestas
    1. Sí. Este sistema es el que puse aquí. Casi todo lo que publico es porque lo uso o lo he usado. Igual con la numeración de comentarios, pero eso está en esta otra entrada.

      Eliminar
  19. Hola Oloman, bueno con la ayuda de tu tuto mas otras modificaciones e podido sacar este resultado satisfactorio para mi, pero resulta que no me salen las imágenes dentro de los circulo del avatar, cosa que veo que solo sucede en mi blog, porque en tu blog salen perfectamente, a ver si me puedes echar una mano con esto.
    También quería poner en los comentarios dos cosillas mas que serian:

    1. DESTACAR COMENTARIOS DEL AUTOR: ICONO, BASE64 Y OTRAS HIERBAS
    2. NUMERAR LOS NUEVOS COMENTARIOS BLOGGER SIN JAVASCRIPT. OPCIÓN CON SUB-ÍNDICES.

    cosa que me esta resultando difícil al tener una plantilla totalmente modificada, te enviare la plantilla para que le puedes echar un vistazo y decirme como puedo integrar estas dos entradas de tu blog en la plantilla y a su vez solucionar el inconveniente de las imágenes que no se muestran, aquí una entrada de mi blog para que veas que no me salen las imágenes: http://www.info-noti-web.com/2012/04/battlefield-5-en-proyecto-glass.html

    Este es el enlace de la plantilla que tengo instalada:
    https://rapidshare.com/files/836081663/fuuthemev14-blogger.zip

    Veo que también en mi blog no sale la palabra RESPONDER debajo de los comentarios vuelvo y repito, como en tu blog.

    Gracias de antemano
    un saludo.
    http://www.info-noti-web.com/

    ResponderEliminar
    Respuestas
    1. Todo los problemas que comentas tienen el mismo origen y es que estás usando el sistema de comentarios antiguo. Necesitas habilitar los nuevos comentarios anidados. Pon en el buscador eso y te saldrán varios tutoriales pero comienza por el que habla sobre cómo instalarlos en plantillas modificadas.

      Eliminar
  20. Que tal Oloman sabes como puedo ponerle imagen a los comentarios anonimos?

    Gracias

    ResponderEliminar
    Respuestas
    1. Había un sistema fácil con CSS, pero Blogger cambió el código y ya no hay forma con eso. Yo los evito. No permito anónimos, aunque no es por lo del avatar :)

      Eliminar
  21. Hola, apesar de ser un negado con esto del HTML, ( BPT, es for me =) ) he logrado introducir los cambios que indicas paea los avatares y para numerar los coemntarios.

    Gracias! pero me aparece un error, digamos que la foto u avatar no rellena el circulo completamente, como es el caso de la tuya por ejemplo. Queda del lado derecho una especie de semiluna en negro, y no se bien a que se debe. Toma en cuenta que soy negado para esto, sigo las intrucciones que poneis en los blogs de entendidos lo mejor que puedo jajaja

    Te dejo el blog, para que si puedes te fijes en lo que te digo, y si puedes decirme a que se podria deber te lo agardeceria

    Gracias de antemano y saludos

    ResponderEliminar
  22. Hola again,

    He revisado un poco, cambie los tamaños que ponias en el ejemplo y quite lo de .coments, resulatado se ve mas pequeño, pero si rellena el circulo totalmente.

    Igual suena un poco absurdo, pero si aumento de 48 a 60, deberia ser mas grande, no?

    te dejo el blog, y si puedes miralo para que veas, si me puedes indicar algo te lo agradeceria

    http://futbolbarsayotrashistorias.blogspot.com.es/

    ResponderEliminar
  23. Y por último y para no darte la brasa, tema solucionado. Me las apañe toquiteando un poco, y con cuidado el codigo que coloco Alexia Stark, con un par de modificaciones, que me parecieron logicas. Gracias de todas maneras.

    Lo unico que no me funciona es lo de responder el comentario (anidado) creo que pusiste mas arriba que habia que hacer algo para plantillas no modificadas, como no se muy bien que es eso, no lo he tocado. Igual no es lo primordial para mi.

    ResponderEliminar
    Respuestas
    1. Gracias por nada. Lo resolviste tú :)

      Prueba a restaurar el código de todo el sistema de comentarios por si alguna actualización no se te aplicó. Hubo varias en poco tiempo y si tú modificaste por tu cuenta en ese intervalo, quizás te falte algo.

      Link

      Si funciona dale las gracias a Karla ;)

      Eliminar
  24. Buenas nuevamente Oloman, disculpa mi ignorancia pero me quedo un error al agrandar el avatar mira http://www.mundomanualidades.info/2012/06/crea-tus-propios-broches-de-fieltro.html hice 'inspeccionar elemento' en chrome y me sale un 36px que no se donde se aloja o como se cambia en la plantilla ya que no me aparece, muchas gracias desde ya, un abrazo!

    ResponderEliminar
    Respuestas
    1. Si te aparece esta línea en tu CSS, cambia el valor 36px por 42px:

      .comments .avatar-image-container img {
      max-width: 36px;
      }

      Y si no, directamente incorpórala con el valor 42px; Si se resiste, añádele antes del punto y coma un !important.

      Eliminar
    2. Quedo perfecto!, muchísimas gracias Oloman :]

      Eliminar
  25. Gracias Oloman yo modifique un poquito para q quede como cuadrado pero como ago para q no tengo ese espacio entre la fecha y el nick de usuario solo me sale ese problema en mis comentarios este es mi blog
    http://shinsounoanime.blogspot.com/2011/09/rurouni-kenshin.html

    ResponderEliminar
    Respuestas
    1. Una captura en la que marcaras o se viera lo que quieres vendría bien, porque en los comentarios de tu blog hay un avatar cuadrado a la izquierda de los comentarios y un espacio entre ambos que a mi parecer es correcto. Si lo pegas más se va a ver mal.

      Eliminar
  26. Pues yo no consigo que salgan redondos, lo mismo puede ser por la plantilla te mando mi blog por si puedes decirme porque no consigo que salga redondo

    http://cocinandoconkisa.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. En tu caso tienes que omitir la clase .comments. Dónde diga .comments .avatar-image-container img, para tí es sólo .avatar-image-container img.

      Eliminar
  27. Oloman, como puedo hacer para que solo una imagen dentro del post sea redondo, así como la imagen del avatar que tienes tu del lado superior derecho?

    ResponderEliminar
  28. Hola. Inserta en tu CSS esto:
    .redondo {
    display: block;
    border: 2px solid #000000;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-border-radius: 400px;
    -moz-border-radius: 400px;
    border-radius: 400px;
    }

    Luego a la imagen en cuestión añádele esa clase:
    <div class="redondo">< img src="URL_IMAGEN"/></div>

    ResponderEliminar