Ao implementar o
Threaded Comments conforme ensinei aqui ou neste outro método no
blog da Clau, o Mundo Blogger, o código CSS simplesmente desaparece nos templates customizados! Em templates nativos, ele é incorporado normalmente ao CSS do layout. Portanto ele tem que ser incluído no template.
 |
| CSS customizado |
Eis o CSS dos Threaded Comments, conforme já tinha mostrado
neste post. Ele está envolvido em uma tag b:includable, que automaticamente é incluido no layout após a ativação:
<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.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:bold;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
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.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>
Como disse antes, ele simplesmente desaparece nos templates fortemente customizados (como o meu, por exemplo). Devemos então incluir esse CSS antes de
]]></b:skin>. No meu caso, eu simplesmente apaguei o CSS antigo dos comentários e colei ele no lugar, já que não pretendo voltar ao sistema antigo. Implementei algumas customizações, e resolvi um problema que vi nos outros blogs, o fato do ícone do autor não aparecer. Na verdade, eu peguei um blog de teste e coloquei um template novo, onde esse código pura e simplesmente está correto, com todas as variáveis, e acrescentei outras de acordo com o estilo do meu layout.
Eis abaixo como eu fiz as minhas customizações, mas antes de mexer em seu layout, lembre-se:
1 - Faça um backup de seu blog, indo em painel de controle >> Modelo >> clique em Fazer backup/Restaurar, no canto superior direito.
2 - Em Modelo >> clique em Editar HTML >> Prosseguir >> Use control +F para localizar cada linha.
3 - E atenção? Faça essas mudanças por sua conta e risco. Se você não sabe, nem tente. Peça ajuda para quem sabe. OK?
Portanto vamos lá:
/* Comments
----------------------------------------------- */
.comments {
clear: both;
line-height: 1em;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 20px;
text-align: left;
padding: 10px;
background: #ddd;
border: 1px solid $borderColor;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.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:bold;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
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.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
.comments blockquote {
border: 1px solid #cccccc;
color: black;
font: Helvetica;
padding:5px;
background: #ffffff;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
-moz-box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
-webkit-box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
-goog-ms-box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
}
.comments .inline-thread li {
list-style-type: decimal;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
/* Comments end
----------------------------------------------- */
Analisando:
- A parte em laranja é o corpo dos comentários,
.comments, onde eu modifiquei as margens e os paddings de acordo com o estilo que estava no blog. Coloquei cor no fundo(background) e bordas arredondadas (usando CSS3). Caso você não queira modificar nada, deixe como estava no original.
- A parte em vermelho é o que falta na maioria dos blogs, o ícone de autor, que aparece quando o dono ou administrador do blog comenta. Ele deve ser acrescentado em:
.comments .comments-content .icon.blog-author.
Nada deve ser mudado nesta classe, só acrescente a parte vermelha!
- A parte em verde,
.comments blockquote, é uma classe que acrescentei, pois os threaded comments foram construídos para funcionar com o blockquote, e isso é um problema porque pode afetar customizações feitas pelos usuários que usam essa tag. No meu blog, este CSS não afetou essa tag, conforme pode ser visto no post do Crazy Links. Esta classe é o que personaliza os blocos de comentários:
.comments blockquote {
border: 1px solid #cccccc; /* Aqui define uma borda, o tipo e a sua cor */
color: black; /* Aqui define a cor da fonte */
font: Helvetica; /* Aqui define o tipo da fonte */
padding:5px; /* Aqui define o espaçamento, ou a distância do texto à borda */
background: #ffffff; /* Aqui define a cor do fundo */
border-radius: 10px 10px 10px 10px; /* Aqui define o arredondamento da borda, se não quiser, pode apagar esta linha, bem como as três seguintes, pois elas fazem essa regra funcionar em outros navegadores, já que é CSS3, um detalhe, não funciona no IE */
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
box-shadow: 0pt 0pt 5px rgb(0, 0, 204); /* Aqui define uma sombra na borda, se não quiser, pode apagar esta linha, bem como as três seguintes, pois elas fazem essa regra funcionar em outros navegadores, já que é CSS3, um detalhe, não funciona no IE */
-moz-box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
-webkit-box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
-goog-ms-box-shadow: 0pt 0pt 5px rgb(0, 0, 204);
}
.comments .inline-thread li {
list-style-type: decimal; /* Aqui define uma lista numérica */
}
- Para alterar as cores, use
uma tabela como esta.
- Para alterar a fonte, use as próprias variáveis que existem em seu blog, elas são do tipo $textfont, $posttextfont, $sidebartextfont ou similar.
- As medidas em px deve estar de acordo com o layout de seu blog, vá alterando até encontrar a medida certa.
- De novo, se não quiser usar CSS3, arredondamento e sombra das bordas, apague-as. CSS3 não funciona no internet Explorer.
Outras customizações que podem ser feitas:
Os links Responder e Excluir podem ser customizados, com botões e mudanças de cores. É só acrescentar algumas regras CSS nas seguintes linhas:
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
Ainda estou fazendo testes nestes casos. Se bem que prefiro deixar do jeito que está.
Espero que tenham gostado e aceito outras sugestões.
