Modelo pronto para personalizar comentários do blog

Views:
/* Comentários personalizados by Elaine Gaspareto
----------------------------------------------- */
 div.avatar-image-container {
   position: absolute !important;
   min-width: 60px;
   min-height: 60px;
   border: 5px solid #f20653; /*cor da borda da imagem*/
   -moz-border-radius: 60px;
   -webkit-border-radius: 60px;
   border-radius: 60px 60px 60px 60px;
   padding: 0pt !important;
   box-shadow: 0pt 0pt 3px #cccccc;
   margin-left: -10px !important;
   margin-top: -12pt !important;
   background: #f20653; /*Cor do fundo da imagem*/
}

div.avatar-image-container img {
   min-width: 60px;
   min-height: 60px;
   -moz-border-radius: 60px;
   -webkit-border-radius: 60px;
   border-radius: 60px;
}

#comments .comment-author {
   padding-top: 1.5em;
   font-size: 14px;
   text-align: left;
   border-top: 1px solid;
   background-position: 0 1.5em;
}

#comments .comment-author:first-child {
   text-align: left;
   padding-top: 0px;
   border-top: none;
}

.comments .comments-content .comment:last-child {
  padding: 2px;
  border-bottom: 3px solid #f20653; /*Cor da borda inferior do último comentário*/
}

.comments .comments-content .comment:first-child {
  padding: 2px;
}

.avatar-image-container {
   margin: 0.2em 0pt 0pt;
}

#comments h4 {
  text-align: center;
  display: block;
  font-weight:bold;
}

.comments {
  font-style: normal !important;
  font-size: 12px !important; /*Tamanho da fonte dos comentários*/
  font-family: arial !important; /*Fonte dos comentários*/
  color: #000; */Cor da fonte dos comentários*/
}

#commnet-form, .comment-form{
margin-bottom: 40px;
}

#comments-block {
  text-align: left;
  margin:10px auto;
  line-height:1.6em;
}

#comments-block .comment-author {
  text-align: left;
  margin:5px auto;
  padding:5px auto;
}

.blog-author-comment {
  margin:5px auto;
}

.blog-author-comment p{
  margin:5px auto;
}

#comments-block .comment-body {
  text-align: left;
  margin:.35em 0 0 auto;
  line-height: normal;
}

#comments-block .comment-footer {
  text-align: left;
  margin:-.25em 0 2em auto;
  line-height: 1.4em;
  margin:10px auto;
  text-transform:uppercase;
  letter-spacing:.1em;
}

#comments-block .comment-body p {
  text-align: left;
  margin:10px auto;
}

.deleted-comment {
   font-style:italic;
   color:gray;
}

#comments dl dd {
  padding: 0;
  margin: 0;
  line-height: 110%;
  text-align: left;
}

.comment {
  background: #fff; /*Cor de fundo dos comentários*/
  color: #482531; /*Cor da fonte dos comentários, coloque igual a anterior*/
  font-size: 14px; /*Tamanho da fonte dos comentários, coloque igual ao anterior*/
  border: 3px solid #f20653; /*Cor da borda dos comentários*/
  -moz-border-radius: 20px 0px 20px 0px;
  -webkit-border-radius: 20px 0px 20px 0px;
  border-radius: 20px 0px 20px 0px;
  padding-right:5px;-moz-box-shadow: 3px 3px 3px #cccccc;
  -webkit-box-shadow: 3px 3px 3px #cccccc;
  box-shadow: 3px 3px 3px #cccccc;
}

.comment a {
  color: #f20653; /*Cor do link*/
}

.comment a:hover {
  color: #f20653; /*Cor do link quando passamos o mouse*/
}

.comment-content {
  margin-right: 5px;
}

.comments .comments-content .comment-header, .comments .comments-content .comment-content {
  margin: 0pt 8pt 8px;
}

.comments .comments-content {
  margin-bottom: -50px;
}

#commentpaging {
float:right;
}

#commentpaging a {
margin-right:5px;
}

.comments .comments-content .comment-header, .comments .comments-content .comment-content {
0pt 0pt 8px;
}

.comments .comments-content .user a, .comments .comments-content .user {
  border: 0pt none;
  color: #ffffff !important; /*Cor do nome de quem comentou*/
  text-shadow: 0pt 1px rgb(153, 153, 153);
  font-family: comic sans ms !important; /*Fonte do nome de quem comentou*/
  font-size: 15px; /*Tamanho do nome de quem comentou*/
  text-decoration: none;
  background: #f20653; /*Cor do fundo do nome de quem comentou*/
  padding: 5px 12px;
  margin-left: -12px;
  border-bottom-right-radius: 10px;
  -moz-border-radius: 0px 0px 10px 0px;
  -webkit-border-radius: 0px 0px 10px 0px;

}

.comments .comment-block {
  position: static !important;
  background: transparent;
  margin-left: 23px;
  padding: 0pt 0pt 0pt 30px;
}

.comments .comment .comment-actions a, .comments .continue a {
  font-size: 13px !important;
  color: #ffffff !important; /*Cor da fonte dos botões responder e excluir*/
  padding: 3px 6px;
  border: 0pt none !important;
  line-height: 30px;
  margin: 3px;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  -moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
  -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em;
  background: #f20653; /*Cor de fundo dos botões responder e excluir*/
  font-weight: 400;
  box-shadow: 0pt 1px 2px rgb(102, 102, 102) inset;
}

.comments .continue a {
  color: #f20653 !important; /*Cor da fonte do botão responder da direita*/
  float: right;
  padding: 0px 4px !important;
  height: 23px;
  line-height: 23px !important;
  margin-top: -53px !important;
  text-shadow: 0pt 0pt !important;
  background: #fff !important; /*Cor de fundo do botão responder da direita*/
  margin-right: 10px;
box-shadow:none;
}

.comments .comments-content .comment {
  margin-bottom:20px;
  padding-bottom:10px;
}

.comments .comments-content .icon.blog-author {
  display: none !important;
}

.comments .comments-content .datetime {
  display: none; /*Apaga a data*/
}

.comments .thread-toggle {
margin-bottom: 15px;
}

span.icon.user {
display: none !important;
}
/* Contador comentários
------------------------------------------------- */
.comment-thread ol {
counter-reset: contarcomentarios;
}
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 20px;
color: #000;
padding:10px;
position:relative;
z-index:2;
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color:#ddd;
padding:10px;
position:relative;
z-index:2;
}

/*Fim dos Comentários personalizados by Elaine Gaspareto
----------------------------------------------- */
Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage