Inserisci testo o immagini ovunque nel tuo sito usando 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, desideriamo aggiungere una frase tra due blocchi distinti, piuttosto che modificare uno degli elementi esistenti.

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

Passaggi di base

1. Per procedere, dovremo utilizzare la console per sviluppatori presente nei principali browser. Per aprirla, premi semplicemente F12.

   

2. Seleziona l’elemento dove desideri aggiungere il testo, before o after.

   

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

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

   Aggiungere un’immagine è leggermente più complesso se non si conosce il CSS, ma è buona norma seguire un modello 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 classe specifica che hai selezionato. A volte è necessario specificare su quale elemento vuoi che appaia il nuovo testo, aggiungendo l’elemento genitore al CSS.

4. Personalizzalo. Conoscendo un po’ il CSS, è facile personalizzare lo stile del testo come desideri.

   

   .fancy-title::after {
     content: "ALTRO TESTO " "\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 soddisfatto, aggiungi le tue modifiche al CSS del tuo sito creando un componente del tema.

---

Procediamo con alcuni esempi pratici:

• Titolo dell’argomento

  Per alcuni siti può essere utile aggiungere un’immagine, un banner o un annuncio personalizzato prima o dopo il titolo o 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 dell’argomento

  

  .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 dei post

  
  

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

• Cronologia

  

  .topic-timeline::before {
    color: red;
    content: "Ciao mondo";
  }
  
  .topic-timeline::after {
    color: red;
    content: "Ciao di nuovo";
  }
  
  .timeline-scroller-content::before {
    color: violet;
    content: "Ehi,";
  }
  
  .timeline-scroller-content::after {
    color: violet;
    content: "Sono di nuovo io!";
  }
  
  .timeline-container .topic-timeline .start-date::before {
    color: goldenrod;
    content: "Data di inizio ";
  }
  
  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: " Data attuale";
  }
  

• Pulsanti piè di pagina

  

  #topic-footer-buttons::before {
    content: "QUESTI SONO I PULSANTI DEL PIÈ DI PAGINA";
    color: indianred;
    border: 2px solid;
    padding: 3px;
  }
  
  #topic-footer-buttons::after {
    color: indianred;
    content: "CONTENUTO DA INSERIRE DOPO QUI";
    border: 2px solid;
  }
  

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

• Argomenti 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 dell’argomento

  

  .widget-button.btn-flat.share.no-text.btn-icon::after {
    content: " Condividi";
  }
  
  .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
    content: " Mi piace";
  }
  

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

---

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

In altre parole, questo non funzionerà per elementi «autochiusi» che non possono avere elementi figli. È intuitivo pensare che gli elementi pseudosiano come:

{::before è qui}<tag>contenuto testuale</tag>{::after è qui}

mentre in realtà è

<tag>{::before è qui}contenuto testuale{::after è qui}</tag>

---

Questo documento è sotto controllo versione: suggerisci modifiche su GitHub.