Blog da Ketty: Tutorial: Personalizando área dos comentários #1

quinta-feira, 17 de setembro de 2015

Tutorial: Personalizando área dos comentários #1


Boa tarde pessoinhas, *-* 
Procurei um tutorial super simples para área dos meus comentários, e uma seguidora pediu para mim trazer para vocês. espero que vocês gostem. É super fácil, apenas prestem atenção!



  1. Caso o codigo nao funcione acima da linha do }]]></b:skin> , faça outra tentativa: Ctrl+F e procure por   /* Comments selecione todo codigo abaixo dele ate a ultima linha acima de/* Widgets e substitua pelo codigo dessa personalização abaixo:
/* AREA GERAL DOS COMENTÁRIOS*/
.comments{ width:90% !important;/* tamanho da área do comentários, pode diminuir ou aumentar*/ margin:0 auto; font: 1em normal  "verdana"!important; background:#fff !important/* cor de fundo */; color:#fff; border-radius:50px; }
/*HEADING(1 comentario, 2 comentários...)*/
.comments h3,.comments h4{ width:98%; padding:7px; margin-bottom:10px; color:#8B8B83; /* Cor do texto*/ font: 33px "verdana" !important; }
/*BLOCO*/
.comments .comment-block { position:static !important; /* Mantém o Avatar na Frente */ background:#fff; /* Cor de fundo */ margin-left:28px; padding:0 15px 5px 23px; border-top:5px #febdc4 solid; border-bottom-left-radius:30px; border-bottom-right-radius:5px; box-shadow:0 0 3px #aaa }
.comments .comments-content .comment { padding:20px 10px !important; margin-bottom:15px !important }
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a,.comments .comments-content .user{ font-style:normal; border:0; color:#fff !important; font: 22px "verdana"; background:#febdc4; padding:4px 36px; margin-left:-8px; border-bottom-right-radius:10px;margin-top:-2px }
/* estilo da data */
.comments .comments-content .datetime a{ background: transparent !important; font: 9px bold  courier new; float:right; color:#aaa; border:0 !important }
/* estilo do avatar */
.avatar-image-container {position:absolute !important; min-width:60px; min-height:60px; border:5px #febdc4 solid; border-radius:60px; padding:0 !important; box-shadow:0 0 3px #febdc4; margin-left:-9px !important; margin-top:0 !important; background:#fff; overflow:hidden }
.avatar-image-container img { margin:0; display:block; max-height:60px; min-height:60px; max-width:60px; min-width:60px; padding:0 !important; border-radius:60px; border:0 !important; overflow:hidden /* hack para evitar serrilhado na imagem */ }
/*TEXTO DO COMENTÁRIO*/
.comments p{ font:1em "courier new" !important; text-shadow:0 0 !important; padding-left:20px !important; color:#9C9C9C !important }
/* botao responder do segundo nível */
.comments .continue a { background:#fff !important; color:#777 !important; float:right; padding:2px 4px!important; height:23px;line-height:23px !important; margin-top:-45px !important; text-shadow:0 0 !important }
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a { font:1em "helvetica" !important; color:#fff; padding:3px 6px; border:0 !important; line-height:30px; margin:5px; margin-left:10px; text-shadow: 0 1px #999; border-radius: .5em; background: #ff82ab; font-weight:800; box-shadow:inset 0 1px 2px #666 }
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover { text-decoration:none !important; padding-bottom:4px }
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread { background-color:transparent !important; padding:0.5em 1em; border-radius:5px; border:1px #ddd dashed !important }
.comments .comments-content .comment-replies { margin-top:1em; margin-left:56px !important }
.comments .continue { border-top:0 !important }
.comments .thread-toggle,.icon.blog-author {display:none !important}
/*estilos para formatação do texto dos comments*/
.comments .comments-content a{background:#999 url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#000;padding-left:15px;font-weight:400} .comments .comments-content em{font:normal 12px 'segoe script';color:#fff} .comments .comments-content b{font:bold 11px 'arial';color:#999;text-shadow:0 0} .comments .comments-content strong {margin:10px 0;border:1px #fff solid;background:url(http://2.bp.blogspot.com/-rRFTCvBi0A4/TwXcVciZO0I/AAAAAAAAWzM/K2dXpNdjcaw/s1600/code.jpg);overflow:auto;width:98%;position:relative;border-radius:10px;box-shadow:0 0 5px rgb(199,198,166);color:#000;display:block;padding:5px 12px;text-shadow:0 1px #fff;line-heigth:18px;font-size:12px}
/*Fim*/


Espero que gostem. Beijos.


Nenhum comentário:

Postar um comentário

Olá que bom que veio comentar aqui no Blog da Ketty!

-Sem chingamentos;
-Leio os comentários de crítica construtiva sempre;
-Deixe o link do seu blog;
-Se for reblogar deixe um aviso.

-Agradeço a atenção. Ketty.