05/07/2017

Modelo para área dos comentários [002]


Hey! Hey! Como estão vocês queridos bunnie's? Hoje venho venho trazer um modelo para comentários rs, percebi que somente postei até hoje dois modelos. Normalmente quando crio um layout faço pequenas modificações no modelo de comentários do anterior, por isso não posto muito os modelos, mas decidi que vou compartilhar-los aqui no blog, mesmo que não sejam lá grande coisa.

 Para começar venho trazer um que utilizei em um layout free, o modelo originalmente foi criado do blog Chuva de HTML, então creditem ao utilizar ok? O modelo fica lindo em layout delicados ou claros. 

~Modelo~

1. Vá até seu html e procure por  <head>, ele fica bem no inicio do HTML em cima dele adicione o seguinte código:
Códigos
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'/>

2. Agora, pela área de comentários, geralmente ela é demarcada com /*comments, ao achar apague toda essa parte e substitua toda a área própria pelo código seguinte:
Códigos
#comments {background: transparent;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 h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #7e999e!important;
text-shadow: 1px 1px 1px #ffffff;
font-family: Short Stack;
font-size: 18px;
text-align: center;
margin-bottom: -13px;
margin-top: 5px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover {
letter-spacing: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#comments a { /* fonte em geral*/
color: #7e999e;
text-align: center;
font-family: Short Stack;
font-size: 13px;
}
.comments .comment-thread.inline-thread { /*enquadramento dos comentários de resposta*/
background: transparent;
}
.comments .continue { /*borda a separar os comentários*/
border-top: 0px solid #cccccc;
}
#comments {
margin-top: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_AajT3Ea07iHOSf5bCo4JpKLPomHJSlwp-IsnNM73K62mXwyD_eNy5IZZCneWaOoqOLHxQSGRjkP_VOfC2TNNQxSrs_utlsN9aWEBInpgmM8oevQfflA4b5quXUCzbxFh9zFhb1EZx4g/s1600/fundoflores2.png) repeat;
padding: 5px;
border-radius: 3px; /* apague a linha se não quiser cantos arreondados, aumente o número se quiser */
}
.comments .comments-content {
margin-bottom: 0px;
font-weight: normal;
text-align: justify;
font-color: #cccccc;
}
.comments .comment .comment-actions a,.comments .comment .continue a { /*fonte do botão reply*/
display: inline-block;
font-family: mui!important;
font-size: 10px!important;
text-align: center;
color: #c7aca7!important;
text-shadow: 1px 1px 1px #fff;
background: rgba(0,0,0,0.03);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.15), 0px 1px 1px rgba(255,255,255,0.35);
margin: 6px 10px 0px 10px;
padding: 2px 3px 2px 3px;
border-bottom: 3px solid #d4c6c3;
opacity: 0.6;
text-decoration: none;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /*fonte do botão reply em hover*/
letter-spacing: 1px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .comment-thread ol { list-style-type:none; padding:0px; text-align:none;}
.comments .comments-content .inline-thread {padding: 0px;}
.comments .comments-content .comment-thread { margin: 8px 0px;}
.comments .comments-content .comment-thread:empty { display: none;}
.comment-replies{ margin-top: 1em; margin-left: 15px; }
.comments .comments-content .comment{ margin-bottom: 0px; padding-bottom: 0px; }
.comments .comments-content .comment:first-child{ padding-top: 16px; }
.comments .comments-content .comment:last-child{ border-bottom:0px; padding-bottom: 0px; }
.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 { /*data do comentário*/
font-size: 10px!important;
float: right;
font-family: muli!important;
text-decoration: none;
color: #fff!important;
text-shadow: 1px 1px 1px #cfaaa3;
margin-top: 3px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .datetime a:hover { /*data do comentário em hover*/
letter-spacing: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-content { margin: 0px 0px 8px; padding: 0px 5px;}
.comments .comment-block { /*caixa do comentário*/
margin-left: 55px;
position: relative;
border-radius: 0px 0px 2px 2px;
background: #ffffff;
box-shadow: 0px 0px 5px #7e999e;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header { /*nome do autor do comentário*/
background: #e6c9c3;
outline-offset: -3px;
outline: 1px dashed #fff;
font-size: 12px;
padding: 5px 5px 5px 8px;
margin-bottom: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header:hover { /*nome do autor em hover*/
background: #ebd8d8;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header a { /*fonte do nome do autor*/
font-family: Short Stack!important;
font-size: 16px!important;
color: #fff!important;
text-shadow: 1px 1px 1px #d6bab4!important;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header a:hover { /*fonte do nome do autor*/
text-shadow: 1px 1px 1px #dec3c5!important;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .owner-actions {position:absolute;right:0;top:0}
.comments .comments-replybox {border:none;height:200px;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.4em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent;
}
.avatar-image-container { /*enquadramento do avatar*/
margin: 5px 0px 5px 5px;
border-radius: 3px;
padding: 5px;
background: #c9d3d4;
box-shadow: inset 0px 0px 3px #abc7cc, 0px 0px 3px #fff;
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img { /*avatar também*/
border-radius: 3px;
box-shadow: 0px 0px 1px #abc7cc;
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.avatar-image-container:hover { /*enquadramento do avatar*/
margin: 5px 0px 5px 5px;
border-radius: 10px;
background: #ebdeda;
box-shadow: inset 0px 0px 3px #d4c6c3, 0px 0px 3px #fff;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img:hover { /*avatar também*/
border-radius: 10px;
box-shadow: 0px 0px 1px #d4c6c3;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Salve e veja o resultado =)
By às =
✶ Postado por: || ✶ tag: ,
✥ Deixe um comentário é bem rapidinho e ainda deixa uma pessoa feliz.
✥ Proibido copiar postagens do Bunny Crazy, rebloge e credite.
✥ Criticas construtivas são bem vindas, mas comentários insultos serão deletados.
✥ No momento não estou fazendo layout sob encomenda, mas vendo modelos pronto, basta acessar aqui. [www]

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)
Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345