Personalizar nome do autor dos comentários ( comment-author )

Neste artigo vamos aprender a identificar e aplicar estilos ao comando que se refere ao nome do autor dos comentários, o “comment-author”.

Você vai conhecer várias possibilidades de estilizar este trecho dentro do bloco de comentários, como : alterar a cor do link, alterar tamanho e tipo de fonte, e incluir cor de fundo ao nome do autor dos comentários.

Nos templates padrões (minima) e na grande maioria dos templates, os estilos CSS para o autor dos comentários se apresentam da seguinte maneira:

#comments-block .comment-author { /* se refere ao autor dos comentários dentro do container geral */
margin:.5em 0;
}

[dica]Cabe salientar que, quando me referi a “autor dos comentários” me refiro a todos os autores que deixam comentários no seu blog e não apenas ao autor do blog. Isto porque este tutorial tratará sobre o autor do comentário.  

Se você notou no código acima, a “class” .comment-autor, está junto á “id” #comment-block, portanto os estilos que você definir para o autor dos comentários, dentro deste código, será aplicado dentro do bloco de comentário e as definições se estenderão ao: nome do autor do comentário, link do nome do autor, espaçamento do avatar do autor para o nome(se você definir margin ou padding), espaçamento do nome do autor para o corpo da mensagem, e o texto que vem depois do nome do autor (disse…).

Personalizar cor de fundo para a linha do autor do comentário:

Se, por exemplo, você quiser aplicar uma cor de fundo (background), ao autor do comentário, esta cor será aplicada a toda a linha.
Acrescente ao código, o trecho referente a background e ao espaçamento (trecho que estão destacados em vermelho):

#comments-block .comment-author {
margin:.5em 0;
background:#6495ED; /* ---edite a cor ---*/
padding:5px 5px 5px 5px; /* ---edite as medidas ---*/
}

Resultado será este:

Exemplo 1

Notem que a cor de fundo se aplicou a toda linha, incluindo o nome do autor e o texto “disse…” , mas não se aplicou ao avatar do autor.
Isto porque todo estilo que você definir a este trecho se aplicará a linha inteira.
É muito importante que você entenda bem sobre isso,porque muitos usuários se confundem ou sentem dificuldades quando tentam customizar o avatar nos comentários, principalmente em relação aos espaçamentos. Ás vezes acontece do usuário notar que avatar está muito “colado” ao nome do autor, e se você aplicar um espaçamento neste trecho, pode ser que resolva o problema.

Digamos que você queira que esse background também se aplique ao avatar do autor.
Neste caso você terá que definir espaçamento ao trecho referente ao avatar, devendo acrescentar este código:

#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
position: static;
margin-right: 10px;
}

O resultado será este:

Exemplo 2

Note que o background ficou desalinhado, então devemos ajustar as medidas de padding para que tudo fique alinhado.
Volte no código #comments-block .comment-author e ajuste as medidas em padding.
Altere
padding:5px 5px 5px 5px;
Para:
padding:5px 5px 20px 5px;

O resultado final ficará assim:

O Código completo para este resultado é este:

#comments-block .comment-author {
margin:.5em 0;
background:#6495ED; /* ---edite a cor de fundo---*/
padding:5px 5px 20px 5px; /* ---edite as medidas ---*/
}
#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
position: static;
margin-right: 10px;
}

Você pode aplicar o efeito de Bordas arredondadas.
Uma dica: recomendo que use o efeito Bordas arredondadas somente nas esquinas do topo.
Se quiser também pode usar uma imagem como background, é só acrescentar:
background:#6495ED url(endereço-da-sua-imagem) repeat;

Personalizar o link do nome do autor do comentário:

O nome do autor do comentário é um link. Você pode personalizar este trecho também, alterando a cor e tamanho da fonte. Para isto basta aplicar os estilos, acrescentando os seguintes códigos:

.comment-author a{
font-size:20px; /* ---edite tamanho da fonte---*/
margin:0px;
font-weight:bold; /* --link em negrito--*/
color:#8B1A1A;/* ---edite cor da fonte---*/
}

Se quiser um efeito hover ao link, acrescente também:

.comment-author a:hover{
color:#FF8C69; /* ---edite cor da fonte---*/
}

Você pode aplicar Efeito Sombra ao link do nome do autor.

Se quiser personalizar o texto “disse…”, basta incluir o código referente a fonte dentro do trecho:

#comments-block .comment-author {
margin:.5em 0;
background:#6495ED; /* ---edite a cor de fundo---*/
padding:5px 5px 20px 5px; /* ---edite as medidas ---*/
color:#fff; /* ---edite a cor da fonte---*/
fonte-size:11px; /* ---edite tamanho da fonte---*/
}

Veja o resultado final, só para vocês terem uma idéia do que podem fazer:

Lembrando que: todos os estilos que você for aplicar, deverá colar os respectivos código CSS nos trecho referente a */ Comments. Caso não tenha este trecho no seu template, pode colar os códigos ACIMA da tag ]]></b:skin>

Bom, é isso!
Agora que você entendeu como funciona esta parte do trecho na área de comentários, é só usar a imaginação bem direitinho e ir personalizando de acordo com seu gosto.

Antes que me perguntem: o código da área dos comentários postado neste tutorial, foi retirado do Template Minima. Nos templates padrões todo este trecho se apresenta desta maneira.
Se no seu template esta área se apresenta de maneira diferente, infelizmente não terei como ajudar, principalmente se o seu template já sofreu muitas modificações em sua área de comentários, pois para cada caso é um caso.
A única coisa que posso aconselhar é que você faça testes e continue tentando, quem sabe você não dê sorte.