Mudando a área dos comentários

Oi gente hoje trago um tutu que achei no blog Go  imagines, e personalizei do meu jeito clique em leia mais para ver o código.

Cole o código antes de ]]></b:skin>
Visualização:

/**=========== AREA GERAL DOS COMMENTS ===========**/ .comments{ width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/ margin:0 auto; font-style: normal !important; font-size: 12px !important; font-family: verdana !important; background: url(http://i.imgur.com/XB2Tq.png) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */ border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */ } /**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/ .comments h3,.comments h4{ width: 98%; padding: 7px; margin: 10px 0 !important; color: #EE82EE !important; /* cor da fonte */ text-align: center; /* alinhamento */ font-family:'Dancing Script' !important; /* fonte - se preferir troque */ font-size: 37px !important; /* tamanho do texto - se preferir troque */ } /**= BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone...) =**/ .comments .comment-block { position:static !important; /* mantém o avatar na frente do bloco - não mude */ background: #fff; /* cor do fundo da caixinha dos comentários */ margin-left: 23px; padding: 0 15px 0 23px; border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */ border-radius: 5px; /* bordas arredondadas */ } .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{ font-style:normal; border:0; color: #CD96CD !important; /* cor da fonte do nome de quem comenta */ letter-spacing: 1px; font-family:'Dancing Script'; /* fonte do nome de quem comenta */ font-size: 26px; /* tamanho da fonte */ text-shadow:1 1px #aaa; /* sombra na fonte do nome */ background: transparent; padding: 4px 36px; margin-left:-31px !important; border-bottom-right-radius:10px; margin-top:-2px } .comments .comments-content .user{ font-style:normal; border:0; color: #FF80BC !important; letter-spacing:1px; font-family:'Dancing Script'; font-size: 26px; text-shadow: 0 1px #aaa; background: transparent; padding: 4px 36px; margin-left: 11px !important; border-bottom-right-radius:10px;margin-top:-2px } /*Nome do autor do comentário hover*/ .comments .comments-content .user a:hover { text-decoration:none !important; color: #A1DBE4 !important; /* cor do nome do autor do comentário quando passa o mouse */ } /* estilo da data */ .comments .comments-content .datetime a{ background: none !important; font-family: times new roman; /* fonte - mude se desejar */ float: right; /* posicionamento */ font-size: 12px; /* tamanho da fonte da data */ color: #fff !important; /* cor da data */ border:0 !important; margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/ } /* estilo do avatar */ .avatar-image-container { min-width: 60px; /* determina um mínimo de largura */ min-height: 60px; /* determina um mínimo de altura */ padding:0 !important; margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */ margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */ position: absolute !important; overflow: hidden !important; background: #fff; } .avatar-image-container img { border: 3px #EAEAEA solid; /* borda do avatar */ margin:0; max-height: 48px; min-height: 48px; max-width: 48px; min-width: 48px; } /**=========== TEXTO DO COMENTÁRIO ===========**/ .comments p{ font-size: 14px !important; /* tamanho da fonte do comentário */ font-family: Times new roman !important; */ fonte do comentário */ text-shadow: 0 1px #eee !important; /* sombra na fonte */ padding-left: 55px !important; padding-bottom: 20px; color: #E0FFFF !important /* cor do texto */ } /**=========== BOTAO – RESPONDER ===========**/ /* botão responder do segundo nível */ .comments .continue a { background: #00FFFF !important; /* cor do fundo */ color: #fff !important; /* cor da fonte */ float: right; /* posicionamento */ padding: 8px !important; height: 10px !important; line-height: 15px !important; margin-top: -35px !important; } /* botão responder do primeiro nível, mais estilos para o botão do segundo nível */ .comments .comment .comment-actions a,.comments .continue a { font-size: 11px !important; float: right; height: 10px !important; /* altura do botão */ color: #fff !important; /* cor da fonte */ padding: 6px; border: 0 !important; line-height: 10px; margin: 5px; margin-left: 40px; font-family: helvetica; /* fonte - mude se desejar*/ text-shadow: 0 0; border-radius: .5em; /* bordas arredondadas */ background: #CD96CD; /* cor do fundo */ font-weight: 800; } /* botão hover*/ .comments .comment .comment-actions a:hover { text-decoration:none !important; background: #FF80BC; /* cor do fundo do botão hover */ } /* estilos para bloco de respostas */ .comments .comment-thread.inline-thread { background-color: transparent !important; margin-top: 40px; padding: 0.5em 1em; border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */ } .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} /**======= Fim []=======**/

Também tem um outro modelo se você preferir:

/**=========== AREA GERAL DOS COMMENTS ===========**/ .comments{ width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/ margin:0 auto; font-style: normal !important; font-size: 12px !important; font-family: verdana !important; background: url(http://i.imgur.com/ShBeO.png) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */ border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */ } /**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/ .comments h3,.comments h4{ width: 98%; padding: 7px; margin: 10px 0 !important; color: #87CEEB !important; /* cor da fonte */ text-align: center; /* alinhamento */ font-family:'Dancing Script' !important; /* fonte - se preferir troque */ font-size: 37px !important; /* tamanho do texto - se preferir troque */ } /**= BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone...) =**/ .comments .comment-block { position:static !important; /* mantém o avatar na frente do bloco - não mude */ background: #FFF0F5; /* cor do fundo da caixinha dos comentários */ margin-left: 23px; padding: 0 15px 0 23px; border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */ border-radius: 5px; /* bordas arredondadas */ } .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{ font-style:normal; border:0; color: #FF69B4 !important; /* cor da fonte do nome de quem comenta */ letter-spacing: 1px; font-family:'Dancing Script'; /* fonte do nome de quem comenta */ font-size: 26px; /* tamanho da fonte */ text-shadow:1 1px #aaa; /* sombra na fonte do nome */ background: transparent; padding: 4px 36px; margin-left:-31px !important; border-bottom-right-radius:10px; margin-top:-2px } .comments .comments-content .user{ font-style:normal; border:0; color: #FF80BC !important; letter-spacing:1px; font-family:'Dancing Script'; font-size: 26px; text-shadow: 0 1px #aaa; background: transparent; padding: 4px 36px; margin-left: 11px !important; border-bottom-right-radius:10px;margin-top:-2px } /*Nome do autor do comentário hover*/ .comments .comments-content .user a:hover { text-decoration:none !important; color: #FF1493 !important; /* cor do nome do autor do comentário quando passa o mouse */ } /* estilo da data */ .comments .comments-content .datetime a{ background: none !important; font-family: times new roman; /* fonte - mude se desejar */ float: right; /* posicionamento */ font-size: 12px; /* tamanho da fonte da data */ color: #FFC0CB !important; /* cor da data */ border:0 !important; margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/ } /* estilo do avatar */ .avatar-image-container { min-width: 60px; /* determina um mínimo de largura */ min-height: 60px; /* determina um mínimo de altura */ padding:0 !important; margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */ margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */ position: absolute !important; overflow: hidden !important; background: #fff; } .avatar-image-container img { border: 3px #EAEAEA solid; /* borda do avatar */ margin:0; max-height: 48px; min-height: 48px; max-width: 48px; min-width: 48px; } /**=========== TEXTO DO COMENTÁRIO ===========**/ .comments p{ font-size: 14px !important; /* tamanho da fonte do comentário */ font-family: Times new roman !important; */ fonte do comentário */ text-shadow: 0 1px #eee !important; /* sombra na fonte */ padding-left: 55px !important; padding-bottom: 20px; color: #EE82EE !important /* cor do texto */ } /**=========== BOTAO – RESPONDER ===========**/ /* botão responder do segundo nível */ .comments .continue a { background: #87CEEB !important; /* cor do fundo */ color: #fff !important; /* cor da fonte */ float: right; /* posicionamento */ padding: 8px !important; height: 10px !important; line-height: 15px !important; margin-top: -35px !important; } /* botão responder do primeiro nível, mais estilos para o botão do segundo nível */ .comments .comment .comment-actions a,.comments .continue a { font-size: 11px !important; float: right; height: 10px !important; /* altura do botão */ color: #fff !important; /* cor da fonte */ padding: 6px; border: 0 !important; line-height: 10px; margin: 5px; margin-left: 40px; font-family: helvetica; /* fonte - mude se desejar*/ text-shadow: 0 0; border-radius: .5em; /* bordas arredondadas */ background: #87CEEB; /* cor do fundo */ font-weight: 800; } /* botão hover*/ .comments .comment .comment-actions a:hover { text-decoration:none !important; background: #87CEEB; /* cor do fundo do botão hover */ } /* estilos para bloco de respostas */ .comments .comment-thread.inline-thread { background-color: transparent !important; margin-top: 40px; padding: 0.5em 1em; border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */ } .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} /**======= Fim [] =======**/

Gostou, comente!