Comentários personalizados com botões em hover.

Ola !

 

Hoje vim lhes trazer uma dica para personalizar a area de comentários da sua página.
Este codigo vai deixar os Coments  igual ao deste blog. Com fundo customizado e botoes em hover pra dar um toque todo diferente em seu layout.

Vamos la...

Para evitar possiveis transtornos, lembre-se de sempre de fazer backup do seu template antes de realizar quaisquer procedimento.

Primeiro localize o trecho dos comentários no seu template.
Asceda á
Modelo>editar html>(nao precisa expandir modelos de widgets).
De um Ctrl+F e procure por Comments
Aparecerá algo  parecido com isso

/* Comments -----------------------------------------------*/
.comments .comments-content .icon.blog-author {

Apague tudo que estiver dentro deste espaço até .comments .continue { E coloque o seguinte código:

/* Comments ----------------------------------------------- */ 
 /*---------fundo geral dos comentários(area externa)------------ */ .comments { background:#f8c6ff url();/*---cor ou imagem do fundo,----- */ border:1px dotted #cb0ce7;/*---borda externa,geral----- */
 width: 99% !important;/*---largura total----- */ 
clear:both; 
margin-top:5px;
margin-bottom:0;
font-family:'Redressed', cursive; 
/*---fonte que será utilizada----- */ line-height:18px;
/*---tamanho da linha(nao é tamanho da fonte)----- */ 
font-size:16px;/*---tamanho da fonte----- */
 } 
.comments .comments-content {
 margin-bottom:16px;
 font-weight:normal;
 text-align:left; 
} ;
/*---Area superior aos comentarios(1 cometario...2 comentarios...etc!----- */
 .comments h3,.comments h4{
 border: 1px dotted #cb0ce7;
/*---borda do contador----- */
 background: #000000 url();/*---cor ou magem do fundo----- */
 width: 100%;/*---largura total----- */ 
padding: 0px;
 margin: 0 auto 0 !important; 
color: #cb0ce7 !important;
 /* cor da fonte */ 
text-align: center; /* alinhamento */ 
text-shadow:0 0 2px #ccc; /* sombra – deixe em 0 se não quiser */ 
font-family: 'Redressed', cursive;
 !important; /* fonte - altere pela sua preferencia*/ 
font-size: 37px !important; /* tamanho do texto - se preferir troque */
 } 
.comments .comment .comment-actions a,.comments .comment .continue a { 
display:inline-block;
 margin:0 0 10px 10px; 
padding:0 15px;
 color: #cb0ce7!important; 
text-align:center;
 text-decoration:none;
 background: #FFFFFF; 
border:1px dashed #000000;/*---borda do botão responder----- */ 
border-radius:1px;
 height:30px;
 line-height:28px; 
font-weight:normal; 
cursor:pointer; 
}
 .comments .comment .comment-actions a:hover {
 background: #000000;/*---hover do botão ao passar o mouse----- */ 
} 
.comments .comments-content .comment-thread ol {
 list-style-type:none;
 padding:0; 
text-align:none; 
} .comments .comments-content .inline-thread { 
padding:0; 
} .comments .comments-content .comment-thread {
 margin:8px 0; 
} .comments .comments-content .comment-thread:empty {
 display:none;
 } 
.comment-replies {
 margin-top:1em;
 margin-left:40px;
 background:#FFFFFF;/*---fundo do botão em estado normal---- */ 
} 
.comments .comments-content .comment { 
margin-bottom:0; padding-bottom:0; 
} 
.comments .comments-content .comment:first-child { 
padding-top:16px; 
} 
.comments .comments-content .comment:last-child {
 border-bottom:0;
 padding-bottom:0; 
} 
.comments .comments-content .comment-body {
 position:relative;
 } 
.comments .comments-content .user {
font-style:normal; 
font-weight:normal;
 }
 .comments .comments-content .user a { 
color: #cb0ce7;
 font-weight:normal;
 text-decoration:none; 
} 
.comments .comments-content .icon.blog-author {
 width:18px; 
height:18px; 
display:inline-block;
 margin:0 0 -4px 6px; 
} 
.comments .comments-content .datetime a { 
color: #0000;
 font-size:12px; 
float:right;
 text-decoration:none;
 } 
.comment-content { 
margin:0 0 8px; 
padding:0 5px; 
}

 /*------topo a caixa de comentários------*/

 .comment-header {
font-size:18px;
background-color:#000000;
border-bottom:1px solid #CDB5CD;
padding:5px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border:none;
height:230px;
width:100%;
}
.comments .comment-replybox-thread {
margin-top:0;
}
.comments .comment-replybox-single {
margin-top:5px;
margin-left:48px;
}
.comments .comments-content .loadmore a {
display:block;
padding:10px 16px;
text-align:center;
}
.comments .thread-toggle {
cursor:pointer;
display:inline-block;
}
.comments .comments-content .loadmore {
cursor:pointer;
max-height:3em;
margin-top:0;
}
.comments .comments-content .loadmore.loaded {
max-height:0;
opacity:0;
overflow:hidden;
}
.comments .thread-chrome.thread-collapsed {
display:none;
}
.comments .thread-toggle {
display:inline-block;
}
.comments .thread-toggle .thread-arrow {
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .thread-expanded .thread-arrow {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.avatar-image-container {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJiWjnL1i9jB4MiT_9FNNsi0KGlNDoX2VlzprbYoCDyizwVQJj-5MxjHyddMxyAKRkdJDLn68oqb3WMvYSKJartV_jyx4MwzDCFHLHe9XwnnqhM5g8DWWAZXBqGHc8bxUAcpHlPOqWeM/s1600/seta+roxa.png) top right no-repeat;
float:left;
vertical-align:middle;
overflow:hidden;
width:65px !important;
height:55px !important;
max-width:65px !important;
max-height:55px !important;
}

/*--------Customizção da imagem avatar--------*/ 

 .comments .avatar-image-container img {
padding:2px;
border:1px dashed #000000;/*---borda da imagem----- */
width:50px !important;/*---largurada imagem----- */
height:50px !important;/*---altura da imagem----- */
max-width:50px !important;
max-height:50px !important;
}
.comments .comment-block {
margin-left:65px;
position:relative;
border:3px solid #BF3EFF; 
background: #FFFFFF; 
border-radius:1px;
}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Os trechos mais importantes estão entre  comentários,mas voçe pode ajustar e customizar de acordo com seu layout alterando as propriedades de cada regra ,mas so mecha naquilo que voçe conhece ok??


Gostou da dica??Que tal deixar um comentário ai,afinal não custa nada ^^.
Até a proxima!