Personalizar a área dos comentários

    Olá bolachas !

    Hoje decidi postar um tutorial muito procurado, e que ás vezes até dá erro ou não fica tão bonito como esperávamos, esse tutorial é como personalizar a área dos comentários.

    Ainda podem participar no concurso até ás 21:30 de hoje.

    Chegamos aos 50 seguidores!!!

    Sem mais rodeios, vamos ao que interessa. A área dos comentários fica igual á minha, mas por favor não imitem as minhas cores.

    Cá vai:

Vai a Modelo > Editar HTML e pesquisa por /* Comments

    Apaga tudo o que aparece nessa área menos o ----------------*/ que aparece em baixo dessa tag.
    Aí cola:

.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 15px;

color:#999 !important; /*--- cor da fonte do botão reply--- */

text-align:center;

text-decoration:none;

background: #ccc;  /*--- cor de fundo do botão reply--- */

background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); /*--- cor de fundo gradiente--- */

background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );/*--- cor de fundo gradiente--- */

border:1px solid #C0C0C0;  /*--- cor da borda do botão reply--- */

height:26px;

line-height:28px;

font-weight:normal;

cursor:pointer;

}

.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{

background-repeat: no-repeat;

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);

width:18px;

height:18px;

display:inline-block;

margin:0 0 -4px 6px;

float:right;

}

.comments .comments-content .datetime a{

font-size:13px;

text-decoration:none; color:#ffff; /* -- cor do link da data do comentário -- */

}

.comment-content{margin:0 0 8px;padding:0 5px;

}

.comments .comment-block{

margin-left:65px;

position:relative;

background:#fff; /* -- cor de fundo do comentário -- */

border:3px solid #FF69B4; /* --- cor da borda do comentário ---*/

}

.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */

background-color: #7fbaf9;   /*--- cor de fundo--- */

font-size:17px;

border-bottom:1px solid #FF69B4;  /*--- cor da borda fininha --- */

padding:5px;

}

.comment-header a{

color: #ffff; /*--- cor do link nome do autor do comentario --- */

}

.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;

}

.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;

}

.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;

}

.avatar-image-container{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeRlANLLmmsWKoe-TrxTXs2eVB8TBRre-uUgrW_aWQkxbXUfvaX-jZk2IY4Bc5ESFfxRH73QhHHq8EqXIJygHmWTMcUegiAoPvIuoHKf4Ze7FtdKj_YmE37DSfO1woHHIZJBJgzcSiGzE/s1600/imagem-arrow.png) top right no-repeat; /*--- imagem arrow---*/

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 #ccc;

width:45px !important;

height:45px !important

;max-width:45px !important;

max-height:45px !important;

}

    Recomendo-vos a  colar esse texto numa folha do Word e fazer as alterações necessárias e apenas depois colar no HTML. É mais simples.

    Depois, pesquisa por  #comments {

    Vais encontrar algo parecido com isto:

background: #ccc none repeat scroll top center;

padding: 15px;

    Troca o #ccc pelo código da cor que quiseres que seja o fundo da área dos comentários.
    Em baixo cola:

background-image: url(URLDAIMAGEM);

    E se quiseres uma imagem como fundo em vez de uma cor, entre parêntesis coloca o URL da imagem.
    Faz pré-visualizar e se estiver tudo certinho, Salva.
    Gostaram?
    Bem simples, não?  ^-^