Yoo,
vamos ao modelo de comentário kawaii,
espero que vocês gostem, achado no chuva de html
Eu não tenho qualquer assunto para dizer na intro, então estou só a enrolar e a tentar escrever frases longas. Já tinha este tutorial nos rascunhos há séculos, é só um modelinho típico de comentários, que eu achei particularmente kawaii e que nem sei em que layout usei. Espero que gostem ^^
Tutorial
Procure por <head> e adicione em cima:
<link href='http://fonts.googleapis.com/css?family=Muli | Fredericka+The+Great' rel='stylesheet' type='text/css'/>
Agora, procure por: /*comments
Substitua toda a área própria pelo código seguinte:
#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: #76a4b0!important;
text-shadow: 1px 1px 1px #ffffff;
font-family: Muli;
font-size: 22px;
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: #bdbdbd;
text-align: center;
font-family: Fredericka The Great;
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/AVvXsEgmmfYVK8gxv6_jqEwD9CttzRNAUgc1vd5OvYW6GtWDoGPPlFmEdCioTvNKQ1FLyawE_WvHi3aoEHzmpA4tT5xX2JyFqsPGsVNyuM9-WRRMCJctUb7-P9PClVN9Sg0KdkCMu2Tgm9KmD6o/s1600/flor1.png) repeat #ebebeb;
padding: 5px;
border-radius: 0px 0px 3px 3px;
}
.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: muli!important;
font-size: 10px!important;
text-align: center;
color: #e38e88!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 -5px 10px;
padding: 2px 3px 2px 3px;
border-bottom: 5px solid #fad8c8;
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;
border-bottom: 5px solid #f5dcba;
color: #edad5a!important;
-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 #8a8a8a;
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: 1px;
-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;
background: #ffffff;
box-shadow: 0px 0px 5px #7e999e;
border-bottom: 5px solid #86b3ba;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header { /*nome do autor do comentário*/
background: #e8b674;
border: 3px solid #fff;
outline-offset: -3px;
outline: 1px dashed #f5dcba;
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 do comentário*/
background: #f2a399;
outline-offset: -6px;
outline: 1px dashed #fad8c8;
-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: muli!important;
font-size: 17px!important;
color: #fff!important;
text-shadow: 1px 1px 1px #e09f4a!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 0px #db6f6e!important;
color: #fff;
-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 3px 5px 5px;
border-radius: 3px;
background: #fad8c8;
border: 6px dotted #fff;
outline-offset: -3px;
outline: 1px solid #86b3ba;
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*/
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 3px 5px 5px;
border-radius: 5px;
background: #f5dcba;
-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 #707070;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
Nenhum comentário:
Postar um comentário