Personalizando a Área dos Comentários

Trago-lhes mais um tutorial de CSS dentre muitos que já postei, esse é um tutorial de personalização da área de comentários que nem tem aqui na UP. Bom nesse tuto não vou enrolar muito não, vamos logo para a prática. Deem uma olhada de como vai ficar a parte que vamos personalizar:

Demonstração

Procure pela seguinte tag de CSS:

]]></b:skin>
Acima dela adicione o seguinte código CSS:

/* Container Comentários
----------------------------------------------- */
.comments {
background: none repeat scroll 0 0;
clear: both;
color: #000 !important;
margin-bottom: 0;
margin-top: 10px;
padding: 5px;
}
#comments h4 {
color: #000 !important;
font-family: Arial;
letter-spacing:0;
font-size: 20px;
text-transform: capitalize;
}
.comment-header {
background: none repeat scroll 0 0 #ccc; /* COR DA BARRA DE INFOS. DO COMENTÁRIO */
display: block;
color: #000 !important;
margin: 10px -10px !important;
padding: 10px 0 10px 50px !important;
}
.comment-header a {
color:#fff !important;
}
.comment-header a:hover {
text-decoration:none;
}
.comments .comment-block {
background: #e1e1e1; /* COR DO FUNDO GERAL */
border-radius: 20px 20px 20px 20px; /* BORDA GERAL DO FUNDO */
font-family: calibri,arial;
margin-left:0 !important;
padding: 5px 10px;
position: relative;
}
.comments .comments-content .user {
font-size: 20px;
}
.comments a, .comments-content .user a {
opacity: 0.8;
font-weight:normal;
font-size: 18px;
font-family: Arial;
color:#fff !important;
text-shadow:0px 0px transparent !important;
padding-top:20px !important;
}
.comments .avatar-image-container {
margin: 20px 0 0 5px;
}
.comments .avatar-image-container img {
position:relative;
z-index:999;
}
.comment-actions a {
opacity:0.4;
border-radius:5px; /* BORDA DOS BUTTONS */
font-family:Arial;
font-size:13px;
color:white;
background:#ccc !important; /* COR DOS BUTTONS DE RESPONDER E EXCLUIR */
margin-left:2px !important;
margin-bottom:2px !important;
padding:2px 2px 4px 4px !important;
-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;
}
.comment-actions a:hover {
opacity:100;
-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;
}
Agora é só você adaptar ele de acordo com as cores do seu template, se você prestar atenção eu fiz um comentário nas linhas que são fáceis de editar, como cores, e bordas... a dica que eu dou é: caso você não tenha conhecimento em HTML e CSS não faça nada mais do que editar as áreas demarcadas por mim, pois você pode apagar algo e da erro. Caso tenha, boa sorte edite livremente para seu gosto.

É isso ai galera espero que vocês tenham gostado do meu tutorial... até mais.