/* 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: