23.8.17

Modelo para comentários #uvas e laranjas


Sim, eu estou a despachar modelos para comentários antigos. O deste vez pode ser visualizado no meu blog abandonado, Forever Sapo, e é dos modelos mais complexos, embora para vocês não vá fazer diferença - só me deu trabalho a criar porque incluir animações. Chamei-lhe uvas e laranjas porque... as cores predominantes são roxo e laranja >.< Mas sintam-se à vontade para mudar as cores, assim como as fontes. Cá vai:

Prévia: www


Tutorial:

Procure por <head> e abaixo cole:
<link href='http://fonts.googleapis.com/css?family=Delius+Swash+Caps|Muli' rel='stylesheet' type='text/css'/>

Agora, acima de /b:skin insira o seguinte código:
#comments {
margin-top: 30px;
background: url(https://1.bp.blogspot.com/-cvgwPg0YhOs/VzXtvlq9UUI/AAAAAAAAtPE/Vn-XZSEpzlgbnQMQnDT4rW6YVlDtDV-5QCLcB/s1600/010.png) repeat #edcced;
padding: 5px;
border-radius: 10px;
}
#comments .comment-author { padding-top: 1.5em;}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {color: #000000;}
#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: #ca8acf!important;
text-shadow: 1px 1px 1px #fff, 3px 3px 0px #fff;
font-family: Delius Swash Caps;
font-size: 18px;
text-align: center;
-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: #9a6a9e;
text-align: justify;
font-family: Muli;
font-size: 14px;
}
.comments .comment-thread.inline-thread { /*enquadramento dos comentários de resposta*/
background: rgba(255,255,255,0.5);
outline: 1px dashed #fff;
outline-offset: 0px;
}
.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: -8px 0px 0px 36px;
border-radius: 0px 0px 5px 5px;
background: url(https://2.bp.blogspot.com/-Si9sL_xYMtg/VzX4MMIrUII/AAAAAAAAtPk/ZT4foyIMrR8Bjznh1ppXWi7MCFqULp8QACLcB/s1600/navslide2b.png) repeat-Y #fff;
box-shadow: inset -3px 0px 0px #b880bd, inset 3px 0px 0px #b880bd;
padding: 5px 8px 5px 28px;
border-right: 0px solid #ff8b38;
border-left: 0px solid #ff8b38;
color: #9a6a9e;
text-align: justify;
font-family: Muli;
font-size: 14px;
text-shadow: none;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .comment-content:hover { /*caixa de comentário*/
box-shadow: inset -3px 0px 0px #b880bd, inset 3px 0px 0px #b880bd;
background-position: 0px -60px;
border-right: 3px solid #ff8b38;
border-left: 3px solid #ff8b38;
padding: 5px 5px 5px 25px;
color: #db8c53;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content {
margin-bottom: 0px;
font-weight: normal;
text-align: justify;
padding-left: 10px;
}
.comments .comment .comment-actions a,.comments .comment .continue a { /*fonte do botão reply*/
text-align: center;
font-size: 11px!important;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
background: #d39cd9;
box-shadow: inset 0px 0px 1px #c38dc9;
padding: 2px 4px 2px 4px;
text-decoration: none;
margin: 3px 0px 0px 40px;
-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*/
text-shadow: 1px 1px 1px #ffffff;
-webkit-animation: shadow 4s alternate infinite linear;
-moz-animation: shadow 4s alternate infinite linear;
-o-animation: shadow 4s alternate infinite linear;
-ms-animation: shadow 4s alternate infinite linear;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
@keyframes shadow {
0% {box-shadow: inset 0px 30px 0px #ff9d4d; -webkit-transform: rotate(0deg);}
25% {box-shadow: inset 600px 0px 0px #bc78c2; -webkit-transform: rotate(-2deg);}
50% {box-shadow: inset 0px -30px 0px #bc78c2; -webkit-transform: rotate(2deg);}
75% {box-shadow: inset -600px 0px 0px #ff9d4d; -webkit-transform: rotate(-2deg);}
100% {box-shadow: inset 0px 30px 0px #d39cd9; -webkit-transform: rotate(0deg);}
}
.comment-header { /*nome do autor do comentário*/
background: url(https://3.bp.blogspot.com/-B5GqAy5NV_o/VzXwhDPEdmI/AAAAAAAAtPQ/qMvRR_c3CbAwDGpe89CLMWCf34NWfljNgCLcB/s1600/coment1.png) no-repeat;
margin-bottom: 2px;
padding: 2px 5px 5px 5px;
-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: url(https://4.bp.blogspot.com/-yN-l167jhxY/VzXwhLDvPnI/AAAAAAAAtPU/-ZJZxByRepkmoCIwQMCAsM8iRoNweRxfwCLcB/s1600/coment1b.png) no-repeat;
-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: Delius Swash Caps!important;
font-size: 16px!important;
color: #fff!important;
text-shadow: 1px 1px 1px #77377d!important;
padding: 5px 5px 10px 35px;
-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 #d97325!important;
letter-spacing: 1px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .datetime {background: rgba(255,255,255,0.5);}
.comments .comments-content .datetime a { /*data do comentário*/
font-size: 12px!important;
float: right;
font-family: Muli!important;
text-decoration: none;
color: #e3a7eb!important;
text-shadow: 2px 2px 0px #83358f, -2px -2px 0px #83358f, -1px 1px 0px #83358f, 1px -1px 0px #83358f!important;
margin-top: 2px;
-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*/
color: #fff!important;
text-shadow: -2px 2px 0px #f7751e, 2px -2px 0px #f7751e, -1px -1px 0px #f7751e, 1px 1px 0px #f7751e!important;
letter-spacing: 2px;
-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;
}
.avatar-image-container { /*enquadramento do avatar*/
margin: 5px 3px 5px 5px;
border-radius: 3px;
padding: 3px;
background: url(https://2.bp.blogspot.com/-m_FDNXqtjwc/Vu3DLVBghiI/AAAAAAAAs4s/QI_bUlxASHEPQUkoNOCeWSelNJXzAdqOg/s1600/fundo000.png) no-repeat;
box-shadow: inset 0px 0px 3px #707070, 0px 0px 3px #fff;
max-width: 35px;
max-height: 29px;
min-height: 29px;
min-width: 35px;
-webkit-transform: rotate(-35deg);
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img { /*avatar também*/
background: url(https://4.bp.blogspot.com/-6d-nLCBcAUk/Vu3DLbyaSiI/AAAAAAAAs40/6ooLga98dh8kp7BXFjqMiZgXcZhH08MoA/s1600/fundo0000b.png) no-repeat;
-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;
outline: 6px double rgba(250,250,250,0.5);
-webkit-animation: mntd 2s alternate infinite linear;
-moz-animation: mntd 2s alternate infinite linear;
-o-animation: mntd 2s alternate infinite linear;
-ms-animation: mntd 2s alternate infinite linear;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img:hover { /*avatar também*/
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
@-webkit-keyframes mntd {
20% {box-shadow:4px 4px 0px #c76fba, -4px -4px 0px #ff9447;}
40% {box-shadow:-4px 4px 0px #c76fba, 4px -4px 0px #ff9447;}
60% {box-shadow:-4px -4px 0px #c76fba, 4px 4px 0px #ff9447;}
80% {box-shadow:4px -4px 0px #c76fba, -4px 4px 0px #ff9447;}
100% {box-shadow:4px 4px 0px #c76fba, -4px -4px 0px #ff9447;}
}
Voilá ^^

2 comentários: