Bem, para segundo e último tutorial de hoje, trago ainda um modelo para comentários, este com uma base ligeiramente diferente da que eu normalmente uso para criar os meus modelos de comentários - aqui, o espaço para nome dos autores do comentário fica fora da caixinha e não dentro, e admito que demorei imenso a descobrir como fazê-lo. Usei no layout anterior do FS, o meu blog principal, e tem como modelo o tema galaxy :)
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: url(http://3.bp.blogspot.com/-wiGs3OfcFfc/VRMXCeYrSzI/AAAAAAAAcns/r8jzTFjFyBQ/s1600/galaxy.png) repeat;
padding: 5px;
margin-top: 15px;
border-radius: 3px;
}
#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: #fff!important;
text-shadow: 1px 1px 1px #00175c;
font-family: Short Stack;
font-size: 18px;
text-align: center;
-webkit-transition-duration: .60s;
}
#comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover {
letter-spacing: 2px;
-webkit-transition-duration: .60s;
}
#comments a { /* fonte em geral*/
color: #264191;
text-align: center;
font-family: Muli;
font-size: 10px;
}
.comments .comments-content .icon.blog-author { /*icon que aparece nos comentários do dono do blog*/
position: absolute;
margin: -2px 120px 2px 0px;
background: url(http://i11.photobucket.com/albums/a168/evelynregly/minigifs/minitolaxaum.gif) no-repeat;
width: 20px;
height: 20px
-webkit-transition-duration: .60s;
}
.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 .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 .comment-content { /*caixa de comentário*/
margin: -10px 10px -2px -40px;
border-radius: 0px 0px 2px 2px;
background: #e1e5e8;
box-shadow: inset -3px -3px 0px #c8d5e0;
padding: 5px 5px 8px 5px;
-webkit-transition-duration: .60s;
}
.comments .comments-content {
margin-bottom: 0px;
font-weight: normal;
text-align: justify;
color: #637fab!important;
text-shadow: 1px 1px 1px #b0c3d1;
}
.comments .comment .comment-actions a,.comments .comment .continue a { /*fonte do botão reply*/
text-align: center;
font-size: 8px;
text-decoration: none;
border-radius: 0px 0px 5px 5px;
background: #e7e1e8;
box-shadow: inset 0px 0px 1px #ddcee0;
padding: 3px 6px 3px 6px;
color: #bda5c2!important;
text-shadow: 0px 0px 0px #ffffff;
text-decoration: none;
margin: -3px 10px 0px 0px;
-webkit-transition-duration: .60s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /*fonte do botão reply em hover*/
text-shadow: 1px 1px 1px #ffffff;
-webkit-transition-duration: .60s;
}
.comment-header { /*nome do autor do comentário*/
display: outline-block;
background: transparent;
font-size: 12px;
padding: 5px 5px 5px 10px;
-webkit-transition-duration: .60s;
}
.comment-header:hover { /*nome do autor em hover*/
-webkit-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 #00175c!important;
-webkit-transition-duration: .50s;
}
.comment-header a:hover { /*fonte do nome do autor em hover*/
text-shadow: 1px 1px 1px #b550a9!important;
-webkit-transition-duration: .50s;
}
.comments .comments-content .datetime a { /*data do comentário*/
font-size: 10px!important;
float: right;
font-family: Muli!important;
text-decoration: none;
color: #2254a3!important;
text-shadow: 1px 1px 1px #ffffff, -1px -1px 1px #ffffff, 0px 0px 5px #ffffff!important;
margin-top: 3px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime a:hover { /*data do comentário em hover*/
color: #b550a9!important;
letter-spacing: 2px;
-webkit-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: 0px -30px 0px 8px;
border-radius: 8px 8px 0px 0px;
padding: 4px 5px 4px 4px;
background: #e1e5e8;
max-width: 30px;
max-height: 30px;
min-height: 30px;
min-width: 30px;
}
.comments .avatar-image-container img { /*avatar também*/
border-radius: 8px 8px 0px 0px;
box-shadow: 0px 0px 3px #86a0bd;
max-width: 30px;
max-height: 30px;
min-height: 30px;
min-width: 30px;
-webkit-transition-duration: .60s;
}
Penso que isto dispensa qualquer comentário. Editem como quiserem.
Ah, a área de comentários do projeto de vcs, a leitura fica bem confortável. Gostei!
ResponderEliminarNossa, muito obrigada por postar esse tutorial, vai encaixar perfeitamente em meu blog ^^
ResponderEliminarAdoro blogs de tutoriais como o seu, sou uma nova seguidora sua ;3
Bjinhos
www.blognekokawaii.blogspot.com
Nossa, muito obrigada por postar esse tutorial, vai encaixar perfeitamente em meu blog ^^
ResponderEliminarAdoro blogs de tutoriais como o seu, sou uma nova seguidora sua ;3
Bjinhos
www.blognekokawaii.blogspot.com
Ameeiii, so para avisar eu estou usando um de seus fantásticos layouts, beijooos!
ResponderEliminarhttp://onlypoison1.blogspot.com.br/
Olá. Acabo de usar este código para personalizar os comentários em meu blog Aconchego e descanso! e ame o resultado. Deixei o background transparente por opção.
ResponderEliminarMas acho que a fonte dos links está pequena demais. Já tentei mudar de 8px (acho que esta é parte do código correspondente, acertei?) para 12px, mas não acontece nada.
O maior problema é que todo link adicionado no corpo do comentário também fica minúsculo. Como resolver isso?
Grata, Gisele.
Ah, isso é porque a fonte silkscreen der erro, eu vou trocar o código agora mesmo, depois volte a substituir e vai ver que já ficará maior. Se ainda assim não estiver grande suficiente, pode aumentar manualmente que aí vai resultar :)
EliminarMuito obrigada. Agora ficou perfeito. ;-)
Eliminar