Inserisci testo o immagini ovunque sul tuo sito con gli pseudo-elementi CSS

[Discourse]

Quindi, vuoi inserire del testo o un’immagine nel tuo sito Discourse.

Per quanto riguarda il testo, nella maggior parte dei casi è sufficiente modificarlo da /admin/customize/site_texts.
A volte, tuttavia, si desidera aggiungere una frase tra due blocchi distinti, anziché modificare uno degli elementi esistenti.

Vediamo come fare utilizzando le proprietà :before e :after in CSS3.

Passaggi di base

1. Per poter lavorare, dovremo usare la console di sviluppo presente nei principali browser. Per aprirla, premi semplicemente F12.

   

2. Seleziona l’elemento in cui, before o after, vuoi aggiungere il testo.

   

   Come puoi vedere, ogni volta che il mouse passa su un elemento, questo viene evidenziato e la classe corrispondente viene selezionata automaticamente nell’HTML e nel CSS a destra. Prima di modificare il foglio di stile di Discourse, esegui un test dal vivo: dopo aver scelto l’elemento su cui operare, fai semplicemente clic sull’icona . Questo aggiungerà una nuova regola al CSS che possiamo modificare secondo le nostre esigenze.

3. Inizia a modificare. Aggiungi il suffisso :before o :after alla classe e aggiungi un testo utilizzando la proprietà content.

   L’aggiunta di un’immagine è un po’ più complicata se non conosci il CSS, ma è buona pratica seguire uno schema simile:

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

   Prima:

   

   E dopo:

   

   Ricorda che il testo apparirà ovunque venga utilizzata la specifica classe che hai selezionato. A volte è necessario specificare su quale elemento si desidera che appaia il nuovo testo, aggiungendo l’elemento genitore al CSS.

4. Personalizzalo. Conoscendo un po’ di CSS, è facile personalizzare lo stile del testo come si desidera.

   

   .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. Una volta soddisfatti, aggiungi le tue modifiche al CSS del tuo sito creando un componente del tema.

---

Proseguiamo con alcuni esempi pratici:

• Titolo del Topic

  Per alcuni siti potrebbe essere utile aggiungere un’immagine, un banner o una pubblicità personalizzata prima o dopo il titolo o di ogni post.

  

  #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 del Topic

  

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

  Oppure dopo:

  

  Basta cambiare .topic-body.clearfix::before in .topic-body.clearfix::after.
  Allo stesso modo, è possibile aggiungere un testo semplice prima o dopo:

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

  
  

• Pulsanti del Post

  
  

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

• Timeline

  

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

• Pulsanti del Footer

  

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

  Nel secondo caso, va notato che il contenuto di :after viene inserito dopo un testo. Se non hai bisogno di personalizzazioni speciali, è consigliabile modificare il testo originale tramite /admin/customize/site_texts anziché modificare il CSS.

• Topic Suggeriti

  

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

• Azioni del Topic

  

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

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

---

Nota: Gli pseudo-elementi generati da ::before e ::after sono contenuti dalla box di formattazione dell’elemento e quindi non si applicano agli elementi sostituiti come <img> o agli elementi <br>. Fonte: ::after CSS pseudo-element - CSS | MDN

In altre parole, questo non funzionerà per gli elementi “auto-chiusi” che non possono avere elementi figlio. È intuitivo pensare che gli pseudo-elementi siano come:

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

quando in realtà è

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

---

Questo documento è controllato dalle versioni - suggerisci modifiche su github.