Come Alva Courses applica il CSS personalizzato
Alva Courses applica il tuo CSS personalizzato due volte. Aggiunge l'intero testo alla pagina del negozio come foglio di stile, esattamente come l'hai scritto. Poi copia ogni regola semplice di primo livello sugli elementi corrispondenti all'interno di #alva-courses come stili inline !important, che prevalgono su quelli del player.
Le regole dentro @media, le regole di hover e degli altri stati, ::before e ::after, e le regole su #alva-courses stesso ricevono solo la copia nel foglio di stile, così come le parti di una lezione disegnate dopo il caricamento, come le schermate dei quiz e un elenco di commenti aggiornato. Lì competono con il foglio di stile del player, che imposta molti stili con !important.
Risolvi passo dopo passo
1. Salva il CSS e ricarica la pagina del negozio
Dopo aver modificato la casella CSS personalizzato, clicca su Salva nella barra di salvataggio. Alva Courses legge il tuo CSS ogni volta che il player del corso si carica, quindi non c'è nulla da pubblicare. Ricarica la pagina del negozio: una pagina già aperta non recepisce la modifica da sola.
L'Anteprima del negozio in quella scheda mostra lo stile del menu mobile, mai il tuo CSS personalizzato.
2. Correggi gli errori di sintassi
Un messaggio rosso sotto la casella, Impossibile analizzare il CSS. Controlla la presenza di errori di sintassi. o uno che inizia con Il CSS potrebbe contenere errori di sintassi, di solito significa che il browser ha scartato alcune regole. Il CSS viene comunque salvato così come l'hai scritto, quindi le regole rotte arrivano al negozio e non fanno nulla.
Cerca una parentesi graffa di chiusura mancante, che può inghiottire tutte le regole successive, e rimuovi gli eventuali tag <style>: la casella accetta CSS semplice. Qui Liquid non funziona, quindi usa URL assoluti per i file dei font.
3. Verifica che il selettore corrisponda
Nel negozio, fai clic con il tasto destro sull'elemento e scegli Ispeziona nel browser. Confronta il suo ID e le sue classi reali con il tuo selettore; il link Guida ai selettori CSS sotto la casella elenca i principali del player.
Una regola mostrata barrata nel pannello Stili ha perso contro un'altra regola: vedi i passaggi 4 e 5. Una regola che non compare affatto non ha trovato corrispondenze. Falla iniziare con #alva-courses e controlla ogni nome di classe.
4. Rafforza le regole dentro @media e negli stati hover
Una regola che riceve solo la copia nel foglio di stile deve superare il foglio di stile del player. Termina ogni dichiarazione con !important e rendi il selettore più specifico della regola del player mostrata in Ispeziona: per esempio #alva-courses .lesson-content p invece di #alva-courses p.
Alcuni stili del player sono impostati sull'elemento stesso con !important, e nessuna regola di un foglio di stile li supera. Sposta quella regola fuori da @media, al primo livello, dove si applica la copia inline. Le schermate dei quiz impostano colori, dimensioni del testo e spaziature su ogni elemento con !important e vengono disegnate dopo l'applicazione della copia inline, quindi di solito il CSS personalizzato non può modificarle. La Guida ai selettori CSS indica anche di non racchiudere le classi del menu mobile in @media.
5. Escludi il CSS del tuo tema
Il player del corso funziona all'interno della pagina del tuo tema, non in un frame separato, quindi i fogli di stile del tema si caricano insieme a esso. Se Ispeziona mostra che vince una regola del tema, rendi il tuo selettore più specifico di quello del tema.
6. Verifica che il tuo CSS raggiunga quella pagina
Il CSS personalizzato raggiunge solo l'elenco dei corsi e le pagine dei corsi nel negozio, non la pagina del profilo studente, la pagina I miei corsi negli account cliente, né i blocchi della pagina di ringraziamento e dello stato dell'ordine.
I pop-up come la finestra di completamento del corso e il visualizzatore di immagini si trovano fuori da #alva-courses, quindi i selettori che iniziano con esso non possono raggiungerli. I video incorporati di YouTube, Vimeo e Loom sono frame separati: il tuo CSS può dimensionare il frame, non ciò che viene riprodotto al suo interno.
7. Carica il font indicato dal tuo CSS
Una regola font-family funziona solo se il font viene caricato. Alva Courses carica automaticamente Montserrat e Poppins quando il tuo CSS li nomina; qualsiasi altro font compare solo se il tuo tema o il dispositivo dello studente lo hanno già. Imposta il font sugli elementi che vuoi modificare, non solo su #alva-courses: il player assegna un proprio font a ogni elemento al suo interno.
Per un altro web font, inserisci una riga @import di Google Fonts proprio all'inizio della casella, oppure aggiungi una regola @font-face con l'URL assoluto del font. Un @import posto sotto qualsiasi altra regola viene ignorato.
Se il problema persiste
Scrivi a courses@alvaapps.com indicando l'indirizzo della pagina del negozio, la regola che non funziona, l'elemento che dovrebbe modificare e l'eventuale messaggio rosso sotto la casella CSS personalizzato. Anche uno screenshot dell'elemento in Ispeziona è utile.
Domande frequenti
Perché il mio CSS funziona su desktop ma non su mobile?
Alva Courses applica le regole dentro @media solo tramite il foglio di stile, dove possono prevalere gli stili !important del player. Aggiungi !important a ogni dichiarazione e usa un selettore più specifico.
Il banner Avvisi sull'ambito dei selettori impedisce al mio CSS di funzionare?
No. Elenca fino a cinque selettori che non iniziano con #alva-courses o con un altro prefisso del player. Quelle regole si applicano comunque, ma possono modificare anche lo stile del tuo tema.
Perché la casella dice che il mio CSS potrebbe contenere errori di sintassi quando sembra corretto?
Il controllo confronta un conteggio approssimativo delle tue regole con ciò che il browser ha analizzato, e un blocco @media che contiene più di una regola può farlo scattare anche su CSS valido. Ispeziona l'elemento nel negozio per averne conferma.
Il CSS personalizzato può modificare lo stile della pagina I miei corsi negli account cliente?
No. Alva Courses applica il CSS personalizzato solo all'elenco dei corsi e alle pagine dei corsi nel negozio. Shopify disegna la pagina I miei corsi e i blocchi della pagina di ringraziamento e dello stato dell'ordine senza di esso.
Vedi anche
È stato utile?
Ultimo aggiornamento 2026-10-12