sábado, 2 de fevereiro de 2013

Personalização da área dos Comentários 1.



Procure pelo nome "#comments {". Se não existir, procure por #comments sem a "{". Geralmente irá aparecer uma área onde todos os códigos referidos à caixa de comentário se localizam. Tente selecionar tudo isso (não estará perfeitamente igual a este, mas será parecido).

/* Comments */
.comments{
max-width:598px;
overflow:hidden;
margin-bottom:20px;
padding:20px;
background: #411c48;
border-radius: 10px;
}
#comments h4{
font-size:26px;
letter-spacing:.2em;
color:#eee;
margin:0 0 10px;
padding:0
}
#comments-block{
line-height:1.6em;
margin:10px 0 0 0
}
#comments-block .comment-author{
font-size:22px;
font-family:Patrick Hand, cursive;
margin:0;
padding:5px 10px
}
#comments-block .avatar-image-container img{
border:none;
float:right;
margin:0
}
#comments-block .avatar-image-container.avatar-stock img{
background: url(http://2.bp.blogspot.com/_aAjcAMHOGT4/TSBbG9uIuSI/AAAAAAAAGg0/lMnQQyaob68/s1600/unknown.PNG) no-repeat center; 
height:35px; 
width:35px
}
#comments-block.avatar-comment-indent dd {
margin-left: 10px;
}
#comments-block .comment-body{ 
margin:0;
padding:5px 10px
}
#comments-block .comment-footer{
font-size:10px;
text-align:left;
margin:0 0 15px;
padding:5px 0 0 0;
}
.comment-form {
max-width:610px !important;
}
#comments-block .comment-body p{
margin:0;
padding:0
}
.deleted-comment{
font-style:italic; 
color:gray
}



Esta configuração é do mesmo modo que qualquer outra. Basta pegar o código dos comentários e colocá-lo no seu css, e claro SUBSTITUINDO O JÁ EXISTENTE com este abaixo.



#comments h4 {
margin:1em 0;

line-height: 1.4em;
}
.comments h4 {
width:98%;
padding:7px;
color:#f9b;
font-family: 'Lobster', cursive;
border-bottom: 1px solid #d77ce7;
font-size:28px ;       
border-radius: 0px;
}
#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  font: 28px 'Lobster', cursive;
  border-radius: 13px;
  margin-bottom: -2px;
  color: #faa;;
  padding: 10px;
  background:#993399 url(http://2.bp.blogspot.com/-S4AKqSDPUEs/ToSYCWJy4qI/AAAAAAAAABI/conBgqSajOY/s1600/fade.png) repeat-x top;
box-shadow:0 1px 2px #999;
  }
.comment-form {
max-width: 600px !important;
text-align: justify;
position: center;
}

#comments {
background: #f4f4f4;
margin:0 10px 1.5em;
padding:.25em 1em 1.5em;
border:1px solid #C7BEA2;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #f2f1f1;
-webkit-box-shadow: 0px 0px 15px #B6665B;
-moz-box-shadow: 0px 0px 15px #B6665B;
box-shadow: 0px 0px 15px #B6665B;
}

#comments-block .comment-body {
  margin:.25em 0 0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
  text-align: justify;
  margin-top: 10px;
margin-bottom: 3px;
  padding: 10px;
  color: #383838;
-webkit-box-shadow: 0px 0px 5px #B6665B;
-moz-box-shadow: 0px 0px 5px #B6665B;
box-shadow: 0px 0px 5px #B6665B;
background:#ffc0d8 url(http://2.bp.blogspot.com/-S4AKqSDPUEs/ToSYCWJy4qI/AAAAAAAAABI/conBgqSajOY/s1600/fade.png) repeat-x top;
}
.comments .comment-block {
position:static !important;  
background:#fee !important;   
padding:0.5em 1em;
border-radius:5px !important;
border:1px #fff solid !important;
box-shadow:inset 0 1px 3px #faa !important 

}
box-shadow:0 2px 3px #84d1ff;
  }
#comments-block .comment-footer {
  margin-top: 40px;
  line-height: 1.4em;
  font: 11px Tahoma;
  text-align: right;
  font-style: italic
 max-height: 50px;

  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }



Se caso quiser colocar o Reply (botão de respostas) junto ao Timestamp, que é o outro botãozinho com a opção de excluir o comentário e a data, coloque abaixo, no outro código, este (É RECOMENDÁVEL):

.comment-reply {
float:left;
background:#ffccdd url(http://2.bp.blogspot.com/-S4AKqSDPUEs/ToSYCWJy4qI/AAAAAAAAABI/conBgqSajOY/s1600/fade.png) repeat-x top left;
color:#ff73a1;
font: 12px Tahoma;
text-transform:uppercase;
border-radius: 4px 4px 4px 20px;
border:1px solid #ffadc8;
padding:8px 10px;

}
.comment-timestamp {
float: right;
margin-top: 1px;
max-width: 280px;
background:#ab6abb url(http://2.bp.blogspot.com/-S4AKqSDPUEs/ToSYCWJy4qI/AAAAAAAAABI/conBgqSajOY/s1600/fade.png) repeat-x top left;
color:#fff;
font: 12px Tahoma;
text-transform:uppercase;
border-radius: 4px 4px 20px 4px;
border:1px solid #ab6abb;
padding:8px 10px;
}

.comment-timestamp a {
color:#fff;
}


NO CÓDIGO HTML, FICARÁ DESTA FORMA:

<b:includable id='backlinks' var='post'>
  <a name='links'/><h4><data:post.backlinksLabel/></h4>
  <b:if cond='data:post.numBacklinks != 0'>
    <dl class='comments-block' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'>
            <span class='backlink-toggle-zippy'> </span>
            <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
          <dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
            <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
          </dd>
        </div>
      </b:loop>
    </dl>
  </b:if>
  <p class='comment-footer'>
    <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
  </p>
</b:includable>

Créditos do artigo:
http://www.delicadissima.com/2012/05/comentarios-customizados-delicadissima.html

Nenhum comentário:

Postar um comentário

Nós unimos para divulgar o nosso trabalho como blogueiras.Então para nós sua opinião vai alem de importância é essencial para o desenvolvimento do nosso trabalho:

Related Posts Plugin for WordPress, Blogger...