Text oder Bilder mit CSS-Pseudoelementen überall auf Ihrer Website einfügen

[Discourse]

Also, Sie möchten auf Ihrer Discourse-Website Text oder ein Bild einfügen.

In den meisten Fällen reicht es aus, den Text unter /admin/customize/site_texts zu bearbeiten.
Manchmal ist es jedoch unser Wunsch, einen Satz zwischen zwei verschiedenen Blöcken einzufügen, anstatt eines der vorhandenen Elemente zu ändern.

Lassen Sie uns sehen, wie dies mit den Eigenschaften :before und :after in CSS3 funktioniert.

Grundlegende Schritte

1. Um dies zu tun, benötigen wir die Entwicklerkonsole, die in den gängigen Browsern vorhanden ist. Öffnen Sie sie einfach mit der Taste F12.

   

2. Wählen Sie das Element aus, vor dem oder nach dem (before oder after) Sie Text hinzufügen möchten.

   

   Wie Sie sehen können, wird jedes Element hervorgehoben, über das der Mauszeiger fährt, und die entsprechende Klasse wird automatisch im HTML- und CSS-Bereich rechts ausgewählt. Bevor Sie das Discourse-Stilblatt bearbeiten, führen Sie einen Live-Test durch. Wählen Sie einfach das Element aus, an dem Sie arbeiten möchten, und klicken Sie auf das Symbol. Dadurch wird eine neue Regel zum CSS hinzugefügt, die wir nach unseren Bedürfnissen anpassen können.

3. Beginnen Sie mit der Bearbeitung. Fügen Sie der Klasse das Suffix :before oder :after hinzu und fügen Sie Text mit der Eigenschaft content hinzu.

   Das Hinzufügen eines Bildes ist etwas komplizierter, wenn Sie CSS nicht gut kennen, aber es ist eine gute Praxis, einem ähnlichen Muster zu folgen:

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

   Bevor:

   

   Und danach:

   

   Denken Sie daran, dass der Text dort erscheint, wo die ausgewählte Klasse verwendet wird. Manchmal müssen Sie angeben, auf welchem Element der neue Text erscheinen soll, indem Sie das übergeordnete Element zum CSS hinzufügen.

4. Passen Sie es an. Wenn Sie etwas über CSS wissen, ist es einfach, den Stil des Textes nach Ihren Wünschen anzupassen.

   

   .fancy-title::after {
     content: "NOCH EINER 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. Wenn Sie zufrieden sind, fügen Sie Ihre Änderungen zum CSS Ihrer Website hinzu, indem Sie eine Themenkomponente erstellen.

---

Wir fahren mit einigen praktischen Beispielen fort:

• Thementitel

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

• Themeninhalt

  

  .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:

  

  Ändern Sie einfach .topic-body.clearfix::before zu .topic-body.clearfix::after.
  Auf die gleiche Weise kann ein einfacher Text vor oder nach hinzugefügt werden:

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

  
  

• Beitragsbuttons

  
  

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

• Zeitleiste

  

  .topic-timeline::before {
    color: red;
    content: "Hallo Welt";
  }
  
  .topic-timeline::after {
    color: red;
    content: "Hallo nochmal";
  }
  
  .timeline-scroller-content::before {
    color: violet;
    content: "Hey,";
  }
  
  .timeline-scroller-content::after {
    color: violet;
    content: "Es ist wieder ich!";
  }
  
  .timeline-container .topic-timeline .start-date::before {
    color: goldenrod;
    content: "Startdatum ";
  }
  
  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: " Jetzt Datum";
  }
  

• Fußzeilen-Buttons

  

  #topic-footer-buttons::before {
    content: "DIES SIND FUßZEILEN-BUTTONS";
    color: indianred;
    border: 2px solid;
    padding: 3px;
  }
  
  #topic-footer-buttons::after {
    color: indianred;
    content: "INHALT NACH HIER GEHEN";
    border: 2px solid;
  }
  

  Im letzteren Fall ist zu beachten, dass der Inhalt von :after nach einem Text eingefügt wird. Wenn Sie keine speziellen Anpassungen benötigen, ist es ratsam, den Originaltext ü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;
  }
  

• Themenaktionen

  

  .widget-button.btn-flat.share.no-text.btn-icon::after {
    content: " Teilen";
  }
  
  .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
    content: " Gefällt mir";
  }
  

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

---

Hinweis: Die durch ::before und ::after generierten Pseudo-Elemente sind im Formatierungsrahmen des Elements enthalten und gelten daher nicht für ersetzte 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 ist naheliegend zu denken, dass die Pseudo-Elemente so aussehen:

{::before ist hier}<tag>Textinhalt</tag>{::after ist hier}

während es in Wirklichkeit so ist:

<tag>{::before ist hier}Textinhalt{::after ist hier}</tag>

---

Dieses Dokument ist versioniert – schlagen Sie Änderungen auf GitHub vor.