Tutorial: Como mudar a forma da imagem dos comentários

Mais uma vez utilizando o tutorial do blog super incrível CherryBomb (cherry-liah.blogspot.com.br) tentarei é claro mudar um pouco, alguns detalhes, mas o conceito é o mesmo, bem simples e super fofo. Infelizmente eu não sei como deixar a forma maior, apenas em uma forma de 36x36, mas caso alguém saiba, por favor me avise nos comentários ou caso eu aprenda eu faço outro post e coloco aqui nesse também. Enfim, vamos lá! :)

1) Vá em Modelo > Editar HTML > Ctrl+F > e digite: .avatar-image-container {

2) Cole depois da chave o seguinte:

-webkit-mask-image: url(url aqui); -moz-mask-image: url(url aqui); -o-mask-image: url(url aqui) mask-image: url(url aqui);

3) Ficará assim:

 .avatar-image-container {-webkit-mask-image: url(url aqui); -moz-mask-image: url(url aqui); -o-mask-image: url(url aqui) mask-image: url(url aqui);

4) Você deve estar pensando "crédo, porque um monte de "(url aqui)" é para poder se visualizado em todos os navegadores, logo, não se esqueça de colocar o link da sua forma em cada um, ok?

5) A forma que você usará deverá ser assim:

A imagem precisá ser em 36x36, com o fundo transparente e com o brush desejado na cor preta, se não, não funcionará. No CherryBomb tem vários exemplos deixarei alguns aqui:

   

para mais alguns cliquem aqui.