Modelo para área dos comentários [004]

Hey coelhos lindos! Venho trazer um modelinho de comentários, ele possui o tema galaxia, perfeito para layout's azuis, cinzas ou com tema de galaxia. Os créditos vão para o blog Chuva de HTML, se utilizarem por favor creditem, ok? Eu só estou compartilhando.

~Modelo~

1. 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 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk4HdZqukYP-K0xi0jW6kvrxZ-Hz-J8Uj_HEBh7lM8y1gUgY-mX-YwNntdIQ-LuPTZPsg8B4oozOa-TxPJCnaw-68hsdlyUBO2q5dbS7C8T_IuHTInFGDuzqGNlfMdAV-xBtqel65aTn8/s1600/galaxy.png) repeat;
padding: 5px;
margin-top: 15px;
border-radius: 3px;
}
#comments .comment-author { padding-top: 1.5em;}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {color: $(post.title.text.color);}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {margin: .2em 0 0;}
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #fff!important;
text-shadow: 1px 1px 1px #00175c;
font-family: Short Stack;
font-size: 18px;
text-align: center;
-webkit-transition-duration: .60s;
}
#comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover {
letter-spacing: 2px;
-webkit-transition-duration: .60s;
}
#comments a { /* fonte em geral*/
color: #264191;
text-align: center;
font-family: Muli;
font-size: 10px;
}
.comments .comments-content .icon.blog-author { /*icon que aparece nos comentários do dono do blog*/
position: absolute;
margin: -2px 120px 2px 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvZHUkFp1YjXXCExZEQDUWgmW4kGVZbGRmoRee6eUeQkDrJbeFu5ZHxnLphP8HpnrCMz8yKQCQhUW6HK0Ec0A5r2mG2vdQegeuKSfTIgtJCh-Sq4NW63OqrHy_ms3cI-oBp6fbvMsrmVs/s1600/minitolaxaum.gif) no-repeat;
width: 20px;
height: 20px
-webkit-transition-duration: .60s;
}
.comments .comment-thread.inline-thread { /*enquadramento dos comentários de resposta*/
background: transparent;
}
.comments .continue { /*borda a separar os comentários*/
border-top: 0px solid #cccccc;
}
.comments .comments-content .comment-thread ol { list-style-type:none; padding:0px; text-align:none;}
.comments .comments-content .inline-thread {padding: 0px;}
.comments .comments-content .comment-thread { margin: 8px 0px;}
.comments .comments-content .comment-thread:empty { display: none;}
.comment-replies{ margin-top: 1em; margin-left: 15px; }
.comments .comments-content .comment{ margin-bottom: 0px; padding-bottom: 0px; }
.comments .comments-content .comment:first-child{ padding-top: 16px; }
.comments .comments-content .comment:last-child{ border-bottom:0px; padding-bottom: 0px; }
.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 .comment-content { /*caixa de comentário*/
margin: -10px 10px -2px -40px;
border-radius: 0px 0px 2px 2px;
background: #e1e5e8;
box-shadow: inset -3px -3px 0px #c8d5e0;
padding: 5px 5px 8px 5px;
-webkit-transition-duration: .60s;
}
.comments .comments-content {
margin-bottom: 0px;
font-weight: normal;
text-align: justify;
color: #637fab!important;
text-shadow: 1px 1px 1px #b0c3d1;
}
.comments .comment .comment-actions a,.comments .comment .continue a { /*fonte do botão reply*/
text-align: center;
font-size: 8px;
text-decoration: none;
border-radius: 0px 0px 5px 5px;
background: #e7e1e8;
box-shadow: inset 0px 0px 1px #ddcee0;
padding: 3px 6px 3px 6px;
color: #bda5c2!important;
text-shadow: 0px 0px 0px #ffffff;
text-decoration: none;
margin: -3px 10px 0px 0px;
-webkit-transition-duration: .60s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /*fonte do botão reply em hover*/
text-shadow: 1px 1px 1px #ffffff;
-webkit-transition-duration: .60s;
}
.comment-header { /*nome do autor do comentário*/
display: outline-block;
background: transparent;
font-size: 12px;
padding: 5px 5px 5px 10px;
-webkit-transition-duration: .60s;
}
.comment-header:hover { /*nome do autor em hover*/
-webkit-transition-duration: .60s;
}
.comment-header a { /*fonte do nome do autor*/
font-family: Short stack!important;
font-size: 16px!important;
color: #fff!important;
text-shadow: 1px 1px 1px #00175c!important;
-webkit-transition-duration: .50s;
}
.comment-header a:hover { /*fonte do nome do autor em hover*/
text-shadow: 1px 1px 1px #b550a9!important;
-webkit-transition-duration: .50s;
}
.comments .comments-content .datetime a { /*data do comentário*/
font-size: 10px!important;
float: right;
font-family: Muli!important;
text-decoration: none;
color: #2254a3!important;
text-shadow: 1px 1px 1px #ffffff, -1px -1px 1px #ffffff, 0px 0px 5px #ffffff!important;
margin-top: 3px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime a:hover { /*data do comentário em hover*/
color: #b550a9!important;
letter-spacing: 2px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .owner-actions {position:absolute;right:0;top:0}
.comments .comments-replybox {border:none;height:200px;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.4em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent;
}
.avatar-image-container { /*enquadramento do avatar*/
margin: 0px -30px 0px 8px;
border-radius: 8px 8px 0px 0px;
padding: 4px 5px 4px 4px;
background: #e1e5e8;
max-width: 30px;
max-height: 30px;
min-height: 30px;
min-width: 30px;
}
.comments .avatar-image-container img { /*avatar também*/
border-radius: 8px 8px 0px 0px;
box-shadow: 0px 0px 3px #86a0bd;
max-width: 30px;
max-height: 30px;
min-height: 30px;
min-width: 30px;
-webkit-transition-duration: .60s;
}

Salve e veja o resultado =)