Personalizar a Área dos Comentários
Autor: Hellen Isterfani | Publicado: 2012-11-19T13:54:00-03:00




Oie gente hoje vou ensinar como personalizar a área dos comentários do blog, tirar aquela aparência que o blogger tem com os comentários , aquela área cinza,&nbsp;então&nbsp;mãos a massa.
Procure pela tag.

/* Comments

----------------------------------------------- */

.comments .comments-content .icon.blog-author {

background-repeat: no-repeat;
......


.comments .comments-content .loadmore a {

border-top: 1px solid $(tabs.border.color);

border-bottom: 1px solid $(tabs.border.color);

}

.comments .continue {

border-top: 2px solid $(tabs.border.color);

}



Substitua pelo seguinte código

Modelo 1






/* AREA GERAL DOS COMMENTS */
@font-face {font-family: 'Pacifico';src:local('Pacifico'),local('Pacifico'),url('http://0.tqn.com/d/graphicssoft/1/7/7/3/5/Plaid-Pattern08.png') format('woff')}
.comments{
width:99% !important;
margin:0 auto;
font-style:normal !important;
font-size:12px !important;
font-family:verdana !important;
background:#E8E8E8 !important;
border-radius:10px;
}
/*
HEADING DOS COMMENTS (1 comentario, 2 comentários...)**/
.comments h3,.comments h4{
width:95%;
padding:7px;
margin-bottom:10px;
color:#8B0000;
text-align:center;
font-family:'Pacifico' !important;/* FONT-FAMILY - se preferir troque */
font-size:35px !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 */
margin-left:23px;
padding:0 15px 0 23px;
border-top:19px #8B0000 solid;
border-radius:11px;
box-shadow:0 0 3px #8B0000, inset 0 0 11px #8B0000
}
.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:r#9B30FF!important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
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:rgb(240,94,138) !important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:11px !important;
border-bottom-right-radius:10px;margin-top:-2px#FF1493 dashed / borda
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#999;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:4px #8B0000 solid; /* borda */
padding:0 !important;
margin-left:23px !important;
margin-top:17px !important;
position:absolute !important;
overflow:hidden !important;
background:#1E90FF;
border-radius:60px
}
.avatar-image-container img {
margin:1;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
-moz-border-radius: 60px; &nbsp;/* para Firefox e Flock*/
-webkit-border-radius: 60px; &nbsp;/* para Chrome e Safari */
border-radius: 60px;
border:1px solid #8B0000 &nbsp; /*--- Edite &nbsp;---*/
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font-size:12px !important;
font-family:trebuchet ms !important;
text-shadow:0 1px #ccc !important;
padding-left:55px !important;
padding-bottom:20px;
color:#888 !important
}
/*BOTAO - RESPONDER */
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#999 !important;
float:right;
padding:8px !important;
height:10px !important;
line-height:15px !important;
margin-top:-35px !important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
float:right;
height:10px !important;
color:#fff;
padding:6px;
border:0 !important;
line-height:10px;
margin:5px;
margin-left:40px;
font-family:helvetica;
text-shadow: 0 0;
border-radius: .5em;
background:#8B0000;
font-weight:800;
box-shadow:0 1px 2px #666
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top:40px;
padding:0.5em 1em;
border-radius:5px;
border:2px #8B0000 dotted
}
.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*/





Modelo 2




/* AREA GERAL DOS COMMENTS */
@font-face {font-family: 'Pacifico';src:local('Pacifico'),local('Pacifico'),url('http://0.tqn.com/d/graphicssoft/1/7/7/3/5/Plaid-Pattern08.png') format('woff')}
.comments{
width:99% !important;
margin:0 auto;
font-style:normal !important;
font-size:12px !important;
font-family:verdana !important;
background:url(http://4.bp.blogspot.com/-jlMX_ImTjvo/UI_scOEdqZI/AAAAAAAAC_U/tWa7c6uqgI0/s1600/Pack-Backgrounds+Cherry+Bomb_58.JPG) !important;
border-radius:10px;
}
/*
HEADING DOS COMMENTS (1 comentario, 2 comentários...)**/
.comments h3,.comments h4{
width:95%;
padding:7px;
margin-bottom:10px;
color: #00008B;
text-align:center;
font-family:'Pacifico' !important;/* FONT-FAMILY - se preferir troque */
font-size:35px !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 */
margin-left:23px;
padding:0 15px 0 23px;
border-top:19px #00008B solid;
border-radius:11px;
box-shadow:0 0 3px #8B0000, inset 0 0 11px #00008B
}
.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:r#9B30FF!important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
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:rgb(240,94,138) !important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:11px !important;
border-bottom-right-radius:10px;margin-top:-2px#00008B dashed
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#999;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:4px #00008B solid; /* borda */
padding:0 !important;
margin-left:23px !important;
margin-top:17px !important;
position:absolute !important;
overflow:hidden !important;
background:#00008B;
border-radius:60px
}
.avatar-image-container img {
margin:1;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
-moz-border-radius: 60px; &nbsp;/* para Firefox e Flock*/
-webkit-border-radius: 60px; &nbsp;/* para Chrome e Safari */
border-radius: 60px;
border:1px solid #00008B &nbsp; /*--- Edite &nbsp;---*/
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font-size:12px !important;
font-family:trebuchet ms !important;
text-shadow:0 1px #ccc !important;
padding-left:55px !important;
padding-bottom:20px;
color:#888 !important
}
/*BOTAO - RESPONDER */
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#999 !important;
float:right;
padding:8px !important;
height:10px !important;
line-height:15px !important;
margin-top:-35px !important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
float:right;
height:10px !important;
color:#fff;
padding:6px;
border:0 !important;
line-height:10px;
margin:5px;
margin-left:40px;
font-family:helvetica;
text-shadow: 0 0;
border-radius: .5em;
background:#00008B;
font-weight:800;
box-shadow:0 1px 2px #666
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top:40px;
padding:0.5em 1em;
border-radius:5px;
border:2px #00008B dotted
}
.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*/


Modelo 3




/* AREA GERAL DOS COMMENTS */
@font-face {font-family: 'Pacifico';src:local('Pacifico'),local('Pacifico'),url('http://0.tqn.com/d/graphicssoft/1/7/7/3/5/Plaid-Pattern08.png') format('woff')}
.comments{
width:99% !important;
margin:0 auto;
font-style:normal !important;
font-size:12px !important;
font-family:verdana !important;
background:url(http://4.bp.blogspot.com/-ezdDFH8eC6E/UI_rDuOavqI/AAAAAAAAC6U/vP8d-TrTzj8/s320/Pack-Backgrounds+Cherry+Bomb_18.gif) !important;
border-radius:10px;
}
/*
HEADING DOS COMMENTS (1 comentario, 2 comentários...)**/
.comments h3,.comments h4{
width:95%;
padding:7px;
margin-bottom:10px;
color: #00CD00;
text-align:center;
font-family:'Dancing Script' !important;/* FONT-FAMILY - se preferir troque */
font-size:35px !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 */
margin-left:23px;
padding:0 15px 0 23px;
border-top:19px #87CEEBsolid;
border-radius:11px;
box-shadow:0 0 3px #008B00, inset 0 0 11px #008B00;
}
.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:#FF1493!important;
letter-spacing:1px;
font-family:'Dancing Script';
font-size:20px;
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:rgb(240,94,138) !important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:11px !important;
border-bottom-right-radius:10px;margin-top:-2px#FF1493 dashed
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#999;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:4px #FF8C00solid; /* borda */
padding:0 !important;
margin-left:23px !important;
margin-top:17px !important;
position:absolute !important;
overflow:hidden !important;
background:#FFA500;
border-radius:60px
}
.avatar-image-container img {
margin:1;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
-moz-border-radius: 60px; &nbsp;/* para Firefox e Flock*/
-webkit-border-radius: 60px; &nbsp;/* para Chrome e Safari */
border-radius: 60px;
border:1px solid #FF8C00 &nbsp; /*--- Edite &nbsp;---*/
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font-size:12px !important;
font-family:trebuchet ms !important;
text-shadow:0 1px #ccc !important;
padding-left:55px !important;
padding-bottom:20px;
color:#888 !important
}
/*BOTAO - RESPONDER */
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#999 !important;
float:right;
padding:8px !important;
height:10px !important;
line-height:15px !important;
margin-top:-35px !important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
float:right;
height:10px !important;
color:#fff;
padding:6px;
border:0 !important;
line-height:10px;
margin:5px;
margin-left:40px;
font-family:helvetica;
text-shadow: 0 0;
border-radius: .5em;
background: #00CD00;
font-weight:800;
box-shadow:0 1px 2px #666
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top:40px;
padding:0.5em 1em;
border-radius:5px;
border:2px  #00CD00 dotted
}
.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*/
 Modelo 4




/* AREA GERAL DOS COMMENTS */
@font-face {font-family: 'Pacifico';src:local('Pacifico'),local('Pacifico'),url('http://0.tqn.com/d/graphicssoft/1/7/7/3/5/Plaid-Pattern08.png') format('woff')}
.comments{
width:99% !important;
margin:0 auto;
font-style:normal !important;
font-size:12px !important;
font-family:verdana !important;
background:url(http://3.bp.blogspot.com/-u-6HGigJ7ZA/UI_rawP2yDI/AAAAAAAAC9c/b6gm7vEk4DA/s320/Pack-Backgrounds+Cherry+Bomb_43.gif) !important;
border-radius:10px;
}
/*
HEADING DOS COMMENTS (1 comentario, 2 comentários...)**/
.comments h3,.comments h4{
width:95%;
padding:7px;
margin-bottom:10px;
color: #E066FF;
text-align:center;
font-family:'Dancing Script' !important;/* FONT-FAMILY - se preferir troque */
font-size:35px !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 */
margin-left:23px;
padding:0 15px 0 23px;
border-top:19px #E066FFsolid;
border-radius:11px;
box-shadow:0 0 3px #E066FF, inset 0 0 11px #E066FF;
}
.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:#B452CD!important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
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:rgb(240,94,138) !important;
letter-spacing:1px;
font-family:'Pacifico';
font-size:20px;
background:transparent;
padding:4px 36px;
margin-left:11px !important;
border-bottom-right-radius:10px;margin-top:-2px#FF1493 dashed
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none !important;
font:bold 11px courier new;
float:right;
font-size:10px;
color:#999;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:4px #B452CD solid; /* borda */
padding:0 !important;
margin-left:23px !important;
margin-top:17px !important;
position:absolute !important;
overflow:hidden !important;
background:#B452CD;
border-radius:60px
}
.avatar-image-container img {
margin:1;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
-moz-border-radius: 60px; &nbsp;/* para Firefox e Flock*/
-webkit-border-radius: 60px; &nbsp;/* para Chrome e Safari */
border-radius: 60px;
border:1px solid #B452CD; &nbsp; /*--- Edite &nbsp;---*/
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font-size:12px !important;
font-family:trebuchet ms !important;
text-shadow:0 1px #ccc !important;
padding-left:55px !important;
padding-bottom:20px;
color:#888 !important
}
/*BOTAO - RESPONDER */
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#999 !important;
float:right;
padding:8px !important;
height:10px !important;
line-height:15px !important;
margin-top:-35px !important;
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
float:right;
height:10px !important;
color:#fff;
padding:6px;
border:0 !important;
line-height:10px;
margin:5px;
margin-left:40px;
font-family:helvetica;
text-shadow: 0 0;
border-radius: .5em;
background: #B452CD;
font-weight:800;
box-shadow:0 1px 2px #666
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top:40px;
padding:0.5em 1em;
border-radius:5px;
border:2px  #B452CD dotted
}
.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*/

&nbsp; Bom gente esses são os modelos que eu mesma personalizei, portanto se for reblogar coloque os créditos . Se gostou Comente... Em Breve postarei mais modelos de comentários. Se quiserem alguma cor especifica só falar. Bjos ;)