Ohayou! Não se livraram de mim ainda, pelo contrário, agora finalmente estou de férias e, se possível, trarei um tutorial por dia, já que não é algo que demore tanto assim. Neste momento trago um modelo para a área de comentários que já usei num layout, disponibilizado no meu portfólio {Blue design}. O modelo é simples, mas bonitinho, delicado, e acho que combinaria na perfeição com layouts assim. Como sempre, sintam-se livres para mudar as cores.
Prévia:
Tutorial
Procure por <head> e adicione em cima:<link href='Muli' 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: #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/AVvXsEhHdVJJFhbWseuN3H4n0HlhLxfSisUsWzxuXzdkhg_qjF2z8R6bSwj5-wyisEYsxsQu_WDW2m5Gd8fIZLZs6n-BDtx1IP9SVwu3uDOvPi4LvhM2wMS8N2c4B6BHiJtATcuo9fiquLB6dI9I/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;
}
Simples e todo explicadinho, portanto não tenham receio de editar.
acho que vou usar, obrigada Any ^^
ResponderEliminarEste comentário foi removido pelo autor.
ResponderEliminarSimplesmente lindo, vou usar e personalizar no meu blog http://www.vihpaula.com/
ResponderEliminar