Ci sono molti modi per aggiungere alcuni CSS personalizzati in Oxygen. Anche se operano tutti per il medesimo risultato, il loro scopo è leggermente diverso. Vediamone alcuni:

Aggiunta di proprietà CSS a un elemento

Quando si modifica un elemento, è possibile aggiungere alcune proprietà CSS aggiuntive a quel componente. Seleziona il tuo elemento e vai a Custom CSS:

Il contenuto verrà memorizzato in un nuovo file CSS situato in:

\wp-content\uploads\oxygen\css

I nome assegnati ai file saranno come questo: [postname] - [postid] .css

❗️ Questo file verrà caricato SOLO su questa pagina.

Aggiunta di CSS con un blocco di codice

Puoi scrivere tutto il tuo CSS personalizzato in un blocco di codice.

La posizione del blocco codice non ha importanza se lo usi SOLO per il CSS, perché il CSS verrà aggiunto in un elemento <style> nel piè di pagina.

Ancora una volta, questi CSS verranno applicati solo su questa pagina.

Trovo il metodo di blocco del codice molto conveniente, poiché è più veloce e più facile da accedere.

Aggiunta di proprietà CSS in un foglio di stile

Puoi anche creare alcuni fogli di stile, nel menu Manage/Stylesheets .
Il contenuto verrà archiviato nel file universal.css , situato in:

\wp-content\uploads\oxygen\css

❗️ Non modificare MAI questo file manualmente. È il file predefinito utilizzato da Oxygen per tutti gli stili.

La grande differenza con altri metodi è che questo file viene caricato su ogni pagina del tuo sito . Quindi, se devi modellare il tuo logo, alcuni titoli o alcune classi, puoi farlo in un foglio di stile.

Aggiunta di proprietà CSS nel Customizer

Forse ti sei dimenticato, ma ovvimente è ancora possibile utilizzare il personalizzatore di WordPress per aggiungere il tuo CSS personalizzato.
Vai su Aspetto/Personalizza dal pannello di WordPress, quindi aggiungi il tuo stile nella scheda CSS aggiuntivo:

Il contenuto verrà aggiunto in un elemento <style> appena prima della chiusura </head>. È anche presente in tutto il sito, quindi verrà aggiunto in ogni pagina.

Quale metodo scegliere

Per capire meglio come funziona, ecco un semplice esempio: vuoi avere uno sfondo nero su ogni pagina del tuo sito, eccetto la homepage, dove vuoi uno sfondo rosso.

• Crea un nuovo foglio di stile (o usane uno che hai già creato) e aggiungi:

body { background-color: black }

Ora tutte le tue pagine avranno uno sfondo nero perché il foglio di stile è caricato su ciascuna di esse.

• Modifica la tua home page, aggiungi un blocco codice e nel pannello CSS aggiungi:

body { background-color: red }

La tua home page ora avrà uno sfondo rosso perché il CSS nel blocco codice viene applicato solo a questa pagina.