Comentários personalizados para usar no blog

Views:
/*INÍCIO DOS COMENTÁRIOS PERSONALIZADOS E NUMERADOS BY ELAINE GASPARETO (https://www.elainegaspareto.com)

----------------------------------------------- */
.comments h4 {
font-family: 'Montserrat', sans-serif; /*FAMÍLIA  DA FONTE DO NÚMERO DE COMENTÁRIOS*/
font-size: 16px; /*TAMANHO DA FONTE DO NÚMERO DE COMENTÁRIOS*/
font-weight: 400; /*ESPESSURA DA FONTE DO NÚMERO DE COMENTÁRIOS*/
text-transform: none;
text-align: center;
letter-spacing: 3px;
margin-top: 30px; /*DISTANCIAMENTO EM RELAÇAO AO TOPO*/
color: #000; /*COR DA FONTE DO NÚMERO DE COMENTÁRIOS*/
}
.comments .comment-block {
padding: 1em 1em 3em 2em; /*DISTANCIAMENTO EM RELAÇÃO AS MARGENS*/
margin-left: 0.3em;
border: 1px solid #D8D8D8; /*COR E ESPESSURA DA BORDA DA ÁREA DO COMENTÁRIO*/
}
.comment-header a {
font: 15px 'Montserrat'; /*TIPO DA FONTE DO AUTOR DO COMENTÁRIO*/
font-weight: 500 !important; /*ESPESSURA DA FONTE DO AUTOR DO COMENTÁRIO*/
text-transform: none;
letter-spacing: 3px;
color: #000; /*COR DA FONTE DO AUTOR DO COMENTÁRIO*/
background: transparent;
padding: 5px;
}
.comments .comments-content .datetime a{
font-size: 8px; /*TAMANHO DA FONTE DA DATA DO COMENTÁRIO*/
float: right; /*FLUTUAÇÃO DA DATA*/
text-align:left;
line-height: 15px;
color:#aaa; /*COR DA FONTE DA DATA*/
font-weight:normal;
background: transparent;
}
.comment-thread li {
background:#FFF;
}
.comments  .comment-content {
position: relative;
padding: 10px;
background: transparent;
font-size:  15px;
font-weight: normal;
}
.comments .avatar-image-container {
max-height: 50px;
width: 50px;
position:relative;
top:1em;
left:-1em;
z-index: 9;
}
.comments .avatar-image-container img {
max-width: 50px;
width: 150%;
}
.comments .comments-content .comment {
padding:20px 10px;
margin-bottom:25px;
}
.comments .comment .comment-actions a {
padding: 5px;
color: #fff; /*COR DA FONTE DOS BOTÕES RESPONDER E EXCLUIR*/
margin: 9px 0 0 5px;
float: left; /*FLUTUAÇÃO DOS BOTÕES RESPONDER E EXCLUIR*/
font-size:.9em; /*TAMANHO DA FONTE DOS BOTÕES RESPONDER E EXCLUIR*/
font-family: "Montserrat"; /*FONTE DOS BOTÕES RESPONDER E EXCLUIR*/
text-transform:none;
background: #FDE2E6; /*COR DE FUNDO DOS BOTÕES*/
}
.comments .comment .comment-actions a:hover {
text-decoration: none;
background: #FDE2E6; /*COR DOS BOTÕES EM ESTADO HOVER*/
color: #000; /*COR DA FONTE DOS BOTÕES EM ESTADO HOVER*/
}
.comments .continue {
border-top: none;
}
.comments .continue a {
display: none;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* COMENTÁRIOS NUMERADOS
------------------------------------------------- */
.comment-thread ol {
counter-reset: contarcomentarios;
}
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 20px;
color: #000;
padding:10px;
position:relative;
z-index:2;
margin-top: 5em;
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color:#ddd;
padding:10px;
position:relative;
z-index:2;
}
/*FINAL DO CÓDIGO COMENTÁRIOS PERSONALIZADOS E NUMERADOS*/
Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage