27/02/2013

Tutorial: Modelo para área dos comentários (001)

||

Boa tarde meus amores, como vão? Venho trazer uma péssima noticia...eu irei me mudar em breve... e por esta razão irei fazer algumas postagens programadas, então terá um aviso sempre avisando quando for uma, mas mudando de assunto hoje venho postar um modelo para área de comentários de vocês. Os créditos vão para o blog Six Teen, eu realmente não sei se é o que criou o modelo, mas como só achei lá coloquei os créditos, caso saibam deixe um recadinho me avisando. Bom eu coloquei no final do título (2), por já ter postado outro modelinho aqui de comentários então caso queira dar uma olhada nele, visite esta pagina. Então pronto para o tutorial? É bem fácil.


 Modelo da área

Primeiro procure por #comments {, então apague todos os códigos que se refere as comentários, esse aqui abaixo:

#comments {
  background: $(comments.background);
  padding: 15px;
}

#comments .comment-author {
  padding-top: 1.5em;
}

#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}

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

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

/* Comments
----------------------------------------------- */
#comments a {
  color: $(post.title.text.color);
}

.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(post.title.text.color);
  border-bottom: 1px solid $(post.title.text.color);
}

.comments .comment-thread.inline-thread {
  background: $(post.background.color);
}

.comments .continue {
  border-top: 2px solid $(post.title.text.color);
}

Apague todo ele é cole este no lugar:

#comments {
  background: $(comments.background);
background: url(http://2.bp.blogspot.com/-APpqQRLaad0/TqibQb-02oI/AAAAAAAAAzM/awB9YmsWj4o/s1600/gray-with-pink-flowers.gif) repeat;
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}
/* Comments
----------------------------------------------- */
.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px}
.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:#444444 !important; /*--- cor da fonte do botão reply--- */
text-align:center;
text-decoration:none;
background: #ccc; /*--- cor de fundo do botão reply--- */
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); /*--- cor de fundo gradiente--- */
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );/*--- cor de fundo gradiente--- */
border:1px solid #68439e; /*--- cor da borda do botão reply--- */
height:26px;
line-height:28px;
font-weight:normal;
cursor:pointer;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
text-decoration: none;
background:#fff; /*--- cor de fundo do botão reply houver--- */
border:1px solid #c496cb; /*--- cor da borda do botão reply hover--- */
}
.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-left:40px;}
.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 .icon.blog-author{
background-repeat: no-repeat;
background: #f3f3f3;
height:18px;
display:inline-block;
margin:0 0 -4px 6px;
float:right;
}
.comments .comments-content .datetime a{
font-size:11px;
text-decoration:none; color:#666666; /* -- cor do link da data do comentário -- */
}
.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:3px solid #68439e; /* --- cor da borda do comentário ---*/
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
background-color:#cecece; /*--- cor de fundo--- */
font-size:18px;
border-bottom:1px solid #99969d; /*--- cor da borda --- */
padding:5px;
}
.comment-header a{
color: #f3f3f3; /*--- cor do link nome do autor do comentario --- */
}
.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-left: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("http://i1311.photobucket.com/albums/s668/Cherr-James/autorprofile.png") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow{background:url("http://i1311.photobucket.com/albums/s668/Cherr-James/autorprofile.png") no-repeat scroll 0 0 transparent;
}
.avatar-image-container{
background:url(http://3.bp.blogspot.com/-uyq6qUMgZY4/T9hNk34hREI/AAAAAAAAAK0/l7bMt9LUPTE/s1600/imagem-arrow.png) top right no-repeat; /*--- imagem arrow---*/
float:left
vertical-align:middle;
overflow:hidden;
width:65px !important;
height:51px !important;
max-width:65px !important;
max-height:51px !important}
.comments .avatar-image-container img{
padding:2px;
border:1px solid #ccc;
width:45px !important;
height:45px !important
;max-width:45px !important;
max-height:45px !important;
}


Então gostaram? Espero que sim!!!!

9 comentários:

  1. *u*, eu também estou ansiosa para o meu layout free ficar pronto.Mas pode demorar um pouco amore. Te aviso quando estiver pronto.
    Beijinhos de K-pop

    ResponderExcluir
    Respostas
    1. Hihi, entendo, então esta certo.

      Excluir
  2. Anônimo27/2/13

    Que lindo o modelo, mas ainda gosto mais do primeiro

    ResponderExcluir
  3. homenageia alguns blogs eu acho lindo e bem organizado.
    Wendy Chan você sabe que eu acho o seu blog lindo.
    Então fiz uma pequena homenagem ao blog kawai que você tem ^^
    ~Yuizinha~

    ResponderExcluir
    Respostas
    1. Nya, obrigada *-* Irei lá dar uma olhada.

      Excluir
  4. LEEEEEEEEEEENDO Wendy-chan parabens por sua melhoraa rs >-<

    ResponderExcluir
  5. Ótimo tuto, usarei com certeza no meu próximo layout.
    Junto & Misturado

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram