Procure pelo nome "#comments {". Se não existir, procure por #comments sem a "{". Geralmente irá aparecer uma área onde todos os códigos referidos à caixa de comentário se localizam. Tente selecionar tudo isso (não estará perfeitamente igual a este, mas será parecido).
/* Comments */
.comments{
max-width:598px;
overflow:hidden;
margin-bottom:20px;
padding:20px;
background: #411c48;
border-radius: 10px;
}
#comments h4{
font-size:26px;
letter-spacing:.2em;
color:#eee;
margin:0 0 10px;
padding:0
}
#comments-block{
line-height:1.6em;
margin:10px 0 0 0
}
#comments-block .comment-author{
font-size:22px;
font-family:Patrick Hand, cursive;
margin:0;
padding:5px 10px
}
#comments-block .avatar-image-container img{
border:none;
float:right;
margin:0
}
#comments-block .avatar-image-container.avatar-stock img{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qPynDMX23InPi1m4ujK4AjDlG7ob9-DABVLz52AH3uB8YVNVZFImf1KU-PxqMzHlE2kNPRnycsRUYUhrjOTmcyYhzBcuS-h4VWXyhOr5PTKTbUi9BJoZHysip6LLt2qN10iePJ2Z8rw/s1600/unknown.PNG) no-repeat center;
height:35px;
width:35px
}
#comments-block.avatar-comment-indent dd {
margin-left: 10px;
}
#comments-block .comment-body{
margin:0;
padding:5px 10px
}
#comments-block .comment-footer{
font-size:10px;
text-align:left;
margin:0 0 15px;
padding:5px 0 0 0;
}
.comment-form {
max-width:610px !important;
}
#comments-block .comment-body p{
margin:0;
padding:0
}
.deleted-comment{
font-style:italic;
color:gray
}
Esta configuração é do mesmo modo que qualquer outra. Basta pegar o código dos comentários e colocá-lo no seu css, e claro SUBSTITUINDO O JÁ EXISTENTE com este abaixo.
#comments h4 {
margin:1em 0;
line-height: 1.4em;
}
.comments h4 {
width:98%;
padding:7px;
color:#f9b;
font-family: 'Lobster', cursive;
border-bottom: 1px solid #d77ce7;
font-size:28px ;
border-radius: 0px;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
font: 28px 'Lobster', cursive;
border-radius: 13px;
margin-bottom: -2px;
color: #faa;;
padding: 10px;
background:#993399 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVctar6MfdnLmVW6rMNcQmzIBL013iEDbMpUAog0q7B9v-R5QtN7uWYjCNozZC4lv4LCpbAoZ4h2EfSSUqaem5ROKxzZtBKK-0W3yODqhtZBw2fWHNgRYXWEtBAAOyQmwOaHqk0Mod0o/s1600/fade.png) repeat-x top;
box-shadow:0 1px 2px #999;
}
.comment-form {
max-width: 600px !important;
text-align: justify;
position: center;
}
#comments {
background: #f4f4f4;
margin:0 10px 1.5em;
padding:.25em 1em 1.5em;
border:1px solid #C7BEA2;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #f2f1f1;
-webkit-box-shadow: 0px 0px 15px #B6665B;
-moz-box-shadow: 0px 0px 15px #B6665B;
box-shadow: 0px 0px 15px #B6665B;
}
#comments-block .comment-body {
margin:.25em 0 0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-align: justify;
margin-top: 10px;
margin-bottom: 3px;
padding: 10px;
color: #383838;
-webkit-box-shadow: 0px 0px 5px #B6665B;
-moz-box-shadow: 0px 0px 5px #B6665B;
box-shadow: 0px 0px 5px #B6665B;
background:#ffc0d8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVctar6MfdnLmVW6rMNcQmzIBL013iEDbMpUAog0q7B9v-R5QtN7uWYjCNozZC4lv4LCpbAoZ4h2EfSSUqaem5ROKxzZtBKK-0W3yODqhtZBw2fWHNgRYXWEtBAAOyQmwOaHqk0Mod0o/s1600/fade.png) repeat-x top;
}
.comments .comment-block {
position:static !important;
background:#fee !important;
padding:0.5em 1em;
border-radius:5px !important;
border:1px #fff solid !important;
box-shadow:inset 0 1px 3px #faa !important
}
box-shadow:0 2px 3px #84d1ff;
}
#comments-block .comment-footer {
margin-top: 40px;
line-height: 1.4em;
font: 11px Tahoma;
text-align: right;
font-style: italic
max-height: 50px;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
NO CÓDIGO HTML, FICARÁ DESTA FORMA:
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
Créditos do artigo:
http://www.delicadissima.com/2012/05/comentarios-customizados-delicadissima.html
Nenhum comentário:
Postar um comentário
Nós unimos para divulgar o nosso trabalho como blogueiras.Então para nós sua opinião vai alem de importância é essencial para o desenvolvimento do nosso trabalho: