NOVO: Personalizar Comentários na opção "formulário incorporado"!!!

Updadte: conheça o novo formato de personalização de comentários clicando aqui.

Ontem fiquei sem responder quase nenhum comentário... Peço mil perdões por isso, mas acho que depois de ler o tutorial de hoje vocês vão entender o porquê de ter ficado um bom tempo fazendo esse tuto e não ter tido tempo para responder os comentários.
O que acontece é que eu queria muito personalizar a área dos comentários aqui do DSM (e vocês sabem que quando eu quero alguma coisa eu faço tudo para conseguir!!!). Pesquisei muito no Google e nos blogs que visitei dizia que, nos novos templates do Designer do Modelo, apenas blogs que usem a opção de mostrar comentários em janela de poup-up ou em outra guia é que poderiam personalizar os comentários.
Como eu uso e prefiro o formulário de comentários incorporado abaixo da postagem, fiquei decepcionada em saber que não tinha como personalizar. Mesmo assim não desisti (sou brasileira e não desisto nunca, ué!!!), fui inspecionando com o Firefox a área dos comentários (depois eu conto o que é inspecionar) e anotando cada código.
O resultado é que eu consegui uma forma de personalizar a área dos comentários incorporada à postagem, de forma que ficou bem diferente. Não ficou tão fabulosa quanto essas que tem pela net, mas quebra um galho de quem quer continuar com os comentários abaixo da postagem. Vamos ao tuto então???

Personalizando a área dos comentários:

Antes de tudo, faça uma cópia do código do seu template, ou faça um backup, ou teste os códigos num blog de testes. Lembrando que esse código é direcionada para templates que usem a área dos comentários incorporada abaixo da postagem.

1. Entre em Modelo > HTML (caixinha branca abaixo da miniatura do seu template); 
2. Clique em qualquer parte do HTML e aperte Ctrl + F no teclado;
3. Cole na caixinha que abriu (Search) o código: ]]></b:skin> e aperte a tecla "Enter";
   
4. Acima de ]]></b:skin> cole o código abaixo:

#comments h4 {

text-align: center;

display: block;

  }

.comments {margin-left:5px;
margin-right: 15px;
text-align: left;
line-height: normal;
}

#commnet-form, .comment-form{margin-bottom: 40px;}

#comments-block {
text-align: left;
margin:10px auto;
  line-height:1.6em;
  }

#comments-block .comment-author {
  text-align: left;
  margin:5px auto;
  padding:5px auto;
  }

.blog-author-comment {margin:5px auto;}
.blog-author-comment p{margin:5px auto;}

#comments-block .comment-body {
  text-align: left;
  margin:.35em 0 0 auto;
  line-height: normal;
  }

#comments-block .comment-footer {
text-align: left;
  margin:-.25em 0 2em auto;
  line-height: 1.4em;
  margin:10px auto;
  text-transform:uppercase;
  letter-spacing:.1em;
  }

#comments-block .comment-body p {
text-align: left;
margin:10px auto;
  }

.deleted-comment {
  font-style:italic;
  color:gray;
  }

#comments dl dd{padding: 0;margin: 0;line-height: 110%;text-align: left;}

.comment {

  background: pink; /*Cor de fundo dos comentários*/

  color: mediumvioletred; /*Cor da fonte dos comentários*/

  padding-right:5px;

  -moz-border-radius: 20px;

  -webkit-border-radius: 20px;

  border-radius: 20px; 

  -moz-box-shadow: 3px 3px 3px #cccccc;
  -webkit-box-shadow: 3px 3px 3px #cccccc;
  box-shadow: 3px 3px 3px #cccccc;

}

.comment a {

color:#58093B; /*Cor dos links dos comentários*/

}

.comment a:hover {

color: black; /*Cor dos links dos comentários quando o mouse passa por cima*/

}

.comment-content {

margin-right: 5px;

}

.comments .comments-content .comment-header, .comments .comments-content .comment-content {

margin: 0pt 8pt 8px;

}

.comments .comments-content {

margin-bottom: -50px;

}

.comments .comments-content .comment:last-child {

padding: 8px;

}

.avatar-image-container {
  margin: 5px;
}

#commentpaging {
float:right;
}

#commentpaging a {
margin-right:5px;
}

#comments .avatar-image-container img {
  border: 1px solid mediumvioletred; /*Coloca uma borda na esquerda e acima do avatar em estilo relevo, se não quiser, apague esse trecho*/
}

Ao lado dos trechos destacados em negrito está a explicação do que aquele código modifica. Mude apenas o que estiver em negrito, não toque nos outros códigos, ok?
Os trechos em vermelho deixam a borda arredondada e os em laranja colocam sombra à seção. Se não quiser algum dos dois, apague todo o trecho.
Se quiser que o avatar de quem comentou fique redondinho, coloque o código abaixo antes de body {

div.avatar-image-container {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow: 1px 1px 3px #cccccc; /*Sombra do avatar, apague essa linha se não quiser sombra*/
margin: 5px;
}

div.avatar-image-container img {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

É esse o código. Eu passei um tempo enorme verificando cada um e aperfeiçoando para que fique perfeito (me lasquei de digitar), portanto se você for reblogar, dê os devidos créditos a mim!!!

Mil Sweetkisses,