Threaded Comments personalizado

Muita gente (muita gente mesmo, acreditem) me pediu o tal do tutorial que usei pra personalizar meus comentários. Esse tutorial perfeito foi um achado no blog da Gizaa, o CandyLand (visitem, tem muitos tutoriais e utilitários bacanas lá!) então hoje vim repassar o tutorial pra vocês!

 Esse tutorial passará seus comentários pra versão atualizada (se eles já não atualizaram sozinho) e deixará eles com opção de reply/resposta (que é muito útil!). 

Dei umas editadas no código da Gizaa, então depois de ter aplicado o tutorial seus comentários deverão estar parecidos/iguais ao da foto do "depois".

Lógico que vocês podem editar o código e deixar do jeitinho que preferirem, como coloquei mais descrições ao lado dos códigos principais (dizendo o que é etc) vai ser super fácil de editar!

Pra personalizar seus comentários é só entrar no seu html (Design > Editar HTML) e procurar (F3) por }]]></b:skin> e acima dele colar o seguinte código:

/**=========== AREA GERAL DOS COMMENTS ===========**/

.comments{

width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/

margin:0 auto;

font-style: normal !important;

font-size: 12px !important;

font-family: verdana !important;

background: url(http://migre.me/aC1IZ) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */

border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */

box-shadow:0 0 5px #aaa; /* sombra na caixa do fundo - se não quiser apague essa linha */

}

/**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/

.comments h3,.comments h4{

width: 98%;

padding: 7px;

margin: 10px 0 !important;

color: #87CEEB !important; /* cor da fonte */

text-align: center; /* alinhamento */

text-shadow:0 0 2px #ccc; /* sombra – se não quiser apague essa linha */

font-family:'Dancing Script' !important; /* fonte - se preferir troque */

font-size: 37px !important; /* tamanho do texto - se preferir troque */

}

/**= BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone...) =**/

.comments .comment-block {

position:static !important; /* mantém o avatar na frente do bloco - não mude */

background: #fff; /* cor do fundo da caixinha dos comentários */

margin-left: 23px;

padding: 0 15px 0 23px;

border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */

border-radius: 5px; /* bordas arredondadas */

box-shadow:0 0 3px #ccc, inset 0 0 11px #eee /* sombra na caixinha – apague se não quiser */

}

.comments .comments-content .comment {

padding:20px 10px !important;

margin-bottom:15px !important

}

/* estilos para o nome do autor do comentário */

.comments .comments-content .user a{

font-style:normal;

border:0;

color: #CD96CD !important; /* cor da fonte do nome de quem comenta */

letter-spacing: 1px;

font-family:'Dancing Script'; /* fonte do nome de quem comenta */

font-size: 26px; /* tamanho da fonte */

text-shadow:1 1px #aaa; /* sombra na fonte do nome */

background: transparent;

padding: 4px 36px;

margin-left:-31px !important;

border-bottom-right-radius:10px;

margin-top:-2px

}

.comments .comments-content .user{

font-style:normal;

border:0;

color: #FF80BC !important;

letter-spacing:1px;

font-family:'Dancing Script';

font-size: 26px;

text-shadow: 0 1px #aaa;

background: transparent;

padding: 4px 36px;

margin-left: 11px !important;

border-bottom-right-radius:10px;margin-top:-2px

}

/*Nome do autor do comentário hover*/

.comments .comments-content .user a:hover {

text-decoration:none !important;

color: #A1DBE4 !important; /* cor do nome do autor do comentário quando passa o mouse */

}

/* estilo da data */

.comments .comments-content .datetime a{

background: none !important;

font-family: times new roman; /* fonte - mude se desejar */

float: right; /* posicionamento */

font-size: 12px; /* tamanho da fonte da data */

color: #fff !important; /* cor da data */

border:0 !important;

margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/

}

/* estilo do avatar */

.avatar-image-container {

min-width: 60px; /* determina um mínimo de largura */

min-height: 60px; /* determina um mínimo de altura */

padding:0 !important;

margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */

margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */

position: absolute !important;

overflow: hidden !important;

background: #fff;

}

.avatar-image-container img {

border: 3px #EAEAEA solid; /* borda do avatar */

margin:0;

max-height: 48px;

min-height: 48px;

max-width: 48px;

min-width: 48px;

}

/**=========== TEXTO DO COMENTÁRIO ===========**/

.comments p{

font-size: 14px !important; /* tamanho da fonte do comentário */

font-family: Times new roman !important; */ fonte do comentário */

text-shadow: 0 1px #eee !important; /* sombra na fonte */

padding-left: 55px !important;

padding-bottom: 20px;

color: #888 !important /* cor do texto */

}

/**=========== BOTAO – RESPONDER ===========**/

/* botão responder do segundo nível */

.comments .continue a {

background: #87CEEB !important; /* cor do fundo */

color: #fff !important; /* cor da fonte */

float: right; /* posicionamento */

padding: 8px !important;

height: 10px !important;

line-height: 15px !important;

margin-top: -35px !important;

}

/* botão responder do primeiro nível, mais estilos para o botão do segundo nível */

.comments .comment .comment-actions a,.comments .continue a {

font-size: 11px !important;

float: right;

height: 10px !important; /* altura do botão */

color: #fff !important; /* cor da fonte */

padding: 6px;

border: 0 !important;

line-height: 10px;

margin: 5px;

margin-left: 40px;

font-family: helvetica; /* fonte - mude se desejar*/

text-shadow: 0 0;

border-radius: .5em; /* bordas arredondadas */

background: #CD96CD; /* cor do fundo */

font-weight: 800;

box-shadow: 0 1px 2px #666 /* sombra no botão - apague a linha se não quiser */

}

/* botão hover*/

.comments .comment .comment-actions a:hover {

text-decoration:none !important;

background: #FF80BC; /* cor do fundo do botão hover */

}

/* estilos para bloco de respostas */

.comments .comment-thread.inline-thread {

background-color: transparent !important;

margin-top: 40px;

padding: 0.5em 1em;

border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */

}

.comments .comments-content .comment-replies {

margin-top:1em;

margin-left:56px !important

}

.comments .continue {border-top:0 !important}

.comments .thread-toggle,.icon.blog-author {display:none !important}

/**======= Fim [candylland.org] [goimagines.blogspot.com] =======**/

  Atenção: Testado somente no modelo Viagem/Travel!

É isso, espero que tenha ficado tudo claro e que vocês consigam aplicar o tutorial direitinho!

Se usar não esqueça de creditar o CandyLand e o Go Imagine, kissus :*

Aviso: Tive que bloquear o botão direito por motivo de plágio descarado, tão até roubando meu template, vê se pode? Pra ver se isso da uma parada resolvi tomar essa decisão, espero que não atrapalhe em nada e se atrapalhar peço que me avisem. Não sei outra forma de bloquear o código fonte então tive que bloquear o botão direito mesmo, se alguém souber com esconder o código fonte eu agradeço!
É isso, desculpem o transtorno.