Avatares redondos nos comentários do Blogger

Aumente e deixe redondo os avatares dos comentáros no Blogger

Sempre procuro ter um bom design em meus comentários e agora com os novos comentários anidados (threaded comments) acabou sumindo com todo estilo CSS que tinha, porém o CSS é maravilhoso e pouco a pouco estou rescontruindo e entre essas modificações está o aumento no tamanho do avatar, que por padrão vem a 36*36px e quadrado, e alterá-lo com pouco de CSS a 50px e colocá-lo redondo.

Siga o @bloggermin e fique por dentro novidades para seu blog.


Com o hack que apresento hoje os avatares ficarão da seguinte maneira:

Para adicionar este truque você deve colar antes de ]]></b:skin> o código:

.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;
}

Esse código irá aumentar o tamanho do avatar para 50px, devo esclarecer que você pode aumentar ainda mais o tamanho do avatar, mas não é muito aconselhável.

Agora, se deseja arrendondar os avatares coloque antes de ]]></b:skin> o seguinte:

.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 podem ver é muito fácil, espero que gostem deste pequeno truque.

Via Way2Blogging