/**Comentários personalizados by Elaine Gaspareto**/ .comments{ clear:both; margin-top:10px; margin-bottom:0; background:#FFF;/*--- cor de fundo --- */ border:1px solid #DDD;/*--- cor da borda--- */ padding:10px 5%} .comments h4{ font:normal normal 20px oswald} .comments ol{ list-style:none; counter-reset:trackit; margin:0} .comments li.comment{ list-style:none; position:relative; counter-increment:trackit; clear:both} .icon.user.blog-author:after{ content:"Autor";/*--- Autor pode ser trocado--- */ position:absolute; top:.4em; left:1em; color:#000; /*--- cor da palavra Autor--- */ font-size:70%} .comments .comment-block:before{ content:counters(trackit,"."); position:absolute; float:none; z-index:10000; left:-1.9em; top:1.2em; bottom:inherit; background:#d9d2e9; /*--- cor de fundo do botão numerado--- */ border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; font-size:25px; color:#F7FCFF;/*--- cor de fonte da numeração--- */ text-align:center; clear:both; margin:0; padding:8px 12px} .comments .comment-replies .comment-block:before{content:"{" counters(trackit,".")"}"; position:absolute; right:.5em; left:inherit; top:inherit; bottom:.5em; float:none; z-index:10000; background:#f0ecfa;/*--- cor de fundo das respostas--- */ border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; font-size:20px; color:#ccc; padding:8px 7px} .comment-header{background:#d9d2e9}/*--- cor de fundo do nome do comentarista--- */ .comments .comments-content .comment-header,.comments .comments-content .comment-content{ margin:5px 5px 10px; padding:0 10px 0 75px} .comments .comments-content .comment-replies .comment-block{ position:relative} .comments .comments-content .comment-replies{ margin-left:2em; margin-top:1em; clear:both; padding:0} .comments .comment-thread.inline-thread{ background:#fff; padding:0 0 0 2em} .comments .comment-replies .comment-block{ float:right; border:1px solid #e9e3f8; min-height:100px; width:90%; margin-left:48px; background:#fbfafc; padding:0 0 3em} .comments .comment-block{ float:right; border:1px solid #e9e3f8; min-height:100px; width:90%; margin-left:48px; background:#f5f2ff; padding:0 0 2em} .comment-actions{ position:absolute; left:4.5em; bottom:.5em; font-size:18px; padding:0} .comments .comment .comment-actions a{ padding-right:5px; padding-top:5px; margin:0} .comments .comments-content .user a{ color:#000} .comments .comments-content .user{ font-style:none; font-weight:normal; font-size:18px;} .comments .comments-content .datetime,.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{ margin-left:6px; float:right; text-transform:none; margin-top:5px; font-size:10px; font-family:arial; font-weight:normal; color:#000}/*--- cor da data--- */ .comments .avatar-image-container{ background:transparent; margin-left:0; max-height:70px; max-width:70px; overflow:hidden; width:70px; height:70px; position:absolute; left:25px; top:55px; z-index:10; padding:3px} .comments .avatar-image-container img{ max-width:70px; max-height:70px; min-height:70px; min-width:70px} .comments .thread-toggle{ display:none} /**Fim do código dos comentários**/
Modelo pronto para personalizar os comentários do blog
Views: