28 de nov. de 2012

Tutorial: Personalize a Área dos Comentários


Hey tiruoletes, eu não postei ontem porque eu estava mal, peguei dengue, mas já estou melhor. Trouxe um tutorial que uma leitora me pediu faz tempo, vamos personalizar a área dos comentários igual a daqui, lembrando que amanha faremos 4 meses de blog =D

Agora vamos ao tutorial, eu não lembro onde eu aprendi e peguei o código, caso você seja responsável me avise que eu dou os créditos, mas eu editei bastante para ficar desse jeito, então créditos a mim se for usar!

Primeiro procure por ]]></b:skin>
Acima dele coloque o seguinte código:

/**======================================================================AREA GERAL DOS COMMENTS========================================================================**/@font-face {font-family: 'Oleo Script'; font-style: normal;font-weight: 400;src: local('Oleo Script'), local('OleoScript-Regular'), url('http://themes.googleusercontent.com/static/fonts/oleoscript/v1/_weQNDK6Uf40CiGFKBBUjobN6UDyHWBl620a-IRfuBk.woff') format('woff')} .comments{width:80% !important;margin:0 auto;font-style:normal !important;font-size:12px !important;font-family:verdana !important;background:transparent !important;border-radius:6px;box-shadow:0 0 3px #aaa;} /**=======================================================================HEADING DOS COMMENTS (1 comentario, 2 comentários...)========================================================================**/.comments h3,.comments h4{width:98%;padding:7px;margin:8px 0 !important;color:rgb(237,28,63);text-align:center;text-shadow:0 0 2px #ccc; background:;font-family:'Oleo Script' !important;/* FONT-FAMILY - se preferir troque */font-size:37px !important; /* TAMANHO DO TEXTO - se preferir troque */} /** ==================================================================BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)====================================================================**/.comments .comment-block {position:static !important;/* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */background: #FFFFFF; /* COR DO FUNDO */
margin-left:23px;padding:0 15px 0 23px;border-top:15px rgb(246,158,175) solid;border-radius:5px;box-shadow:0 0 3px #, inset 0 0 11px #eee} .comments .comments-content .comment {padding:15px 10px !important;margin-bottom:15px !important}/* estilos para o nome do autor do comentário */.comments .comments-content .user a{font-style:normal;border:0;color:rgb(240,94,138) !important;letter-spacing:1px;font-family:'Oleo Script'; font-size:26px;text-shadow:0 1px #aaa;background:transparent;padding:4px 36px;margin-left:-31px !important;border-bottom-right-radius:10px;margin-top:-2px} .comments .comments-content .user{font-style:normal; border:0color:rgb(240,94,138) !important;letter-spacing:1px;font-family:'Oleo Script';font-size:26px;text-shadow:0 1px #aaa;background:transparent;padding:4px 36px;margin-left:11px !important;border-bottom-right-radius:10px;margin-top:-2px} /* estilo da data */.comments .comments-content .datetime a{background:none !important;font:bold 11px courier new;float:right;font-size:10px;color: #F8BEC7;
border:0 !important} /* estilo do avatar */.avatar-image-container {min-width:55px; /* determina um minimo de largura */min-height:55px; /* determina um minimo de altura */border:5px #F8BEC7 solid; /* borda */padding:0 !important;margin-left:23px !important;margin-top:17px !important; position:absolute !important;overflow:hidden !important;background: #F8BEC7;
} .avatar-image-container img {border:3px #F8BEC7 solid;margin:0;max-height:48px;min-height:48px;max-width:48px;min-width:48px;}/** ==================================================================TEXTO DO COMENTÁRIO====================================================================**/.comments p{font-size:14px !important;font-family:oleo script !important;text-shadow:0 1px #eee !important; padding-left:55px !important;padding-bottom:20px;color:#888 !important} /** ================================================================BOTAO - RESPONDER====================================================================**/ /* botao responder do segundo nível */.comments .continue a {background:#F8BEC7 !important;color:#fff !important;float:right;padding:8px !important;height:10px !important;line-height:15px !important;margin-top:-35px !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-size:11px !important;float:right;height:10px !important;color:#fff;padding:6px;border:0 !important;line-height:10px;margin:5px;margin-left:40px;font-family:helvetica;text-shadow: 0 0;border-radius: .5em;background: #FFFFFF; !important;
 font-weight:800;box-shadow:0 1px 2px #F8BEC7;} /* 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;margin-top:40px;padding:0.5em 1em;border-radius:5px;border:1px #F8BEC7; dashed
} .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} /** ==================================================================



Depois é só salvar, simples né? Beijoos

6 comentários:

  1. Awn, que lindo o resultado! #arrasou

    ResponderExcluir
  2. Que lindoo, o resultado fica ótimo, é igual ao seu née!!
    Bjoos...

    sweet girl

    ResponderExcluir
  3. Que lindo, o resultado fica muito perfeito, amei demais! beijo <3

    Explodindo Glitter

    ResponderExcluir
  4. o resultado ta lindo mesmo viu.

    http://fashionistaapaixonada.blogspot.com.br/

    ResponderExcluir
  5. Fica lindo, mas o código é tão monstro que deu dor de cabeça KK, quem sabe, eu use para um layout em que eu esteja mais paciente e etc? bezzo, sarah
    http://svt-pistache.blogspot.com.br/

    ResponderExcluir

Você é livre pra comentar e eu agradeço,mas se for criticar também é bem-vindo,mais sua critica deve ser bem elaborada, se seguir o blog eu vou seguir de volta, é só pedir. E claro que eu vou retribuir os comentários.

By: Kaah. L e Yanca.M