Making custom CSS changes on your site

[Discourse]

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.

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

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

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

   

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:

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

• Documentazione MDN CSS
• Documentazione Chrome DevTools
• Freecodecamp
• Guida per principianti all’uso dei temi Discourse

[bloomexperiment (Tracey)]

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.

Making custom CSS changes on your site

This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…

Posso aggiornarlo una volta che sarà reso un wiki.

[bloomexperiment (Tracey)]

Ok, questo è fatto