Yo siempre he procurado tener un buen diseño en mis comentarios y ahora con los nuevos comentarios anidados se desacomodo todo el CSS que tenia en mis comentarios pero gracias a Dios el CSS es una maravilla y poco a poco lo he ido reconstruyendo y entre esas recontrucciones esta el aumentar de tamaño el avatar y cambiarlo de forma que por defecto viene de 36*36px y cuadrado pero con un poco de CSS se puede aumentar a 50px y ponerlo redondo.

Con el hack que les presento hoy los avatares quedaran de la siguiente manera:


Para añadir este truco deberas pegar antes de ]]></b:skin> lo siguiente:

.avatar-image-container,
.avatar-image-container img{
max-width:50px !important;
width:50px !important;
max-height:50px !important;
height:50px !important;
padding: 0 !important;
border:0px;
}

Con el anterior codigo se aumentara el tamaño del avatar a 50px,hay que aclarar que puedes aumentar aun mas el tamaño del avatar pero no es muy recomendable.
 
Ahora si quieres los avatares redondos pega antes de ]]></b:skin> lo siguiente:

.avatar-image-container,
.avatar-image-container img {
max-width: 50px !important;
width: 50px !important;
max-height: 50px !important;
height: 50px !important;
padding: 0 !important;
border: 0px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
}


.avatar-image-container{
border:3px solid #fff !important;
-webkit-box-shadow: 0 1px 2px #BBB;
-moz-box-shadow: 0 1px 2px #BBB;
box-shadow: 0 1px 2px #BBB;
}

Como vez es muy facil,espero que os agrade este pequeño truco y lo usen.

Via/Way2Blogging


30 comentarios

leviomat · mayo 13, 2012 a las 11:16 pm

Muy bueno, gracias

Laura Morales · mayo 21, 2012 a las 2:05 pm

No me funcionaaaaaaa!!! 🙁

Laura Morales · mayo 21, 2012 a las 2:08 pm

a mi no me funciona…

    Carlos Chamorro · mayo 21, 2012 a las 3:08 pm

    Hola Laura, puede ser por tu plantilla ya creo que no todas son iguales en sus codigos, ami tampoco me funciona 🙁 pero lo solucione usandolo como firma en cada entrada que hago, osea ya lo tengo listo solo para copiar y pegar, creo yo es un poco mas util asi ya que cada autor puede tener su propia firma cada vez que cree una nueva entrada… bueno espero te sirva esto 😛 no soy un experto per ahi vamos.. Saludos 😉

    Juvinao · mayo 21, 2012 a las 3:55 pm

    Si Carlos tienes razon no todas las plantillas son iguales,y algunas son mas problematicas que otras.

    Carlos Chamorro · mayo 21, 2012 a las 4:19 pm

    Jajajaj no wee.. me confundi de Post xD… pense que estava en el otro de la firma xD.. jajajajja Bueno en fin 😛

    Juvinao · mayo 21, 2012 a las 4:29 pm

    Jajaja bueno todos tenemos un descache XD! :zombie:

Hobbie Media · mayo 23, 2012 a las 12:47 am

Hola, tengo una pregunta, si yo quiero ponerlo cuadrado pero con bordes redondos como lo haría, y mi otra pregunta es si con este codigo tambien me queda la flechita esa que apunta al comentarista??

    Juvinao · mayo 30, 2012 a las 2:25 am

    Con este codigo lograras solo los avatares redondos.

Raquel91011 · mayo 29, 2012 a las 6:39 pm

Mil gracias a ti y a tu web eres sagradooooo
:alaba:

Susumiyaharuhi03 · junio 17, 2012 a las 6:34 pm

Fabulosos, cada día amo más tus trucos, mi blog se ha ido implementado gracias a tí,

Gracias!!!

CSnts17 · junio 19, 2012 a las 12:45 pm

ya he puesto los avatares redondos pero ahora quiero poner el borde a los comentarios y la flecha apuntando al avatar como tienes tu, que tengo que hacer?

    CSnts17 · junio 20, 2012 a las 5:04 pm

    responde please! me gustaría tenerlo.

    Juvinao · junio 20, 2012 a las 7:43 pm

    Bueno estos estilos corresponden a atributos CSS si quieres te los paso por email o hago una entrada.

    CSnts17 · junio 21, 2012 a las 7:25 am

    como quieras, aunque quizás a mas gente le gustaría verlo y sería mejor un post, si nó mi email esta en mi cuenta.

    muchas gracias! gracias a ti estoy mejorando bastante el estilo de mi blog

    Juvinao · junio 22, 2012 a las 3:35 pm

    Ok amigo estos dias te enviare un correo con los codigos que contienen los estilos.

Nani-chan · agosto 15, 2012 a las 5:27 am

De 10! muchas gracias, queda muy bonito 😀

Ana Rodriguez · agosto 26, 2012 a las 7:33 am

No consigo ponerlo, donde coloco el código??

Gracias por adelantado.

    Juvinao · agosto 28, 2012 a las 7:39 pm

    Ana debes poner todos los codigos encima de ]]></b:skin>

Ana Rodriguez · agosto 29, 2012 a las 7:13 am

Muchas gracias, ya lo puse pero no me salen redondos, sino cuadrados. Aquí te dejo un enlace de mi blog: anarodrimen.blogspot.com.es

Weed l · octubre 29, 2012 a las 1:40 am

Hola, me gustaria saber como hago para que al aumentar el avatar no se me monte encima de nombre del comentarista. Y de paso si me dices como hago para separar hacia abajo el texto del comentario ya seria perfecto (es decir que quede el avatar y la franja con el numero arriba y el texto del comentario mas abajo)

te lo agradeceria mucho

    Juvinao · octubre 31, 2012 a las 7:52 pm

    Weed l tienes que borrar primero todo el estilo de los comentarios que tenias antes.

    Weed l · noviembre 19, 2012 a las 11:35 pm

    Thanks lo vi tarde pero genial, siempre estas muy pendiente…=)

    Aprobecho y te pregunto otra cosa =)

    tengo el avatar de comentarios, y a la vez sustitui la imagen del comentarista anonimo que ofrece blogger, por una un poco mas chula, y se muestra perfecto en los comentarios, pero el el gadget no me parece…. alguna pista sobre eso??

    saludos y gracias otra vez…=9

Ru · noviembre 19, 2012 a las 11:17 pm

Muchas gracias! hace tiempo que lo estaba buscando

Cristina · marzo 6, 2013 a las 4:54 pm

Muchas Gracias ha quedado muy bonito, pero también me gustaría poner los bordes en los comentarios.

NATALIA RICO · mayo 16, 2014 a las 5:36 pm

¡¡Muchas gracias!! Facil y genial explicado ¡¡como tiene que ser!!

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *