Insérer du texte ou des images n'importe où sur votre site grâce aux pseudo-éléments CSS

[Discourse]

Alors, vous souhaitez insérer du texte ou une image sur votre site Discourse.

Dans la plupart des cas, il suffit de modifier le texte via /admin/customize/site_texts.
Cependant, il arrive que nous ayons envie d’ajouter une phrase entre deux blocs distincts, plutôt que de modifier l’un des éléments existants.

Voici comment faire en utilisant les propriétés :before et :after en CSS3.

Étapes de base

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

   

2. Sélectionnez l’élément où vous souhaitez ajouter du texte, before ou after.

   

   Comme vous pouvez le voir, à 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 le HTML et le CSS à droite. Avant d’éditer la feuille de style Discourse, effectuez un test en direct : après avoir choisi l’élément sur lequel opérer, cliquez simplement sur l’icône . Cela ajoutera une nouvelle règle au CSS que nous pouvons modifier selon nos besoins.

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

   Ajouter une image est un peu plus compliqué si vous ne connaissez pas le CSS, mais il est bon de suivre un schéma 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 vous souhaitez que le nouveau texte apparaisse en ajoutant l’élément parent au CSS.

4. Personnalisez-le. En connaissant un peu le CSS, il est facile de personnaliser le style du texte comme vous le souhaitez.

   

   .fancy-title::after {
     content: "ANOTHER TEXT " "\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 changer .topic-body.clearfix::before par .topic-body.clearfix::after.
  De la même manière, il est possible d’ajouter un texte simple before ou after :

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

  
  

• Boutons de message

  
  

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

• Chronologie

  

  .topic-timeline::before {
    color: red;
    content: "Hello World";
  }
  
  .topic-timeline::after {
    color: red;
    content: "Hello again";
  }
  
  .timeline-scroller-content::before {
    color: violet;
    content: "Hey,";
  }
  
  .timeline-scroller-content::after {
    color: violet;
    content: "It's me again!";
  }
  
  .timeline-container .topic-timeline .start-date::before {
    color: goldenrod;
    content: "Start Date ";
  }
  
  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: " Now Date";
  }
  

• Boutons de pied de page

  

  #topic-footer-buttons::before {
    content: "THESE ARE FOOTER BUTTONS";
    color: indianred;
    border: 2px solid;
    padding: 3px;
  }
  
  #topic-footer-buttons::after {
    color: indianred;
    content: "CONTENT AFTER GO HERE";
    border: 2px solid;
  }
  

  Dans ce dernier cas, il convient de noter que le contenu :after est inséré après un texte. Si vous n’avez pas besoin de personnalisations spéciales, il est conseillé 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: " Share";
  }
  
  .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
    content: " Like";
  }
  

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 par 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>, ou aux éléments <br>. Source : ::after CSS pseudo-element - CSS | MDN

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

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

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

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

---

Ce document est sous contrôle de version - suggérez des modifications sur github.