Insérez du texte ou des images n'importe où sur votre site en utilisant des pseudo-éléments CSS

[Discourse]

Vous souhaitez donc insérer du texte ou une image sur votre site Discourse.

Pour ce qui est du texte, dans la plupart des cas, il suffit de le modifier via /admin/customize/site_texts.
Parfois, cependant, nous souhaitons ajouter une phrase entre deux blocs distincts, plutôt que de modifier l’un des éléments existants.

Voyons comment procéder en utilisant les propriétés :before et :after de CSS3.

Étapes de base

1. Pour travailler, nous devrons utiliser la console de développement présente dans les principaux navigateurs. Pour l’ouvrir, appuyez simplement sur F12.

   

2. Sélectionnez l’élément devant lequel (before) ou derrière lequel (after) vous souhaitez ajouter du texte.

   

   Comme vous pouvez le constater, chaque fois que la souris passe sur un élément, celui-ci est mis en surbrillance et la classe correspondante est automatiquement sélectionnée dans les onglets HTML et CSS à droite. Avant de modifier la feuille de style de Discourse, effectuez un test en direct : une fois l’élément sur lequel vous souhaitez agir sélectionné, cliquez simplement sur l’icône . Cela ajoutera une nouvelle règle au CSS que nous pourrons modifier selon nos besoins.

3. Commencez à éditer. Ajoutez le suffixe :before ou :after à la classe, et ajoutez du texte en utilisant la propriété content.

   Ajouter une image est un peu plus complexe si vous ne maîtrisez pas le CSS, mais il est bon de suivre un modèle similaire :

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

   Avant :

   

   Et après :

   

   N’oubliez pas que le texte apparaîtra partout où la classe spécifique que vous avez sélectionnée est utilisée. Parfois, vous devez préciser sur quel élément le nouveau texte doit apparaître, en ajoutant l’élément parent au CSS.

4. Personnalisez-le. Avec quelques notions de CSS, il est facile de personnaliser le style du texte comme vous le souhaitez.

   

   .fancy-title::after {
     content: "UN AUTRE TEXTE " "\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. Une fois satisfait, ajoutez vos modifications au CSS de votre site en créant un composant de thème.

---

Poursuivons avec quelques exemples pratiques :

• Titre du sujet

  Pour certains sites, il peut être utile d’ajouter une image, une bannière ou une publicité personnalisée avant ou après le titre ou chaque message.

  

  #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: "";
  }
  

• Corps du sujet

  

  .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 après :

  

  Il suffit de remplacer .topic-body.clearfix::before par .topic-body.clearfix::after.
  De la même manière, il est possible d’ajouter du texte brut avant ou après :

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

  
  

• Boutons de message

  
  

  .nav.post-controls .actions::before {
    color: red;
    content: "Bonjour depuis Discourse";
  }
  

• Chronologie

  

  .topic-timeline::before {
    color: red;
    content: "Bonjour le monde";
  }
  
  .topic-timeline::after {
    color: red;
    content: "Bonjour à nouveau";
  }
  
  .timeline-scroller-content::before {
    color: violet;
    content: "Salut,";
  }
  
  .timeline-scroller-content::after {
    color: violet;
    content: "C'est encore moi !";
  }
  
  .timeline-container .topic-timeline .start-date::before {
    color: goldenrod;
    content: "Date de début ";
  }
  
  .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: " Date actuelle";
  }
  

• Boutons de pied de page

  

  #topic-footer-buttons::before {
    content: "CE SONT DES BOUTONS DE PIED DE PAGE";
    color: indianred;
    border: 2px solid;
    padding: 3px;
  }
  
  #topic-footer-buttons::after {
    color: indianred;
    content: "CONTENU À AJOUTER ICI";
    border: 2px solid;
  }
  

  Dans ce dernier cas, il convient de noter que le contenu :after est inséré après du texte. Si vous n’avez pas besoin de personnalisations spéciales, il est préférable de modifier le texte original via /admin/customize/site_texts plutôt que d’éditer le CSS.

• Sujets suggérés

  

  #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;
  }
  

• Actions du sujet

  

  .widget-button.btn-flat.share.no-text.btn-icon::after {
    content: " Partager";
  }
  
  .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
    content: " J'aime";
  }
  

Réf : https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009

---

Note : Les pseudo-éléments générés par ::before et ::after sont contenus dans la boîte de mise en forme de l’élément, et ne s’appliquent donc pas aux éléments remplacés tels que <img>, ni aux éléments <br>. Source : Pseudo-élément CSS ::after - CSS | MDN

Autrement dit, cela ne fonctionnera pas pour les éléments « auto-fermants » qui ne peuvent pas avoir d’enfants. Il est logique de penser que les pseudo-éléments sont placés ainsi :

{::before est ici}<tag>contenu textuel</tag>{::after est ici}

alors qu’en réalité c’est :

<tag>{::before est ici}contenu textuel{::after est ici}</tag>

---

Ce document est versionné - proposez des modifications sur GitHub.