Novo modelo de comentários

Eu realmente estou apaixonada por criar modelos para comentários *.* Agradeço ao blog Castle Madness (www) por me ter proporcionado a base ideal para quase todos os modelos que criarei, mas podem ter a certeza de que são exclusivos meus, pois estão totalmente personalizados, com ribbons e tudo o mais! Há hovers em tudinho, e eu adorei o resultado do modelo que vos trago hoje, com uma paleta que eu acho lindíssima (www) e uma forma totalmente original. Vamos ver?

Prévia

Procure por /* Comments

Avance essa linha e o tracejado da linha abaixo. 

Apague tudo o que estiver a segui até /* widgets

Substitua por:

/****************Modelo por Anilyan Leounear****************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #ff8086; /*Cor da fonte*/
font-family: Colonna MT; /*Fonte do texto*/
font-size: 30px; /*Tamanho da fonte*/
text-align: center;
-webkit-transition-duration: .60s;
}
#comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover {
color: #ffa3a8;
letter-spacing: 2px;
-webkit-transition-duration: .60s;
}
#comments { /*Área geral dos comentários*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVcF3M5-lUie21Q74DIu5fa3x1LGLxujXd9cJgC8-04-GlBY7iAfxDAdKAxtjfwcld3DzOA10oCCnhMySlg3BUmwvCTVp6a8uOhLfJmqClFStriQIwbM9WwEa_ykJTMp2Et8RrCTZOixEb/s1600/back.png) repeat;
padding: 5px;
margin: 19px 0px 0px 0px;
border-radius: 3px 3px 3px 3px;
-webkit-transition-duration: .60s;
}
.comments .comment-block {
margin: 11px -45px -11px 45px; /*Espaço entre o avatar e o corpo do comentário*/
}
.comment-header { /*enquadramento do nome do autor do comentário*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOODC7harR0f9CUKVmBaRmFgHgOM5Ki-Kw-akidKxwfqo89FA5r-9k3ssb_saNeiVWcQgNAKt7wBx1Znbp3mgKHgwQK_f64iehJMcXgF1DlshxzVgPtRSd_ZDhFCgQeZ7Oi28LWlmzxjsE/s1600/rib1.PNG) no-repeat;
widht: 540px;
height: 40px;
margin: 20px 100px -50px -100px;
padding: 10px 5px 5px 5px;
-webkit-transition-duration: .60s;
}
.comment-header:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh4__TqIcjflN75v_uhWSZ4hFt7t-2iJBKZvyroVHuxrAwmhIpfPIVAd1PTXWBFErsJABq3H_EfrPZuA2gbuo2L4UUz_wGvPVIy7nKRGSp1GObwYj0W8icAjDOePtXJZaSzD_PJp9ObqFg/s1600/rib2.png) no-repeat;
-webkit-transition-duration: .60s;
}
.comment-header a { /*autor do comentário - letras*/
color: #ff8086 !important;
font-family: Colonna MT;
font-size: 20px;
font-weight: normal;
-webkit-transition-duration: .60s;
}
.comment-header a:hover {
color: #e6dcdc !important;
-webkit-transition-duration: .60s;
text-decoration: none;
}
.comments .comments-content .datetime { /*enquadramento da data e hora*/
margin: 50px -320px -30px 320px;
padding: 0px 2px 0px 2px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime a { /* Data e hora - letras */
color: #ff8086 !important;
font-size: 11px !important;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime a:hover {
color: #7a6b85 !important;
letter-spacing: 0px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .comment-content { /*Bloco de texto do comentário*/
margin: -2px 50px -2px -30px; /*Espaço entre o bloco de texto do comentário e o nome do autor*/
position: relative;
background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAsd66XnyZ4lKMaisT12J0vJYhOSeSDx9CD1srPsWGSP22dgD0FbfSq9Y74qgv_2PhTQGVDYINer9Q-Ra4qZdUfSg4J9piaz0z25gnhu4aY9LTkHbInKjmK5h4eATMjNYmfgIELiF2h-zf/s1600/fundo.png) no-repeat;
border-radius: 3px 3px 3px 3px;
padding: 10px 6px 6px 6px;
color: #7a6b85;
text-shadow: 1px 1px 1px #e6dcdc;
font-size: 12px;
font-family: 'Coming Soon', cursive;
box-shadow: 0px 0px 3px #e6dcdc;
-webkit-transition-duration: .60s;
}
.comments:hover .comments-content:hover .comment-content:hover {
border-radius: 10px 10px 10px 10px;
box-shadow: 0px 0px 3px #7a6b85;
-webkit-transition-duration: .60s;
}
.comments .avatar-image-container { /*avatar*/
border-radius: 100px;
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px; /*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
background: #7a6b85;
padding: 3px;
-webkit-transition-duration: .60s;
}
.comments .avatar-image-container:hover {
background: #ffa3a8;
-webkit-transition-duration: .60s;
}
.comments .avatar-image-container img { /*avatar também*/
border-radius: 100px;
opacity: 0.70;
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px; /*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
-webkit-transition-duration: .60s;
}
.comments .avatar-image-container img:hover {
border-radius: 100px;
opacity: 1.0;
-webkit-transition-duration: .60s;
}
.comments .comments-content .comment { /*espaçamento entre os comentários e as bordas*/
padding: 10px 10px !important;
margin-bottom: 5px !important;
}
.comments .comment .comment-actions a { /*botões responder e excluir*/
margin: 5px 0px -25px 35px !important;
padding: 3px 5px 3px 5px !important;
font-size: 9px;
color: #e6dcdc !important;
font-family: 'Coming Soon', cursive;
font-weight: normal;
background: #ffa3a8;
box-shadow: inset 0 0 15px #ff8086, 0 0 3px #ff8086;
border-radius: 0px 0px 10px 10px;
-webkit-transition-duration: .60s;
}
.comments .comment .comment-actions a:hover {
color: #e6dcdc !important;
background: #7a6b85;
box-shadow: inset 0 0 15px #9689a1, 0 0 3px #a599b0;
-webkit-transition-duration: .60s;
}
.comments .continue {
border-top: none;
}
.comments .continue a {
display: none;
}
/****************Fim do Modelo por Anilyan Leounear****************/

Os códigos de um modelo para comentários são sempre extensos, não fui eu que exagerei, tá? Ah, claro que podem mudar as cores, para mudarem a ribbon, usem esta base e substituam a url onde diz ".comment-header {" e ".comment-header:hover {", ok? 

Espero que tenham gostado ^^