30/07/2017

Modelo para área dos comentários [003]


Uma das coisas que menos tenho aqui no blog são modelos de comentários, pois raramente eu mudo ou crio um modelo, geralmente só mudo as cores e pequenos efeitos e texturas, mas dando continuidade em trazer alguns modelos quais já usei. Hoje venho trazer um criado originalmente por  Chuva de HTML, eu o utilizei no Layout Food.


~Modelo~

1. Vá até seu html e procure por  <head>, ele fica bem no inicio do HTML em cima dele adicione o seguinte código:

Códigos
 <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'/>

2. Agora, pela área de comentários, geralmente ela é demarcada com /*comments, ao achar apague toda essa parte e substitua toda a área própria pelo código seguinte:

Códigos
#comments { /*fundo da área de comentários*/
background: url(https://1.bp.blogspot.com/-k1kSNhpz4t4/W2spF0nC_-I/AAAAAAAAprw/wyLwyAVTcno6DBj8dQnzVPI-HsUUaqd4QCLcBGAs/s1600/forumfundocorcinza20b.png) repeat;
padding: 5px;
}
h4 { /*texto X comentários*/
padding: 5px;
background: #ebe5da;
text-align: center;
font-size: 13px;
outline-offset: -4px;
outline: 1px dashed #c9bead;
}
.comments .comment-block { margin-left: 70px;}
.comments .comments-content .comment-content { /*caixa de comentários*/
margin-top: -5px;
position: relative;
background: #edebc7;
border: 1px solid #ffffff;
padding: 10px;
color: #9c985c;
font-size: 11px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.comments .comments-content .comment-content:hover { /*caixa de comentários*/
background: #f4f5e4;
border-radius: 20px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.comment-header { /*título do autor*/
color: #807569;
padding: 5px;
background-image: url(https://2.bp.blogspot.com/-BFgr8dA0ZNY/W2spPBdAFGI/AAAAAAAApr0/GG8ddllMWQg9TMfAM5acsvKo5GSgf7a1gCLcBGAs/s1600/Have%2BThings.png);
outline-offset: -4px;
outline: 1px solid #fff;
border: 1px solid #b0a496;
}
.comment-header a {
color: #807569 !important;
font-size: 20px;
font-family: Amatic SC;
font-weight: normal;
text-shadow: 1px 1px 1px #fff;
}
.comment-header a:hover {color: #a89d76 !important;}
.comments .comments-content .datetime a {
font-size: 10px !important;
float: right;
line-height: 16px;
font-family: muli;
}
.comments .comment .comment-actions a { /*botões de responder*/
padding-right: 5px;
float: right;
font-size: 14px;
color: #b39794 !important;
font-weight: normal;
text-shadow: 1px 1px 1px #fff;
background: #fff;
padding: 1px 5px 1px 5px;
}
.comments .comment .comment-actions a:hover {
font-style: normal !important;
text-decoration: none;
}
.comments .continue a { /*botão de adicionar comentário*/
font-size: 12px;
color: #cfcc93 !important;
font-weight: normal;
text-shadow: 1px 1px 1px #ffffff;
-moz-text-shadow: 1px 1px 1px #ffffff;
float:left;
padding:3px !important;
margin-right: 10px !important;
}
.comments .continue a:hover {
font-style: normal !important;
color: #c7b0ad !important;
text-decoration: none;
}
.comments .avatar-image-container { /*avatar*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background-image: url(https://2.bp.blogspot.com/-BFgr8dA0ZNY/W2spPBdAFGI/AAAAAAAApr0/GG8ddllMWQg9TMfAM5acsvKo5GSgf7a1gCLcBGAs/s1600/Have%2BThings.png);
padding: 5px;
outline-offset: -3px;
outline: 1px dashed #c9bead;
}
.comments .avatar-image-container img{
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
}
Salve e veja o resultado =)

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345