Modelo de comentário

Modelo de comentário
No meu segundo blog de testes de templates eu usei um modelo diferente para a área de comentários.E a instalação é muito simples.Vamos em Tema > Personalizar > Editar HTML - ctrl f - digite /* Comments e troque tudo o que estiver entre
/* Comments----------------------------------------------- */
e
/* Widgets----------------------------------------------- */
pelo novo código.
Vamos trocar:

por:
/* Comments----------------------------------------------- */

#comments {background: transparent;padding: 5px;border-radius: 3px;}#comments .comment-author { padding-top: 1.5em;}#comments h4,#comments .comment-author a,#comments .comment-timestamp a {color: #800000;}#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 {color: #fff!important;text-shadow: 1px 1px 1px #A91717;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 {color: #AC2222;text-align: center;font-family: Muli;font-size: 18px;}.comments .comments-content .icon.blog-author {position: absolute;margin: -2px 120px 2px 0px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbl-fn2Ixa0QYtIjKn3It0jCJlwdkPyC_xMilL5Pr9p9Y3VgYEiGi3uwHDsSTWRMH7BNvXVAyr37UmnGe6mgg9apLIaCStquAgJTQWuV4fVAT5hurLIa9paDo9zKape6spHcXGsBSm7MfUF0yJ6njR1lg_V6MTXfxPPxP3v70w0q3qraZEU3eswS6q/s9/minitolaxaum.gif) no-repeat;width: 20px;height: 20px-webkit-transition-duration: .60s;}.comments .comment-thread.inline-thread {background: transparent;}.comments .continue {border-top: 0px solid #FEF0DE;}.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 {margin: -10px 10px -2px -40px;border-radius: 0px 0px 2px 2px;background: #FEE2C2;  >>>>>>>>>>>>>>>>>>>>>>>>> cor do background, se quiser, troque pela url de uma pattern (background: url(endereço da pattern);)box-shadow: inset -3px -3px 0px #800000;padding: 5px 5px 8px 5px;-webkit-transition-duration: .60s;}.comments .comments-content {margin-bottom: 0px;font-weight: normal;text-align: justify;color: #800000!important;    >>>>>>>>>>>>>>>cor do textotext-shadow: 1px 1px 1px #E4BD8E; >>>>>>>>>>>>>>>cor da sombra do texto}.comments .comment .comment-actions a,.comments .comment .continue a { transparent;      text-align: center;font-size: 12px;text-decoration: none;border-radius: 0px 0px 5px 5px;background: #FDD7B5;box-shadow: inset 0px 0px 1px #800000;padding: 3px 6px 3px 6px;color: #800000!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 {text-shadow: 1px 1px 1px #ffffff;-webkit-transition-duration: .60s;}.comment-header {display: outline-block;background: transparent;font-size: 12px;padding: 5px 5px 5px 10px;-webkit-transition-duration: .60s;}.comment-header:hover {-webkit-transition-duration: .60s;}.comment-header a {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 {text-shadow: 1px 1px 1px #CA833E!important;-webkit-transition-duration: .50s;}.comments .comments-content .datetime a {font-size: 12px!important;float: right;font-family: silkscreen!important;text-decoration: none;color: #A35023!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 {color: #B57F4F!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: 10px;width: 11px;overflow: visible;margin: 0.4em;padding-right: 4px;}.comments .thread-expanded .thread-arrow{background: transparent;}.avatar-image-container {margin: 0px -40px 0px 8px;border-radius: 8px 8px 0px 0px;padding: 4px 5px 4px 4px;background: #FCE1B6;max-width: 120px;max-height: 120px;min-height: 30px;min-width: 30px;}.comments .avatar-image-container img {border-radius: 8px 8px 0px 0px;box-shadow: 0px 0px 3px #CC9D54;max-width: 120px;max-height: 120px;min-height: 30px;min-width: 30px;-webkit-transition-duration: .60s;}

/* Widgets----------------------------------------------- */
Embora o código seja muito grande não há muito o que modificar.Na verdade você pode trocar a cor do background por uma pattern (background: url(endereço da pattern);) ou por outra cor e trocar as cores da fonteMas só troque a cor do background por pattern ou por outra cor se ao lado da palavra background: houver um código hexadecimal.Se tiver a palavra transparent, mantenha assim: background: transparent;
E no trecho:.comments .comments-content .icon.blog-author {position: absolute;margin: -2px 120px 2px 0px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbl-fn2Ixa0QYtIjKn3It0jCJlwdkPyC_xMilL5Pr9p9Y3VgYEiGi3uwHDsSTWRMH7BNvXVAyr37UmnGe6mgg9apLIaCStquAgJTQWuV4fVAT5hurLIa9paDo9zKape6spHcXGsBSm7MfUF0yJ6njR1lg_V6MTXfxPPxP3v70w0q3qraZEU3eswS6q/s9/minitolaxaum.gif) no-repeat;width: 20px;height: 20px-webkit-transition-duration: .60s;}
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbl-fn2Ixa0QYtIjKn3It0jCJlwdkPyC_xMilL5Pr9p9Y3VgYEiGi3uwHDsSTWRMH7BNvXVAyr37UmnGe6mgg9apLIaCStquAgJTQWuV4fVAT5hurLIa9paDo9zKape6spHcXGsBSm7MfUF0yJ6njR1lg_V6MTXfxPPxP3v70w0q3qraZEU3eswS6q/s9/minitolaxaum.gif) no-repeat; corresponde ao coraçãozinho que pulsa ao lado do nome do blogueiro.Se quiser troque por outra imagem que também tenha 9px.Caso depois de trocar as cores onde marquei ainda fique diferente do que você quer, vá copiando os códigos de cores que for encontrando e trocando por outra mais adequada ao seu template.

Dúvidas, clique na plaquinha e me escreva: