sexta-feira, 11 de abril de 2014

Tutorial: Avatares dos Comentários Redondos

Snow white/Olaf
Oi panquecas, este é o primeiro post do blog \o/ e eu começo bem: logo um tutorial, e foi mesmo porque recebi logo um comentário muito positivo (o meu coração quase explodiu quando eu vi que tinha um comentário ~ obrigadoo) e a leitora (o) que comentou disse que eu devia fazer alguns tutos sobre funcionalidades aqui do blog, e começo por fazer um dos mais simples, que fui buscar ao Bunny Crazy (um blog que me ajudou imenso, quando estive a criar o layout aqui do blog).
O tutorial é colocar os avatares dos comentários em redondo, como tenho aqui no blog, se der tudo certo vai ficar assim:
Muito lindo né? Vamos então começar:

Vai a modelo - Personalizar - Procura no teu HTML (ctrl + f) por ]]></b:skin> e assim que o achares cola o seguinte código ANTES dele:

.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 #00FF00;
-moz-box-shadow: 0 1px 2px #00FF00;
box-shadow: 0 1px 2px #00FF00;
}
Podes sempre regular o tamanho dos avatares, que estão em 50, mas não é aconselhável a aumentar muito mais.
Em breve mostro como personalizar a área de comentários do blog como está no aqui no VP (sigla para vida de panqueca \o/)
Espero que tenha ajudado malta :D
PS: Eu testei este código no travel, se não funcionar no vosso digam nos comentários e vejo o que posso fazer.
Não se esqueça de tentar mais do que uma vez, nunca desista á primeira dificuldade, por vezes escapam-nos coisas e o erro é nosso kkk.

Beijos doces :*

Sem comentários :

Enviar um comentário