Essa é uma técnica legal de se fazer, criando um fundo para os commentários.
Procure por:
#comments-block .comment-body {
Substitua todo o código daí até o término } por esse código:
Ok, criamos um fundo com a cor cinza para o corpo dos comentários, mas para deixar mais legal vamos arredondar as bordas de cima com border radius.
Nosso código ficará assim:
Agora ficou mais bonito, o porque de termos arredondado apenas as bordas de cima é porque faremos um fundo para o rodapé dos comentários.
Procure por:
#comments-block .comment-footer {
Substitua todo o código da folha acima até o término { por este código:
Agora nosso rodapé tambem tem um fundo, com as bordas de baixo arredondadas para encaixar com o fundo do corpo do comentário.
Agora para deixar mais legal ainda, vamos adcionar um efeito Gradient no rodapé e no corpo do comentário:
Nosso código fica assim:
Acima temos o código do Corpo e do Rodapé do comentário ja com Gradient e Bordas arredondadas, pronto para seu adicionado em seu blog, agora basta você alterar as cores a seu gosto.
Procure por:
Substitua todo o código daí até o término } por esse código:
#comments-block .comment-body {
margin-bottom:-.5em;
padding:5px 5px 5px 5px;
background:#333333; /* ---edite a cor ---*/
border-left: 1px solid #000; /* ---edite a cor e o tipo da borda ---*/
border-right: 1px solid #000; /* ---edite a cor e o tipo da borda ---*/
border-top:1px solid #000; /* ---edite a cor e o tipo da borda ---*/
}
Ok, criamos um fundo com a cor cinza para o corpo dos comentários, mas para deixar mais legal vamos arredondar as bordas de cima com border radius.
Nosso código ficará assim:
#comments-block .comment-body {
margin-bottom:-.5em;
padding:5px 5px 5px 5px;
background:#912CEE; /* ---edite a cor ---*/
border-left: 1px solid #000; /* ---edite a cor e tipo da borda ---*/
border-right: 1px solid #000; /* ---edite a cor e tipo da borda ---*/
border-top:1px solid #000; /* ---edite a cor e tipo da borda ---*/
border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
}
Agora ficou mais bonito, o porque de termos arredondado apenas as bordas de cima é porque faremos um fundo para o rodapé dos comentários.
Procure por:
Substitua todo o código da folha acima até o término { por este código:
#comments-block .comment-footer {
line-height:1.4em;
margin:-10px 0 0px;
text-transform:none;
background:#333333; /* ---edite a cor ---*/
padding:0px 5px 5px 5px; /* ---edite as medidas ---*/
border-left: #000 1px solid; /* ---edite a cor e tipo da borda---*/
border-right: #000 1px solid; /* ---edite a cor e tipo da borda---*/
border-bottom: #000 1px solid; /* ---edite a cor e tipo da borda---*/
border-radius:0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
}
Agora nosso rodapé tambem tem um fundo, com as bordas de baixo arredondadas para encaixar com o fundo do corpo do comentário.
Agora para deixar mais legal ainda, vamos adcionar um efeito Gradient no rodapé e no corpo do comentário:
Nosso código fica assim:
#comments-block .comment-body {
background: -webkit-gradient(linear, left top, left bottom, from(#3d3b3b), to(#232323));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
margin-bottom:-.5em;
padding:5px 5px 5px 5px;
border-left: 1px solid #990000; /* ---edite a cor e tipo da borda ---*/
border-right: 1px solid #990000; /* ---edite a cor e tipo da borda ---*/
border-top:1px solid #990000; /* ---edite a cor e tipo da borda ---*/
border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
color: #333333;
}
#comments-block .comment-footer {
background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#999999));
background: -moz-linear-gradient(top, #333333, #999999);
color: #333333;
line-height:1.4em;
margin:-10px 0 0px;
text-transform:none;
padding:2px 5px 5px 5px; /* ---edite as medidas ---*/
border-left: #000 1px solid; /* ---edite a cor e tipo da borda---*/
border-right: #000 1px solid; /* ---edite a cor e tipo da borda---*/
border-bottom: #000 1px solid; /* ---edite a cor e tipo da borda---*/
border-radius:0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
}
Acima temos o código do Corpo e do Rodapé do comentário ja com Gradient e Bordas arredondadas, pronto para seu adicionado em seu blog, agora basta você alterar as cores a seu gosto.
muiito bom :)
muito bom parabens apliquei no meu blog e ficou show