Comentários em caixas

Yoo ~~

Oii gente, me desculpem pela demora de posts. Estou para começar uma semana de provas, e meu horário está muito atrapalhado, mas quando eu estiver de férias vai folgar um pouco mais.

Enfim, hoje eu trouxe um tutorial bem útil, que eu achei no blog Uprising Teen que ensina como colocar os comentários dentro de caixinhas. É parecido com o que usamos aqui no BC mas, você depois verão uma certa diferença. Vamos conferir?

1. Primeiro vá em Configurações > Postagens e comentários. Ajuste os comentários para o formato incorporado, depois salve e volte para Modelo > Editar HTML.

2. Agora procure por #comments {. Esse é o código da base dos comentários. Quando achar você vai ter mais ou menos isso:

Agora, na tag destacada da imagem acima exclua isso aqui:

$(comments.background);

E se quiser acrescentar bordas, basta acrescentar:

border: 5px #Códigodacor solid;

Visualize, se estiver tudo certo salve e siga adiante.

3. Agora procure por .avatar-image-container {, que é o código da personalização do avatar do autor.

Após encontrar a tag, exclua os dois códigos abaixo e substitua por:

border-radius: 5px; /*Código do arredondamento*/

border: 3px; /*Código para estilo de borda*/

Salve, e depois procure por /*Comments, agora substitua o código abaixo da tag procurada por:

.comments .comment-block{

margin-left:65px;

position:relative;

background:#FFF8DC; /* COR DE FUNDO DO COMENTÁRIO */

border:3px solid #F08080; /* COR DA BORDA DO COMENTÁRIO */

}

.comment-header{ 

background-color:#FFB6C1;   /* COR DE FUNDO DO NOME DO AUTOR DO COMENTÁRIO */

font-size:16px;

border-bottom:1px solid #F08080;  /* COR DA LINHA DE DIVISÃO (COMENTÁRIO E NOME DO AUTOR) */

padding:5px;

}

.comment-header a{

color: $(link.color); /* COR DO LINK DO AUTOR DO COMENTÁRIO */

}

Personalize do jeito que quiser, tomando cuidado para que as cores ficam harmonizadas e não parecer um carnaval fora de época. Todas as instruções estão no código, espero ter ajudado :)