Making custom CSS changes on your site

:bookmark: Questa guida spiega come apportare modifiche CSS al tuo sito Discourse, inclusa un’introduzione al CSS, dove aggiungere il CSS in Discourse e come trovare i selettori corretti utilizzando gli strumenti di ispezione del browser.

:person_raising_hand: Livello utente richiesto: Amministratore

Riepilogo

Questa guida copre:

  1. Una breve introduzione al CSS e ai concetti chiave
  2. Come aggiungere CSS al tuo sito Discourse utilizzando i componenti del tema
  3. Utilizzo degli strumenti di ispezione del browser per trovare i selettori CSS corretti

Comprensione delle basi del CSS

CSS sta per Cascading Style Sheets. Ecco tre concetti chiave da comprendere:

  1. Struttura: una regola CSS è composta da un selettore, una proprietà e un valore.
p {
  color: red;
}
  • Selettore: p (prende di mira tutti i tag HTML <p>)
  • Proprietà: color
  • Valore: red

  1. Cascade: l’ultima regola applicata ha la precedenza. Ad esempio:
p {
  color: red;
}
p {
  color: green;
}

I paragrafi saranno verdi perché è l’ultima regola applicata.

  1. Specificità: le regole più specifiche sovrascrivono quelle meno specifiche. Ad esempio:
div p {
  color: green;
}
p {
  color: red;
}

I paragrafi all’interno dei div rimarranno verdi perché div p è più specifico di p.

Aggiungere CSS al tuo sito Discourse

Per aggiungere CSS al tuo sito Discourse:

  1. Vai su Aspetto > Temi e componenti dalla barra laterale o segui questo URL per il tuo sito: https://yoursite.com/admin/customize/components

  2. Fai clic su Installa e :heavy_plus_sign: Crea nuovo rispettivamente.

  3. Dai un nome al tuo componente del tema e fai clic su Crea

  4. Scegli a quali temi applicare il componente

  5. Fai clic su Modifica codice

  6. Aggiungi il tuo CSS alla scheda CSS

  7. Fai clic su “Salva” per applicare le modifiche.

:warning: Se hai più temi selezionabili dall’utente, assicurati di aggiungere i tuoi componenti del tema a tutti i temi pertinenti.

Trovare i selettori CSS corretti

Utilizza gli strumenti di ispezione del browser per trovare i selettori CSS corretti:

  1. Fai clic con il pulsante destro del mouse sull’elemento che desideri modificare.

  2. Seleziona “Ispeziona” dal menu contestuale.

  3. Nel pannello degli strumenti per sviluppatori, individua i selettori degli elementi.

  4. Fai clic sui rispettivi selettori e aggiungi la tua regola CSS.

  5. Copia la regola, incollala nella sezione CSS del tuo componente del tema e rimuovi le altre regole.

Per selettori più specifici, potrebbe essere necessario copiare il selettore utilizzato negli stili esistenti di Discourse e modificarlo nel tuo componente del tema.

Ecco un video che dimostra i passaggi precedenti:

:information_source: Se le tue modifiche non vengono applicate, verifica che:

  • Il componente del tema sia abilitato sui tuoi temi.
  • La tua regola CSS sia sufficientemente specifica da sovrascrivere gli stili esistenti.

Risorse aggiuntive

39 Mi Piace

Potrebbe essere reso un wiki? Le informazioni sotto l’intestazione Dove aggiungo il mio CSS? necessitano di un aggiornamento, perché non esiste più il pulsante Modifica CSS/HTML se hai installato un tema esistente — il che è probabile ora se qualcuno ha scelto un tema tramite il più recente Setup Wizard. Ora utilizziamo solo componenti tematici che verranno aggiunti ai temi esistenti.

Posso aggiornarlo una volta che sarà reso un wiki.

9 Mi Piace

Ok, questo è fatto :+1:

5 Mi Piace