Para alterar o fundo cinza, vá no editor html do seu template (design → editar html) e procure (aperte Ctrl+F) por comments.background, você deverá encontrar esse trecho:
<Variable name="comments.background" description="Comments Background" type="background"
default="#cccccc none repeat scroll top center" value="#cccccc none repeat scroll top center"/>
Essa
é a variável responsável pelo fundo da área dos comentários. Sendo
assim, por padrão do modelo Viagem os comentários terão um fundo cinza. #cccccc é o código hexadecimal da cor cinza. Compreendida essa parte, vamos às alterações.
Para
substituir o cinza por qualquer outra cor que você quer, basta colocar o
código hexadecimal da cor desejada no lugar do código do cinza. Assim:
<Variable name="comments.background" description="Comments Background" type="background"
default="#FDF5E6 none repeat scroll top center" value="#FDF5E6 none repeat scroll top center"/>
Tem
que colocar o código da cor nos dois locais indicados, caso contrário
não irá funcionar! Se você quiser deixar o fundo da área dos comentários
transparente é só colocar
transparent no lugar do código da cor
cinza. Mas atenção, o fundo transparente só vai funcionar se as suas
postagens estiverem separadas em caixas. Ok?
"Ok Micka, mas eu quero
deixar o fundo dos comentários mais fofinho e colocar um bg muito lindo
que eu encontrei, como eu faço isso?" Fácil, fácil!
No editor html do template, aperte Ctrl+F e procure por
#comments {, você deve encontrar esse trecho:
#comments {
background: $(comments.background);
padding: 15px;
}
Como pode perceber, os comentários tem apenas o fundo
determinado pela variável (comments.background) que é aquele fundo cinza
ou a cor que você colocou na variável. Para colocar um bg é só
substituir
background: $(comments.background); por
background: url (LINK-DO-BG) repeat; deixando o código dessa maneira:
#comments {
background: url (LINK-DO-BG) repeat;
padding: 15px;
}
É só copiar o link do bg que você hospedou em qualquer
site de hospedagem ou que você encontrou em algum blog/tumblr e colar no
local indicado. Depois de fazer a alteração, salve o modelo e visualize
os comentários de alguma postagem no seu blog. O resultado será
esse.
Dá
para deixar a área dos comentários bem fofinha, com alterações simples.
Você pode colocar bordas arredondadas, borda, deixar da sua maneira (
exemplo aqui). Agora que já ensinei o básico, vamos as alterações que fazem toda a diferença. =^.^=
Eu não vou dar um modelo pronto, vou mostrar o que pode personalizar,
como personalizar e o que vocês podem acrescentar pra deixar os
comentários mais bonitinhos. Ok?
• Personalizando o avatar
Aperte Ctrl+F e procure por esse trecho:
.avatar-image-container {
margin: .2em 0 0;
}
Esse é o código responsável pelos avatares das
pessoas que comentam no seu blog. A personalização é livre, você pode
deixar os avatares redondos, com bordas, com fundo colorido, isso fica a
seu critério. Adicione no trecho acima (antes da chave destacada em
negrito) os códigos das personalizações que você quer fazer nos
avatares:
• BORDAS ARREDONDADAS
border-radius:100px; /* tamanho da borda arredondada */
height:60px; /* altura do avatar */
widht:60px; /* largura do avatar*/
Para que os avatares
fiquem redondinhos é necessário que a altura e largura da imagem tenham o
mesmo tamanho, então coloque valores iguais como no código acima. Se
você não quiser que os avatares fiquem tão redondinhos assim, basta
subistituir o valor
100px por 10px, 5px... Você escolhe!
• BORDA & BACKGROUND
border:1px solid #ccc; /* espessura, tipo e cor da borda */
padding:2px; /* espaço entre borda e imagem */
background: #eee; /* cor de fundo da imagem */
Personalize o código como quiser. Eu usei cores neutras, mas foi só pra dar um exemplo. Em
padding:2px; você
vai colocar o valor de acordo com a espessura do background do avatar e
a distância entre borda e o avatar. Se você quiser uma espessura ou
distância maior é só alterar o valor 2px (sugiro 4px ou 6px no máximo).
• CRAZY BORDER COM BACKGROUND
border-radius:10px 25px / 25px 10px; /* arredondamento crazy das bordas */
background: #000; /* cor do background do avatar */
padding:6px; /* espessura do background */
Sugiro que não
altere os valores do border-radius, caso contrário o efeito será
diferente do modelo. Altere a cor do bg, diminua ou aumente o valor de
padding, só não altere o border-radius. Ok?
Agora que já ensinei como personalizar os avatares, vamos personalizar o
corpo dos comentários. Lembram que no início do post ensinei como
retirar o fundo cinza? Pois bem, o fundo cinza é da área dos
comentários, que abriga o nome de quem comentou, a data do comentário e o
avatar. Se as suas postagens forem separadas em caixas e você decidiu
retirar o fundo cinza e deixá-lo transparente, os comentários terão como
fundo o bg do seu template. Entendeu?
Mas o que vamos fazer agora é dar uma cor de fundo para o corpo (texto
do comentário), assim se as suas postagens forem separadas em caixas,
apenas o texto dos seus comentários terão um fundo (como aqui no
Camila's Designs).
• Personalizando o corpo dos comentários
Procure por
#comments .comment-author { e acima disso cole o código seguinte:
.comments .comments-content .comment-content {
margin: 2px 8px; /* margens */
padding: 1px 5px; /* espaços entre texto e margens */
background: #eee; /* cor de fundo */
border: 1px solid #ccc; /* espessura, tipo e cor da borda */
}
O resultado será assim:
No caso eu mantive as postagens juntas e dei uma cor diferente para o
fundo dos comentários. Ficaria super fofinho se você deixasse a cor
branca na área dos comentários e colocasse um tom pastel para o corpo
(fundo do texto) deles. ^^
Agora vamos ao próximo passo que é personalizar o nome de quem comenta.
• Personalizando o nome do autor dos comentários
Procure por
.avatar-image-container { e
acima disso cole o código seguinte:
.comments .comments-content .user, .user a {
color: #000; /* cor do nome do autor do comentário */
font-style: normal; /* deixa a fonte sem itálico */
font-weight: bold; /* deixa fonte em negrito */
text-transform: uppercase; /* transformação do texto */
font-family: Consolas; /* fonte */
font-size:16px; /* tamanho da fonte */
}
Altere tudo o que quiser, coloque fonte personalizada,
altere a cor, coloque borda, enfim. Isso é uma base e fica a seu
critério a modificação dela. Bora para a próxima parte...
• Personalizando os links RESPONDER e EXCLUIR
Procure por
/* Comments e
acima disso você deve colar o código abaixo:
.comments .comment .comment-actions {
display: block;
list-style-type: none;
margin: 3px 0; /* margem entre links e corpo do comentário */
text-align: right; /* deixa os links na direita */
}
.comments .comment .comment-actions a {
color: #000; /* cor dos links */
margin: 7px; /* margem entre um link e outro */
padding: 2px; /* espaço entre os links e as margens */
}
Esse é o código base. Altere de acordo com a
identificação, só altere o que está identificado. Ok? Para colocar um
background de fundo nesses links e dar esse efeito de botão (como aqui
no blog) acrescente
background:#COR; abaixo de
color:#000;. Se quiser colocar bordas arredondadas é só acrescentar
border-radius:5px; abaixo do código do background. Entendido?
Postado por
