Text oder Bilder mit CSS-Pseudoelementen an jeder Stelle deiner Website einfügen

[Discourse]

Du möchtest also Text oder ein Bild in deiner Discourse-Website einfügen.

Im Fall von Text ist es in den meisten Fällen ausreichend, diesen unter /admin/customize/site_texts anzupassen.
Manchmal möchte man jedoch einen Satz zwischen zwei verschiedenen Blöcken einfügen, anstatt eines der vorhandenen Elemente zu ändern.

Schauen wir uns an, wie man dies mit den Eigenschaften :before und :after in CSS3 umsetzt.

Grundlegende Schritte

1. Um zu arbeiten, benötigen wir die Entwickler-Konsole, die in den gängigen Browsern vorhanden ist. Zum Öffnen einfach F12 drücken.

   

2. Wähle das Element aus, bei dem du vor (before) oder nach (after) Text hinzufügen möchtest.

   

   Wie du sehen kannst, wird jedes Element hervorgehoben, wenn die Maus darüber fährt, und die entsprechende Klasse wird automatisch im HTML- und CSS-Bereich rechts ausgewählt. Führe vor dem Bearbeiten des Discourse-Stylesheets einen Live-Test durch. Klicke nach der Auswahl des Elements, an dem du arbeiten möchtest, einfach auf das -Symbol. Dies fügt eine neue Regel zum CSS hinzu, die wir nach unseren Bedürfnissen anpassen können.

3. Beginne mit der Bearbeitung. Füge der Klasse das Suffix :before oder :after hinzu und füge einen Text mit der Eigenschaft content ein.

   Das Einfügen eines Bildes ist etwas komplizierter, wenn man CSS nicht kennt, aber es ist gute Praxis, ein ähnliches Muster zu befolgen:

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

   Vorher:

   

   Und danach:

   

   Denke daran, dass der Text überall dort erscheint, wo die von dir ausgewählte spezifische Klasse verwendet wird. Manchmal musst du angeben, bei welchem Element der neue Text erscheinen soll, indem du das übergeordnete Element zum CSS hinzufügst.

4. Passe es an. Mit etwas CSS-Wissen ist es einfach, den Stil des Textes so anzupassen, wie du möchtest.

   

   .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. Sobald du zufrieden bist, füge deine Änderungen dem CSS deiner Website hinzu, indem du ein Theme-Component erstellst.

---

Wir fahren mit einigen praktischen Beispielen fort:

• Thema-Titel

  Für einige Websites kann es nützlich sein, ein Bild, ein Banner oder eine personalisierte Werbung vor oder nach dem Titel oder jedem Beitrag hinzuzufügen.

  

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

• Thema-Inhalt

  

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

  Oder nach:

  

  Ändere einfach .topic-body.clearfix::before in .topic-body.clearfix::after.
  Auf dieselbe Weise ist es möglich, einen einfachen Text before oder after hinzuzufügen:

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

  
  

• Beitrags-Buttons

  
  

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

• Zeitachse

  

  .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";
  }
  

• Fußzeilen-Buttons

  

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

  Im letzteren Fall ist zu beachten, dass der :after-Inhalt nach einem Text eingefügt wird. Wenn du keine speziellen Anpassungen benötigst, ist es ratsam, den ursprünglichen Text stattdessen über /admin/customize/site_texts zu ändern, anstatt das CSS zu bearbeiten.

• Vorgeschlagene Themen

  

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

• Thema-Aktionen

  

  .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";
  }
  

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

---

Hinweis: Die durch ::before und ::after generierten Pseudoelemente sind im Formatierungsrahmen des Elements enthalten und gelten daher nicht für ersetzbare Elemente wie <img> oder <br>-Elemente. Quelle: ::after CSS pseudo-element - CSS | MDN

Mit anderen Worten, dies funktioniert nicht für „selbstschließende“ Elemente, die keine Kind-Elemente haben können. Es liegt nahe, anzunehmen, dass die Pseudoelemente so aussehen:

{::before is here}<tag>text content</tag>{::after is here}

während es in Wirklichkeit so ist:

<tag>{::before is here}text content{::after is here}</tag>

---

Dieses Dokument wird versioniert - Vorschläge für Änderungen auf github.