Modelos de comentários


Oi pessoas!

Desculpem estar postando tão tarde,era para a postagem sair mais cedo,mas eu dormi a tarde inteira pois estou muito gripada,por causa de um experimento de mingau que estava cheio de mofo...
Eu to com frio e calor ao mesmo tempo...Nem sei como eu to conseguindo postar,como a Nen diz: É muito Nescal Radical...

Eu trago uns modelinhos de comentários já que poucas pessoas gostam de personalizar os comentários,e querem um modelo pronto,já que o código é extenso e chato de modificar!
São só dois,por preguiça mesmo ^~^
1° Modelo

Substitua tudo abaixo de /* Comments,até /* Widgets por isso para os comentários ficarem desse modo:
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
font-family:  Tahoma;
font-size: 12px;
color: #696969;}
#comments {
background: transparent; /*Fundo da área geral dos comentários*/
padding: 15px;
}
.comments .comment-block { margin-left: 40px; margin-top -60px; /*Espaço entre o avatar e o corpo do comentário*/}
.comment-header {
background: #f6f6f6; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #D19B51; /*Borda de onde fica o nome do autor do comentário*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
padding: 3px;}
.comment-header a {
color: #A57E5C !important; /*Cor do nome do autor do comentário*/
font-family: Georgia;
font-style: black;
font-size: 15px; /*Tamanho da fonte do nome do autor do comentário*/
font-weight: normal; /*Troque normal por bold para deixar o texto em negrito*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;}
.comment-header a:hover { color: #D19B51 !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}
.comments .comments-content .datetime a{
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
font-family:  bit; /*Fonte dos botões responder e excluir*/
font-size: 8px;
float: right; /*Data alinha á direita*/
line-height: 16px; /*Altura da linha da data e hora*/}
.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor. Só mexa se souber o que está fazendo*/
position: relative;
background: #f6f6f6; /*Fundo do bloco de texto do comentário*/
border: 1px solid #D19B51; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #4c4c4c; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
max-width: 36px;
max-height: 36px;
min-height: 36px;
min-width: 36px;
border:1px solid #AF9A76;
padding: 2px; /*Espessura da borda do avatar*/
margin-left: -5px;
-webkit-transition-duration: .50s;
}
.comments .avatar-image-container:hover{
max-width: 36px;
max-height: 36px;
min-height: 36px;
min-width: 36px;
border:1px solid #C6C276;
margin-left: -5px;
-webkit-transition-duration: .50s;
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}
.comments .comment .comment-actions a {
padding: 5px;
background: #d66b64; /*Fundo dos botões responder e excluir*/
border: 1px solid #debdb2; /*Borda dos botões responder e exluir*/
color: #debdb2 !important; /*Cor do texto dos botões responder e excluir*/
font-family:  bit; /*Fonte dos botões responder e excluir*/
font-size: 8px;
font-weight: normal; /*Troque bold por normal para tirar o negrito*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
border-radius: 5px;
position: right;
transition: color 0.4s ease-in;
margin-right: 10px;}
.comments .comment .comment-actions a:hover {
background: #debdb2; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #d66b64; /*Borda dos botões responder e exluir quando passa o mouse*/
color: #d66b64 !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
text-decoration: none;}
.comments .continue { border-top: none;}
.comments .continue a {display: none;}
2° Modelo
É só fazer o processo do 1° Modelo,mas substituir por esse código:

#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
font-family:  Tahoma;
font-size: 12px;
color: #696969;}
#comments {
background: transparent; /*Fundo da área geral dos comentários*/
padding: 15px;
}
.comments .comment-block { margin-left: 40px; margin-top -60px; /*Espaço entre o avatar e o corpo do comentário*/}
.comment-header {
background: #f6f6f6; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #9F90B3; /*Borda de onde fica o nome do autor do comentário*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
padding: 3px;}
.comment-header a {
color: #A3849B !important; /*Cor do nome do autor do comentário*/
font-family: Georgia;
font-style: black;
font-size: 15px; /*Tamanho da fonte do nome do autor do comentário*/
font-weight: normal; /*Troque normal por bold para deixar o texto em negrito*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;}
.comment-header a:hover { color: #C094A2 !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}
.comments .comments-content .datetime a{
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
font-family:  bit; /*Fonte dos botões responder e excluir*/
font-size: 8px;
float: right; /*Data alinha á direita*/
line-height: 16px; /*Altura da linha da data e hora*/}
.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor. Só mexa se souber o que está fazendo*/
position: relative;
background: #f6f6f6; /*Fundo do bloco de texto do comentário*/
border: 1px solid #9F90B3; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #4c4c4c; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 36px;
max-height: 36px;
min-height: 36px;
min-width: 36px;
border:1px solid #9F90B3;
padding: 2px; /*Espessura da borda do avatar*/
margin-left: -5px;
-webkit-transition-duration: .50s;
}
.comments .avatar-image-container:hover{
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 36px;
max-height: 36px;
min-height: 36px;
min-width: 36px;
border:1px solid  #9C8FB0;
margin-left: -5px;
-webkit-transition-duration: .50s;
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}
.comments .comment .comment-actions a {
padding: 5px;
background: #E0C0BD; /*Fundo dos botões responder e excluir*/
border: 0px solid #FFF; /*Borda dos botões responder e exluir*/
color: #000 !important; /*Cor do texto dos botões responder e excluir*/
font-family:  bit; /*Fonte dos botões responder e excluir*/
font-size: 8px;
font-weight: normal; /*Troque bold por normal para tirar o negrito*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
border-radius: 5px;
position: right;
transition: color 0.4s ease-in;
margin-right: 10px;}
.comments .comment .comment-actions a:hover {
background:  #AB9BBD; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #8D7B98; /*Borda dos botões responder e exluir quando passa o mouse*/
color: #fff !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
text-decoration: none;}
.comments .continue { border-top: none;}
.comments .continue a {display: none;}
Espero que usem e gostem!
Se usarem,creditem o TWC ;3

Kissus ~~♥

8 comentários:

  1. Perfeitooooooos *w* Pena que no meu blog não pega nenhum código de comentário :( Não sei porquê :/

    -4 Seconds.

    ResponderExcluir
    Respostas
    1. Thaanks'
      Que pena...Você tem que usa o modelo travel 2 ~~

      Excluir
  2. Que fácil! Adoreiii! *W* Vou testar p ver se combina com o meu novo Layout
    !!
    BJSS
    Minha Vida Fora de Série - perfil

    ResponderExcluir
  3. Amei os modelos, e seja bem vinda >.<

    Kissus >3<

    ResponderExcluir