Modelo para área dos comentários [006]

Yo! Como vai todo mundo? Espero que bem! Bom hoje vou responder as pedidos de postagem, esta bem? Mas antes de começar venho trazer mais um modelo para área dos comentários.  Esse lindo modelinho eu encontrei no blog The Moon Reverse. E é muito fofo e clean, se não quiser mudar as cores, aconselho aplicar em layout clean. 

~~Modelo~

1. Vá até o HTML e procure pela área de comentários, geralmente ela é demarcada com /*comments, ao achar apague toda essa parte e substitua toda a área própria pelo código seguinte:

Códigos

/* Comments h4
----------------------------------------------- */
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: transparent;
}
/* Comments
----------------------------------------------- */
@font-face {
font-family: "silkscreen"; src: url
('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');
}
.comments{clear:both;margin-top:10px;margin-bottom:0;line-
height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-
weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment
.continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 8px;
color:#fff !important; /*--- cor da fonte do botão reply--- */
text-align:center;
text-decoration:none;
background: #cedded; /*--- cor de fundo do botão reply--- */
height:26px;
font-size:8px; /* Tamanho da fonte */
box-shadow: inset 0 0 5px #b3cfed, 0px 0px 2px #ededed;
font-family: "silkscreen";
line-height:28px;
font-weight:normal;
cursor:pointer;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.comments .comment .comment-actions a:hover,.comments .comment
.continue a:hover {
text-decoration: none;
background: #ffbec9; /*--- cor de fundo do botão reply--- */
box-shadow: inset 0 0 5px #ffa2b2, 0px 0px 2px #ededed;
}
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;}
.comments .comments-content .comment{margin-bottom:0;padding-
bottom:0}
.comments .comments-content .comment:first-child{padding-
top:16px}
.comments .comments-content .comment:last-child{border-
bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative;
}
.comments .comments-content .user{font-style:normal;font-
weight:normal}
.comments .comments-content .user a{font-weight:normal;text-
decoration:none;}
.COMMENTS .COMMENTS-CONTENT .ICON.BLOG-AUTHOR{
POSITION:ABSOLUTE;
TOP: -2PX;
RIGHT: 160PX;
MARGIN:0;
BACKGROUND-IMAGE: URL
(http://i.imm.io/1h1fp.png);WIDTH:31PX;HEIGHT:30PX;
}
@font-face {
font-family: "silkscreen"; src: url
('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');
}
.comments .comments-content .datetime a{
font-size:8px;font-family: "silkscreen";
text-decoration:none; color:#fff; text-shadow: 1px 1px 0px
#ff99aa; float: right;/* -- cor do link da data do comentário --
*/
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
margin-left:65px;
margin-right:95px;
background:#fff; /* -- cor de fundo do comentário -- */
border:1px solid #f0f0f0; /* --- cor da borda do comentário ---*/
}
.comment-header{ /*--- linha onde fica o nome do autor do
comentário --- */
background-color:#ffbec9; /*--- cor de fundo--- */
font-size:18px;
border-bottom:1px solid #ff99aa; /*--- cor da borda --- */
box-shadow: inset 0 0 8px #ffa3b3;
padding:7px;
text-transform: uppercase;
}
@font-face { font-family: "laugh"; src: url
('http://static.tumblr.com/vhsz9rv/zrcmruahi/livelaughlove.ttf');
}.comment-header a{
color: #fff; /*--- cor do link nome do autor do comentario --- */
font-family: 'Economica', sans-serif;
font-size: 22px; /* tamanho da fonte */
font-style: normal;
font-weight: 300;
text-shadow: 1px 1px 0px #ff99aa;
}
.comments .comments-content .owner-actions
{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-
left:48px}
.comments .comments-content .loadmore a
{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-
height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-
height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.avatar-image-container{
margin-left: 18px;
border-radius:4px;
float:left;
vertical-align:middle;
overflow:hidden;
width:65px !important;
height:51px !important;
max-width:65px !important;
max-height:51px !important}
.comments .avatar-image-container img{
padding:2px;
border:1px solid #e7e7e7;
width:35px !important;
height:35px !important
;max-width:45px !important;
max-height:45px !important;
border-radius:4px;
-moz-transition: all  1s ease-out;
-webkit-transition: all  1s ease-out;
-o-transition: all  1s ease-out;
-ms-transition: all  1s ease-out;
transition: all  1s ease-out;
}
.comments .avatar-image-container img:hover{
opacity:0.7;
-moz-transition: all  1s ease-out;
-webkit-transition: all  1s ease-out;
-o-transition: all  1s ease-out;
-ms-transition: all  1s ease-out;
transition: all  1s ease-out;
}

Agora você salva o modelo e prontinho.