/* Comentários personalizados*/
.comments{
width:90% !important;/* tamanho da área do comentários, pode diminuir ou aumentar*/
margin:0 auto;
font: 1em normal "verdana"!important;
background:#fff !important/* cor de fundo */;
color:#fff;
border-radius:50px;
}
/*HEADING(1 comentario, 2 comentários...)*/
.comments h3,.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
color:#8B8B83; /* Cor do texto*/
font: 20px "verdana" !important;
}
/*BLOCO*/
.comments .comment-block {
position:static !important; /* Mantém o Avatar na Frente */
background:#fff; /* Cor de fundo */
margin-left:28px;
padding:0 15px 5px 23px;
border-top:5px #F5E6F9 solid;
border-bottom-left-radius:30px;
border-bottom-right-radius:5px;
box-shadow:0 0 3px #aaa
}
.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,.comments .comments-content .user{
font-style:normal;
border:0;
color:#fff !important;
font: 22px "verdana";
background:#F5E6F9; /* cor de fundo */
padding:4px 36px;
margin-left:-8px;
border-bottom-right-radius:10px;
margin-top:-2px
}
/* estilo da data */
.comments .comments-content .datetime a{
background: transparent !important;
font: 9px bold courier new;
float:right;
color:#aaa;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
position:absolute !important;
min-width:60px;
min-height:60px;
border:5px #F5E6F9 solid;
border-radius:60px;
padding:0 !important;
box-shadow:0 0 3px #febdc4;
margin-left:-9px !important;
margin-top:0 !important;
background:#fff;
overflow:hidden
}
.avatar-image-container img {
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0 !important;
border-radius:60px;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font:1em "courier new" !important;
text-shadow:0 0 !important;
padding-left:20px !important;
color:#9C9C9C !important
}
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#777 !important;
float:right;
padding:2px 4px!important;
height:23px;
line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 !important
}
/* botao responder do primeiro nível, mais estilos para o botão do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font:1em "helvetica" !important;
color:#fff;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
text-shadow: 0 1px #999;
border-radius: .5em;
background: #ff82ab;
font-weight:800;
box-shadow:inset 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;
padding:0.5em 1em;
border-radius:5px;
border:1px #ddd dashed !important
}
.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
}
/*estilos para formatação do texto dos comments*/
.comments .comments-content a{
color:#000;
padding-left:15px;
font-weight:400
}
.comments .comments-content em{
font:normal 12px 'segoe script';
color:#fff
}
.comments .comments-content b{
font:bold 11px 'arial';
color:#999;
text-shadow:0 0
}
.comments .comments-content strong {
margin:10px 0;
border:1px #fff solid;
overflow:auto;
width:98%;
position:relative;
border-radius:10px;
box-shadow:0 0 5px rgb(199,198,166);
color:#000;
display:block;
padding:5px 12px;
text-shadow:0 1px #fff;
line-heigth:18px;
font-size:12px
}
/*Fim do código*/
Modelo pronto para personalizar os comentários do blog
Views:
