Insera texto ou imagens em qualquer lugar do seu site usando pseudo-elementos CSS

[Discourse]

Então, você deseja inserir algum texto ou imagem no seu site Discourse.

Em relação ao texto, na maioria dos casos, é suficiente modificá-lo em /admin/customize/site_texts.
No entanto, às vezes, desejamos adicionar uma frase entre dois blocos distintos, em vez de modificar um dos elementos existentes.

Vamos ver como fazer isso usando as propriedades :before e :after no CSS3.

Passos básicos

1. Para trabalhar, precisaremos usar o console de desenvolvedor presente nos principais navegadores. Para abri-lo, basta pressionar F12.

   

2. Selecione o elemento onde você deseja adicionar texto, before ou after.

   

   Como você pode ver, sempre que o mouse passar sobre um elemento, ele será destacado e a classe correspondente será selecionada automaticamente no HTML e no CSS à direita. Antes de editar a folha de estilos do Discourse, faça um teste ao vivo. Assim, após escolher o elemento no qual deseja operar, basta clicar no ícone . Isso adicionará uma nova regra ao CSS que podemos modificar conforme nossas necessidades.

3. Comece a editar. Adicione o sufixo :before ou :after à classe e adicione um texto usando a propriedade content.

   Adicionar uma imagem é um pouco mais complicado se você não conhece CSS, mas é boa prática seguir um padrão semelhante:

   background-image: url("url-goes-here");
   background-repeat: no-repeat;
   background-size: your-value;
   content: "";
   width: your-value;
   height: your-value;
   display: inline-block;
   

   Antes:

   

   E depois:

   

   Lembre-se de que o texto aparecerá sempre que a classe específica que você selecionou for usada. Às vezes, você precisa especificar em qual elemento deseja que o novo texto apareça, adicionando o elemento pai ao CSS.

4. Personalize-o. Sabendo um pouco sobre CSS, é fácil personalizar o estilo do texto conforme desejar.

   

   .fancy-title::after {
     content: "OUTRO TEXTO " "\f072";
     color: violet;
     font-family: Fontawesome;
     background: linear-gradient(to right, #7ce5df 27%, #f1da36 100%);
     font-size: 18px;
     padding: 2px 4px;
     border: 1px solid;
   }
   

5. Uma vez satisfeito, adicione suas alterações ao CSS do seu site criando um componente de tema.

---

Vamos prosseguir com alguns exemplos práticos:

• Título do Tópico

  Para alguns sites, pode ser útil adicionar uma imagem, um banner ou um anúncio personalizado antes ou depois do título ou de cada postagem.

  

  #topic-title::before {
    background-image: url(your-URL-here);
    background-repeat: no-repeat;
    background-size: 750px 335px;
    width: 750px;
    height: 335px;
    display: inline-block;
    content: "";
  }
  
  #topic-title::after {
    background-image: url(your-URL-here);
    background-repeat: no-repeat;
    background-size: 800px 295px;
    width: 800px;
    height: 295px;
    display: inline-block;
    content: "";
  }
  

• Corpo do Tópico

  

  .topic-body.clearfix::before {
    background-image: url(your-URL-here);
    max-height: 2.8571em;
    width: 690px;
    height: 184px;
    background-size: auto 2.8571em;
    background-repeat: no-repeat;
    margin-left: 11px;
    margin-bottom: 0.25em;
  }
  

  Ou depois:

  

  Basta alterar .topic-body.clearfix::before para .topic-body.clearfix::after.
  Da mesma forma, é possível adicionar um texto simples antes ou depois:

  .topic-body.clearfix::before {
    content: "DISCOURSE É INCRÍVEL!";
    color: red;
    font-weight: bold;
    padding-left: 11px;
  }
  

  
  

• Botões de Postagem

  
  

  .nav.post-controls .actions::before {
    color: red;
    content: "Olá do Discourse";
  }
  

• Linha do Tempo

  

  .topic-timeline::before {
    color: red;
    content: "Olá Mundo";
  }
  
  .topic-timeline::after {
    color: red;
    content: "Olá novamente";
  }
  
  .timeline-scroller-content::before {
    color: violet;
    content: "Ei,";
  }
  
  .timeline-scroller-content::after {
    color: violet;
    content: "Sou eu de novo!";
  }
  
  .timeline-container .topic-timeline .start-date::before {
    color: goldenrod;
    content: "Data de Início ";
  }
  
  timeline-container .topic-timeline .start-date::after {
    color: goldenrod;
    content: " \f060";
    font-family: Fontawesome;
  }
  
  .widget-link.now-date::before {
    content: "\f061 ";
    color: burlywood;
    font-family: Fontawesome;
  }
  
  .widget-link.now-date::after {
    color: burlywood;
    content: " Data Atual";
  }
  

• Botões do Rodapé

  

  #topic-footer-buttons::before {
    content: "ESTES SÃO OS BOTÕES DO RODAPÉ";
    color: indianred;
    border: 2px solid;
    padding: 3px;
  }
  
  #topic-footer-buttons::after {
    color: indianred;
    content: "CONTEÚDO APÓS VEM AQUI";
    border: 2px solid;
  }
  

  No último caso, deve-se notar que o conteúdo :after é inserido após um texto. Se você não precisar de personalizações especiais, é aconselhável alterar o texto original via /admin/customize/site_texts em vez de editar o CSS.

• Tópicos Sugeridos

  

  #suggested-topics::before {
    content: "";
    background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
    width: 690px;
    height: 184px;
    background-size: 690px 184px;
    background-repeat: no-repeat;
    display: inline-block;
  }
  
  #suggested-topics::after {
    content: "";
    background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
    width: 690px;
    height: 184px;
    background-size: 690px 184px;
    background-repeat: no-repeat;
    display: inline-block;
  }
  

• Ações do Tópico

  

  .widget-button.btn-flat.share.no-text.btn-icon::after {
    content: " Compartilhar";
  }
  
  .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
    content: " Curtir";
  }
  

Ref: https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009

---

Nota: Os pseudo-elementos gerados por ::before e ::after estão contidos na caixa de formatação do elemento, e, portanto, não se aplicam a elementos substituídos como <img>, ou a elementos <br>. Fonte: ::after (:after) - CSS | MDN

Em outras palavras, isso não funcionará para elementos „auto-fechados