6 de abr de 2013

3 Modos de personalização dos comentários

Oie Minna!!Como estão??
O PE ta meio abandonado neh ? e.e
Sory por isso....Mas agora é que ta complicando semana passada não postei muito por causa da semana de prova estar chegando, e agora na segunda tenho prova de Matemática, e meu professor pega muito no meu pé, e se eu não tirar uma nota boa sei que ele vai zuar pra caramba (isso tudo é pq fico lendo livro na aula dele).
Bom eu gosto de reunir vários estilos pra depois juntar e postar aqui igual fiz aqui.
Então reuni 3 tipos legais de personalizar os coments pra vocês.
Bom este eu achei no World of Tutos.
Acho que todos já sabem qual código tem que substituir mas okay....
No seu Html substitua todo o codigo correspondente a  /* Comments  por este 
(clique aqui para ver o codigo)
este sera o seu resultado, mas no caso terá que colocar as cores ...ou seja personalizando o codigo.

o modo é o mesmo processo e ele eu encontrei no Crazy for Html, mas irão substituir por este codigo:
/* Comments
----------------------------------------------- */
.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:20px;font-size:12px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#ffffff!important; /*--- cor da fonte do botão reply--- */
text-align: center;
text-decoration:none;
background: #e5a159;  /*--- cor de fundo do botão reply--- */
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #e5a159), color-stop(1, #e5a159) ); /*--- cor de fundo gradiente--- */
background: -moz-linear-gradient( center top, #e5a159 20%, #e5a159100% );/*--- cor de fundo gradiente--- */
border-radius:2px;
-moz-border-radius:2px;
height:24px;
line-height:25px;
font-weight:normal;
cursor:pointer;
-webkit-transition-duration: .50s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
text-decoration: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #000000), color-stop(1, #000000) ); /*--- cor de fundo gradiente--- */
background: -moz-linear-gradient( center top, #000000 20%, #000000 100% );/*--- cor de fundo gradiente--- */
-webkit-transition-duration: .50s;
}
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-center:50px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative;
}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{font-weight:normal;text-decoration:none;}
.comments .comments-content .datetime a{
font-size:11px;
float: right;
text-decoration:none; color:#36b1b9; /* -- cor do link da data do comentário -- */
-webkit-transition-duration: .50s;
}
.comments .comments-content .datetime a:hover{
font-size:11px;
float: right;
text-decoration:none; color:#36b1b9; /* -- cor do link da data do comentário -- */
-webkit-transition-duration: .50s;
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
margin-left:65px;
position:relative;
background:#fff; /* -- cor de fundo do comentário -- */
border:1px solid #d8d5d5; /* --- cor da borda do comentário ---*/
border-radius:1px;
-moz-border-radius:1px;
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
background-color:#f6f6f6;   /*--- cor de fundo--- */
font-size:14px;
border-bottom:1px solid #36b1b9;  /*--- cor da borda --- */
padding:5px;
}
.comment-header a{
color: #9F2E30; /*--- cor do link nome do autor do comentario --- */
-webkit-transition-duration: .50s;
}
.comment-header a:hover{
color: #000000; /*--- cor do link nome do autor do comentario --- */
-webkit-transition-duration: .50s;
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-right:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.avatar-image-container{
width:55px !important;
height:55px !important;
max-width:55px !important;
max-height:55px !important}
.comments .avatar-image-container img{
padding:2px;
border:1px solid #e5a159;
width:40px !important;
height:40px !important
;max-width:40px !important;
max-height:40px !important;
-webkit-border-radius: 1px;
-webkit-transition-duration: .50s;
}
.comments .avatar-image-container img:hover{
padding:2px;
border:1px solid #36b1b9;
width:40px !important;
height:40px !important
;max-width:40px !important;
max-height:40px !important;
-webkit-border-radius: 1px;
-webkit-transition-duration: .50s;
}

o resultado seria o dos comments atuais do PE, que quando passam o cursor sobre o avatar a borda mudar de cor.

Como 3° modelo indicaria este post do Candylland, que varios estilos :P
clique aqui

Era só >.<
Os prox. posts também serão em relação a personalização de comments,.
Chu♥~

18 comentários:

  1. Boas sorte com a prova fofa 。◕‿◕。
    o medolo é muito fofo, acho que vou até
    usar, fica muito lindinho >.<

    Nyah Kawaii

    ResponderExcluir
  2. Que lindos os modelos Midori :3
    Odeio semana de provas, é um saco :c

    http://zombie-of-html.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. *---* Arigato, é realmente horriveel semana de provas :S

      Excluir
  3. O modelo fica super fofo e lindinho :3
    Boa sorte na prova ><

    Beijos
    www.Be--Different.blogspot.com

    ResponderExcluir
  4. adooreii fica lindoodemaiss o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  5. Fica Muito lindo!!!!!! Esse Modelo é perfeito!!! *O*

    gabyfaria.blogspot.com

    ResponderExcluir
  6. Adoreiii , irei usar concerteza no proximo lay
    bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  7. Olá, quem está a falar é a un~~
    não se preocupe, não vim xingar, ou avisar que irei plagiar, só vim pedir desculpas e avisar que mudei, mudei de casa de escola de blog, como sempre, sempre estou a mudar, e agora me senti mal por prejudicar outras pessoas.

    ResponderExcluir
    Respostas
    1. Entendo, sem problemas, como muitos me disseram você na realidade divulgou o PE, ligo mto não Mas fico feliz que tenha mudado

      Excluir
  8. Gostei muito do resultado, ficou fofo!
    garotadabolsa.blogspot.com.br
    Segue se gostar?

    ResponderExcluir

-Yoo!!

Sem comentários Ofensivos.
Pedidos na ask
Elogios são sempre bem vindos
-Responderei a todo mundo...

(◕‿◕✿)  。◕‿◕。 ⊱✿◕‿◕✿⊰ (◡‿◡✿) (◕〝◕)


◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐