#HTML - Cores diferentes no título dos comentários

Annyeong ~ eu não tô bem não, que são esses comebacks destruidores?

Olá, como estão? Espero que bem >///< agora, só pela frase em itálico já deu para ver meu surto então vou surtar mais: AI MEUS DEUSES QUE QUE É ESSE ÁLBUM DO EXO? ALGUÉM ME EXPLICA? SOMEONE CALL THE DOCTOR ESSE ÁLBUM ESTÁ PERFEITO <3 RESGATANDO 'OVERDOSE' AQUI E QUE QUE É ESSE COMEBACK DE MISS A? Ok, parei com o caps antes que me batam aqui -q agora deixem me surtar ainda mais: sério, esse MV do EXO <3 mas é tão triste também, ver um MV sem o Kris, sem o Lu :c é tão triste isso T^T e só assim que resolvem deixar de chamar de K e M e transformar o EXO em 1, mas ainda é tão triste ç3ç aqui é fo12ever <3 mas aí a música é tão boa <33 e no álbum ainda tem El Dorado para destruir um pouco mais, e tem o EXODUS que também amei <3

Falta o surto de Miss A e nem falei do post, mas ok, vou surtar antes u3u AI COMEBACK DE MISS A<3 QUE SAUDADE DESSAS MENINAS, FICAM O ANO PASSADO INTEIRO SEM DAR SINAL DE VIDA u.u SUZY TÃO LINDA ♥ FEI TAMBÉM <3 JIA TAMBÉM <3 MIN TAMBÉM <3 ATÉ HOJE NÃO SEI QUEM É BIAS PORQUE SÃO TÃO PERFEITAS <3 AI, AMEI A MÚSICA GENTE ♥ Esse MV <3 essas roupas rosas ♥ tenho que fazer um post-playlist com os comebacks de março, talvez poste amanhã/sábado >///< ~não tive aula hoje~ Ok, mas faltou falar do post -q Trago um tutorial de HTML, os posts serão marcados com esse "#HTML" é o tutorial que falei sobre como deixar que nem o nosso título de área de comentários >3< Trouxe junto um pedido que explicarei depois.

Ah é, antes faltou mais surtos, eu esquecida >////< ah, e mais uma coisa estou cheia de coisas para falar não pensem que porque estou começando a postar tutoriais que vou deixar de trazer os posts pessoais e os posts de kpopper que não vou não u.u nem que falem para eu trazer só tutoriais, porque amo surtar com vocês <3 E nos posts de tutoriais podem ter certeza que terá sim um conteúdo pessoal. Ah, nos passaram duas tags, mas ainda não tive tempo de responder ~sorry~ e o outro surto: GENTE ACHO QUE NUNCA DISSE AQUI OU DISSE MAS EU GOSTO MUITO DAS MÚSICAS DA NC.A (KPOP) E ELA FEZ COMEBACK, ELA É TÃO FOFA <3 A VOZ DELA É TÃO BONITINHA <3 AH, E TEM OUTRA AINDA MEU DEUS, NÃO VOU PARAR DE FALAR NUNCA CREDO ISSO QUE DÁ NÃO POSTAR SEMPRE EU AMEI A MÚSICA DE DEBUT DE CLC <3 ACHEI ELAS TÃO FOFAS, MAS COM UM CONCEITO NÃO FOFO E NEM SEXY, UM CONCEITO DIFERENTE ♥ E PEPE É UMA MÚSICA TÃO LEGAL, AMEI O GRUPO E FUI VER UNS VÍDEOS DE UNS COVERS QUE ELAS FIZERAM, AMEI ♥ JÁ ATÉ TENHO UMA BIAS E UMA SEGUNDA BIAS u.u É A SEUNGHEE (BIAS) E A YEEUN <3 agora parei com os surtos -q não não parei não porque logo que postei isso vi o MV de MAMAMOO então: AMEI ESSE MV <3 O CONCEITO DELAS <33 NÃO SEI DIREITO OS NOMES, MAS SÃO TÃO DIVAS ♥♥♥ AMO ♥ agora parei -q

Bem, como isso é um tutorial vou colocar algumas considerações antes.

Regras dos tutoriais do blog!

 Sempre que usar um tutorial credite o Lovely Milkshake, não quero saber de ver meus tutoriais sendo usados sem nenhum agradecimento ou link no layout u.u;
 Lembre-se de que os códigos que aqui posto são bases, se quiser pode editar à vontade;
 Não copie códigos do layout do blog para fazer os seus códigos, para editar esses códigos que liberarei, porque se eu perceber isso, pararei de postar tutoriais e se ficar realmente brava até irei deixar os tutoriais em rascunho;

Tutorial: título do comentário com cores diferentes como o do blog

Ficou meio estranho o título, mas o que ensinarei é isso aqui:

E como não quero que fique igual ao do blog, criei alguns modelos para vocês >///< usem, personalizem e creditem. A questão de mudar a mensagem eu fiz a partir deste tutorial aqui do We Heart HTML :3 se quiser mudar, dê uma olhadinha por lá, e faça em seu blog, achei a ideia muito legal <3 mas vamos então ao tutorial ♥

1. Entre no seu blog, e depois Modelo>Editar HTML e dê um Ctrl+f

2. Procure pela tag #comments h4, ela vai estar com uma vírgula depois, como nesse print aqui.

3. Agora substitua todo esse código por esse:

#comments h4 {}

#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}

6. Edite com base em um modelo próprio ou em um dos que colocarei abaixo :3 é bom já personalizar antes de procurar o outro código para não se perder >////<
5. Dê o Ctrl+f e procure o seguinte código: <h4 id='comment-post-message'><data:postCommentMsg/></h4>. Aí, se você quiser onde está o <data:postCommentMsg> é possível mudar para o texto que desejar colocar no "Postar um comentário". E para editar essa parte do título dos comentários, basta adicionar no código <h4 id='comment-post-message'> um style="" que você poderá fazer suas edições, com base no que citarei aqui em baixo :3

Os modelos não apresentam aquele url do blog ali tá?? Só deixei para as imagens estarem marcadas como feitas por mim >3<

Modelo 1: simples, com uma box-shadow branca

1. Substitua o código #comments h4 {} por esse (coloquei uma cor aleatória, no caso azul, pode mudar, é claro):

/*Título da área dos comentários personalizado - por Lovely Milkshake*/
#comments h4 {
  background: #d4e6f7; /*cor de fundo da caixa*/
  border: 1px solid #a9cdef; /*cor da borda da caixa*/
  color: #fff; /*cor do texto*/
  text-shadow: 1px 1px 0 #a9cdef; /*cor da sombra do texto*/
  box-shadow: inset 1px 1px 0 #fff; /*cor da sombra da caixa*/
  font-family: Trebuchet MS; /*fonte do texto*/
  font-size: 12px; /*tamanho da fonte do texto*/
  text-decoration: none; /*se o texto está em negrito, itálico, tachado ou sublinhado*/
  font-weight: none; /*a espessura do traço da fonte*/
  text-transform: uppercase; /*todo o texto em maíusculo, pode retirar se quiser*/
  letter-spacing: 2px; /*espaço entre as letras*/
  padding: 3px 5px; /*acolchoamento da caixa, o primeiro é em relação ao topo e a base, e o segundo em relação à direita e esquerda*/
}

2. Após ter procurado aquele código que está no tópico 5 se por algum acaso você perdeu o lugar em que o código estava e já mudou o texto, procure pelo texto que escreveu e você achará novamente ;), substitua o código <h4 id='comment-post-message'> por esse (novamente, pode mudar à vontade):

ATENÇÃO, VOCÊ PODE ACHAR DOIS CÓDIGOS, MAS O QUE EDITAREMOS É ESSE (PRINT)!!!

<h4 id='comment-post-message' style="background: #f2d0dc; /*cor de fundo da caixa*/  border: 1px solid #e7a8be; /*cor da borda da caixa*/  color: #fff; /*cor do texto*/  text-shadow: 1px 1px 0 #e7a8be; /*cor da sombra do texto*/  box-shadow: inset 1px 1px 0 #fff; /*cor da sombra da caixa*/ margin-top: -15px; /*distância para o outro título, não tire o - ali, e altere o número até o desejado*/">

Modelo 2: com uma outline riscadinha

1. Fiz com as mesmas cores do outro, para ser mais simples. Substitua o código #comments h4 {} por esse:

/*Título da área dos comentários personalizado - por Lovely Milkshake*/
#comments h4 {
  background: #d4e6f7; /*cor de fundo da caixa*/
  border: 1px solid #a9cdef; /*cor da borda da caixa*/
  color: #fff; /*cor do texto*/
  text-shadow: 1px 1px 0 #a9cdef; /*cor da sombra do texto*/
  outline: 1px dashed #a9cdef; /*borda de fora*/
  outline-offset: 2px; /*distância dessa borda*/
  font-family: Trebuchet MS; /*fonte do texto*/
  font-size: 12px; /*tamanho da fonte do texto*/
  text-decoration: none; /*se o texto está em negrito, itálico, tachado ou sublinhado*/
  font-weight: none; /*a espessura do traço da fonte*/
  text-transform: uppercase; /*todo o texto em maíusculo, pode retirar se quiser*/
  letter-spacing: 2px; /*espaço entre as letras*/
  padding: 3px 5px; /*acolchoamento da caixa, o primeiro é em relação ao topo e a base, e o segundo em relação à direita e esquerda*/

}

2. Faça o mesmo que no modelo 1, mas substitua por esse código:

<h4 id='comment-post-message' style='background: #f2d0dc; /*cor de fundo da caixa*/  border: 1px solid #e7a8be; /*cor da borda da caixa*/  color: #fff; /*cor do texto*/  text-shadow: 1px 1px 0 #e7a8be; /*cor da sombra do texto*/ outline: 1px dashed #e7a8be; /*borda de fora*/ outline-offset: 2px; /*distância dessa borda*/  margin-top: -10px; /*distância para o outro título, não tire o - ali, e altere o número até o desejado*/'>

Modelo 3: com uma imagem no fundo

1. Novamente, fiz com as mesmas cores ok? Podem mudar é claro >///< Substitua o código #comments h4 {} por esse (acho que a repetição do bg não deve estar dando muito certo, mas para o título meio que dá, depende da largura >///< ia fazer melhor, mas não deu tempo :c mudem pelo seu bg):

/*Título da área dos comentários personalizado - por Lovely Milkshake*/
#comments h4 {
  background-color: #d4e6f7; /*cor de fundo da caixa*/
  background-image: url('http://static.tumblr.com/5hnnnp2/fpGnm5evd/a.png'); /*imagem de fundo da caixa*/
  background-repeat: repeat; /*se o bg repete ou não*/
  border: 1px solid #a9cdef; /*cor da borda da caixa*/
  color: #fff; /*cor do texto*/
  text-shadow: 1px 1px 0 #a9cdef; /*cor da sombra do texto*/
  font-family: Trebuchet MS; /*fonte do texto*/
  font-size: 12px; /*tamanho da fonte do texto*/
  text-decoration: none; /*se o texto está em negrito, itálico, tachado ou sublinhado*/
  font-weight: none; /*a espessura do traço da fonte*/
  text-transform: uppercase; /*todo o texto em maíusculo, pode retirar se quiser*/
  letter-spacing: 2px; /*espaço entre as letras*/
  padding: 3px 5px; /*acolchoamento da caixa, o primeiro é em relação ao topo e a base, e o segundo em relação à direita e esquerda*/
}

2. Faça o mesmo que no modelo 1, mas substitua por esse código:

<h4 id='comment-post-message' style="background-color: #F2D0DC; /*cor de fundo da caixa*/ background-image: url('http://static.tumblr.com/5hnnnp2/Bzjnm5evi/b.png'); /*imagem de fundo da caixa*/ background-repeat: repeat; /*se o bg repete ou não*/ border: 1px solid #e7a8be; /*cor da borda da caixa*/  color: #fff; /*cor do texto*/  text-shadow: 1px 1px 0 #e7a8be; /*cor da sombra do texto*/  margin-top: -15px; /*distância para o outro título, não tire o - ali, e altere o número até o desejado*/">

Extra: como colocar imagem com background pelo HTML?

A Yuuka me pediu que eu explicasse como colocar imagens no fundo das caixinhas e é claro que eu quis ajudar, e como já planejava trazer esse tutorial e nele coloquei uma caixinha com imagem no bg vou tentar explicar. Só uma dica, tem um site em inglês muito bom que explica os códigos de HTML, tanto que foi lá que aprendi a fazer muitas dessas cosias que uso hoje, é o W3Schools. É só ir na categoria CSS que tem muitas coisas interessantes por lá <3 No caso o que estarei explicando é a categoria de backgrounds, mas de forma resumida, qualquer coisa se quiserem saber mais, é só ir lá :3 Então de certa forma os créditos vão ao W3Schools.

Bem, é até que simples entender isso tudo. O background seria a "categoria mãe" das outras que seriam a cor, a posição, a imagem e a repetição os outros eu acredito que não sejam tão importantes, mas se quiser ver é só ir no site.
 O background-color é a cor de fundo, isso é bom porque se a sua imagem demora um pouco para carregar não fica aquele fundo branco até que carregue e também se a imagem não for repetir será a cor do restante da "caixa". Exemplo: background-color: #cccccc;
 O background-image é a imagem que ficará no fundo. Para usar, você deve escrever da seguinte forma: background-image: url("LINKDASUAIMAGEMAQUI"); ou então com o apóstrofo (') no lugar do aspas ("), mas é importante lembrar que não se deve dar um espaço entre o url e o (, se não o código dá errado >///< Exemplo: background-image: url('http://static.tumblr.com/5hnnnp2/fpGnm5evd/a.png');
 O background-repeat é se haverá repetição ou não. Se quiser que tenha, coloque: background-repeat: repeat; se quiser que não tenha, basta colocar no lugar de repeat, o no-repeat;
 O background-position é onde que o background fica "focalizado" onde a imagem fica na caixa. Nesse layout free que postei (link) eu usei o background com uma flor no canto inferior do post, dá para ver né?? Então, para escolher a posição eu usei a propriedade do background-position. Ele pode ser:
- left: na esquerda, você pode combinar com os códigos top, para deixar no topo, center para deixar no meio (em relação à altura, é claro) e bottom para deixar em baixo;
- right: na direita. Assim como o left, é possível combinar com os códigos topo, center e bottom;
- center: no centro (em relação à horizontal),também pode combinar com os mesmos três códigos;
- Também pode ser por porcentagem, o primeiro simboliza a distância da esquerda e o segundo do topo. Ficaria algo como: background-position: 30% 10%;
- E também pode colocar a distância em pixels, e novamente o primeiro código significa a distância para a esquerda e o segundo para o topo. Exemplo: background-position: 40px 100px;

É meio que isso o básico, espero ter ajudado >////< sempre que tiverem dúvidas, não tenham vergonha, podem perguntar que ficarei feliz em ajudar <3 obrigada Yuuka por perguntar sobre isso ♥

Bem, esse foi o post, nosso primeiro tutorial. O que acharam?? Gostaram?? Acharam bem explicado??? Querem mais tutoriais?? Ficaram com dúvida em alguma coisa?? Podem ficar a vontade para tirar suas dúvidas <33 E se usar, por favor, peço que credite, quando quis fazer isso, não achei o tutorial de personalizar a cor da segunda barrinha em lugar nenhum, portanto EU PENSEI NESSES CÓDIGOS, POR ISSO, POR FAVOR CREDITEM <3 creditar não faz mal a ninguém u.u E é claro que se repostar, coloque os devidos créditos. Obrigada por lerem, boa noite <3

~ai que emoção, Red Velvet ganhando vários prêmios <3~