Pedindo (novamente) desculpas pela ausência... Tadaima >.<
O que trago desta vez é mais um modelo de comentários, já sei que já trouxe vários, mas acho que desde que consegui editar e criar a base perfeita, adoro criar modelos sempre diferentes, porque mais ninguém os edita tanto quanto eu, nem ninguém usa ribbons, pois é muito trabalhoso. Mas eu gosto. Quem me dera conseguir criar ainda mais, mas não o faço, porque gasta demasiado tempo, e tenho de estar sempre a visualizar o progresso. Enfim, eu criei este modelo para um layout de Hora de Aventura, para modificarem algumas coisas, terão de substituir a url da imagem. Mas é simples, mesmo assim.
#Enjoy!
Prévia:
Tutorial:
Procure por <head> e adicione em cima:
<link href='Muli' rel='stylesheet' type='text/css'/>1. Procure por:
*/ Comments
2. Substitua tudo o que corresponde a essa área pelo código seguinte e edite:
#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: #3b3b3b!important;
text-shadow: 1px 1px 1px #ffffff; /*apague a linha se não quiser sombra*/
font-family: Lobster;
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: #666666;
text-align: center;
font-family: muli;
font-size: 12px;
}
.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 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVcF3M5-lUie21Q74DIu5fa3x1LGLxujXd9cJgC8-04-GlBY7iAfxDAdKAxtjfwcld3DzOA10oCCnhMySlg3BUmwvCTVp6a8uOhLfJmqClFStriQIwbM9WwEa_ykJTMp2Et8RrCTZOixEb/s1600/back.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: outline-block;
margin: 20px 10px 10px 10px;
text-align: center;
text-decoration: none;
border-radius: 2px;
background: #666666;
box-shadow: inset 0px 0px 0px #3b3b3b, 0px 0px 0px #3b3b3b; /*sombra interna e externa. Indico que coloque, na interna, 0px 0px 10px, e na externa, 0px 0px 5px */
padding: 1px 5px 1px 5px;
color: #e6e6e6!important;
text-shadow: 0px 0px 0px #ffffff;
text-decoration: none;
-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;
}
.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: 12px!important;
float: right;
font-family: muli!important;
text-decoration: none;
color: #666666!important;
text-shadow: 1px 1px 1px #ffffff;
margin-top: 3px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime a:hover { /*data do comentário em hover*/
letter-spacing: 2px;
-webkit-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 #666666;
-webkit-transition-duration: .60s;
}
.comment-header { /*nome do autor do comentário*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdlpXkUeLN7-0ssOzgerfcLev0eUlxNqAhfUqS8KuA_tn0eopw92Pi3FJCr7vKDMQhsxR-pNIrqXXsDsQmP8YwEB07CxdGq-sw5H2D9oeMz_0J_4-CmkVUwVKq57JpPDrJDQqlnPMfw7r4/s1600/rib1.PNG) no-repeat;
font-size: 12px;
padding: 5px 5px 5px 40px;
margin-bottom: 2px;
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .60s;
}
.comment-header:hover { /*nome do autor em hover*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgarESAf1wp_U0bwBztMf_A-4YUOTccd3qoPX0gOpUK7_Ub4CovN_Q5iFoigkZFOgMi1DHoJ3_17XlfAkxmCvX1b8mYOWdsTsDGI517fayqqHbVnWcow0nh2bOPKXcpSbEHTRmsakUiRFtz/s1600/rib2.PNG) no-repeat;
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .60s;
}
.comment-header a { /*fonte do nome do autor*/
font-family: Lobster!important;
font-size: 18px!important;
color: #3b3b3b!important;
text-shadow: 1px 1px 1px #ffffff;
-webkit-transition-duration: .50s;
}
.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: 10px -10px 10px 10px;
border-radius: 10px 0px 0px 10px;
padding: 5px;
background: #666666;
box-shadow: inset 0px 0px 0px #3b3b3b, 0px 0px 0px #3b3b3b; /*indico que use a sombra do costume */
max-width: 50px;
max-height: 65px;
min-height: 65px;
min-width: 50px;
}
.comments .avatar-image-container img { /*avatar também*/
border-radius: 10px 0px 0px 10px;
max-width: 50px;
max-height: 65px;
min-height: 65px;
min-width: 50px;
-webkit-animation-name: pisca;
-webkit-transition-duration: .60s;
}
Pronto, era isso. Para mudarem as cores, é fácil, mas podem precisar de mudar a imagem da ribbon e tal. É só pegar o código de lá, está tudo explicadinho.
Sem comentários:
Enviar um comentário