12/9/16

[Tutorial] Modelo de comentarios #1



Holaa~ tiempo sin publicar, pero bueno ahora tengo esta semana libre asi que tratare de publicar varias cosas, bueno como veran hoy les traigo un tutorial, es un modelo de comentario hecho por mi espero les guste.

VISTA PREVIA



1. Vamo a plantilla > Editar HTML > presionas las teclas CTRL + F > en el recuadro de busqueda pon lo siguiente /* Comments



2. Sustituye todo lo que esta dentro de cuadro rojo por lo siguiente:

*/-----------Recursos Kawaii World-----------\*
.comments{ /* Texto do comentario */
margin-bottom:0;
clear:both;margin-top:10px;
line-height:18px;
font-size:13px; font-family: verdana;
color: #000000;}
.comments .comments-content{
margin-bottom:16px;
font-weight:normal;
text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 5px 3px;
padding:0 2px;
color: #000000;
background: #ffffff;
text-shadow: 1px 1px 0px #000000;
box-shadow: 2px 2px 0px #AEB2FF;
text-align:center;
text-decoration:none;
border-radius:2px;
color: #000000;
background: #8DAFFF;
text-shadow: 1px 1px 0px #CBCBCB;
box-shadow: dashed 0px 0px 5px #ffb2bc;
height:18px;
line-height:18px;
font-weight:normal;
font-family: verdana;
font-size: 10px;
-webkit-transition-duration: .30s;text-decoration:none;
}
#comments h4, /* Letra do XX comentários */
#comments .comment-author a,
#comments .comment-timestamp a {
text-align: center;
font-family: verdana;
font-weight: normal;
font-size: 8px;
color: #696969;
}
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.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 .icon.blog-author{
position:absolute;
top: 8px;
right: 30px;
margin:0;
background-image: url('http://i.imgur.com/7T9WyaT.gif');
width:7px;height:6px
}
.comments .comments-content .datetime a{
font-size:0px;
text-decoration:none; color: tranparent;
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
margin-left:65px;
position:relative;
background:#E5E5E5;
border: 3px double #8E8E8E;
border-radius:1px;
}
.comment-header { /* Area onde fica o nome do autor */
padding: 4px;
font-size:14px;
font-style: normal;
font-weight: normal;
color: #094BFF;
font-family:verdana;
text-transform:uppercase;
background: #9DC3FF;
border:  3px solid  #2B7CFF;
}
.comment-header a{
color: #FFFFFF;
}
.avatar-image-container{ /* avatar do comentario */
float:right;
vertical-align:middle;
overflow:hidden;
width:65px !important;
height:51px !important;
max-width:65px !important;
max-height:51px !important}
.comments .avatar-image-container img{
padding0px;
width:45px !important;
height:45px !important;
;max-width:45px !important;
max-height:45px !important;
border-radius: 0px;
-webkit-transition-duration: .50s;
-webkit-animation-name: flipInX;
border:  3px  double #5D47FF ;
}
.comments .avatar-image-container img:hover{
border-radius: 0px;
-webkit-animation-name: flipInX;
-webkit-animation-duration: .90s;
border-radius: 7px;
border: 3px outset #737373;
}
3. Guardar y listo
Eso es todo, espero les guste,
dudas u otros en los comentarios
o en el chat, bye~

2 comentarios: