Aangepaste CSS wordt niet toegepast in de cursusplayer

Stap voor stap oplossen

1. Sla de CSS op en laad de storefrontpagina opnieuw

Klik na het bewerken van het vak Aangepaste CSS op Opslaan in de opslaanbalk. Alva Courses leest je CSS elke keer dat de cursusplayer laadt, dus er hoeft niets te worden gepubliceerd. Laad de storefrontpagina opnieuw: een pagina die al openstond, pikt de wijziging niet vanzelf op.

Het Voorbeeld van winkel op dat tabblad toont de stijl van het mobiele menu, nooit je aangepaste CSS.

2. Herstel syntaxisfouten

Een rode melding onder het vak, De CSS kon niet worden verwerkt. Controleer op syntaxisfouten. of een melding die begint met De CSS bevat mogelijk syntaxisfouten, betekent meestal dat de browser een aantal regels heeft laten vallen. De CSS wordt toch opgeslagen zoals getypt, dus de kapotte regels bereiken je storefront en doen niets.

Zoek naar een ontbrekende sluitaccolade, die elke regel erna kan opslokken, en verwijder eventuele <style>-tags: het vak verwacht gewone CSS. Liquid werkt hier niet, dus gebruik absolute URL's voor lettertypebestanden.

3. Controleer of de selector overeenkomt

Klik in je storefront met de rechtermuisknop op het element en kies Inspecteren in je browser. Vergelijk de echte ID en klassen met je selector; de link CSS-selectorgids onder het vak toont de belangrijkste selectors van de player.

Een regel die doorgestreept staat in het paneel Stijlen, heeft verloren van een andere regel: zie stap 4 en 5. Een regel die er helemaal niet staat, kwam niet overeen. Laat hem beginnen met #alva-courses en controleer elke klassenaam.

4. Versterk regels binnen @media en hover-statussen

Een regel die alleen de stylesheetversie krijgt, moet de stylesheet van de player overtreffen. Sluit elke declaratie af met !important en maak de selector specifieker dan de regel van de player die je bij Inspecteren ziet: bijvoorbeeld #alva-courses .lesson-content p in plaats van #alva-courses p.

Sommige stijlen van de player staan met !important op het element zelf, en geen enkele stylesheetregel wint daarvan. Verplaats die regel uit @media naar het hoogste niveau, waar de inline kopie wordt toegepast. Quizschermen stellen hun kleuren, tekstgroottes en afstanden met !important op elk element in en worden getekend nadat de inline kopie is uitgevoerd, dus aangepaste CSS kan die meestal niet wijzigen. De CSS-selectorgids zegt ook dat je de klassen van het mobiele menu niet in @media moet zetten.

5. Sluit de CSS van je thema uit

De cursusplayer draait binnen de pagina van je thema, niet in een apart frame, dus de stylesheets van je thema laden ernaast. Laat Inspecteren zien dat een themaregel wint, maak je selector dan specifieker dan die van het thema.

6. Controleer of je CSS die pagina bereikt

Aangepaste CSS bereikt alleen de cursuslijst en de cursuspagina's in de storefront, niet de profielpagina van de student, de pagina Mijn cursussen in klantaccounts of de blokken op de bedank- en bestelstatuspagina.

Pop-ups zoals het venster bij het afronden van een cursus en de afbeeldingsviewer staan buiten #alva-courses, dus selectors die daarmee beginnen, kunnen ze niet bereiken. Ingesloten video's van YouTube, Vimeo en Loom zijn aparte frames: je CSS kan het formaat van het frame bepalen, niet wat erin afspeelt.

7. Laad het lettertype dat je CSS noemt

Een font-family-regel werkt alleen als het lettertype laadt. Alva Courses laadt Montserrat en Poppins automatisch als je CSS ze noemt; elk ander lettertype verschijnt alleen als je thema of het apparaat van de student het al heeft. Stel het lettertype in op de elementen die je wilt wijzigen, niet alleen op #alva-courses: de player geeft elk element daarbinnen een eigen lettertype.

Zet voor een ander weblettertype een Google Fonts-regel met @import helemaal bovenaan het vak, of voeg een @font-face-regel met een absolute URL naar het lettertype toe. Een @import onder een andere regel wordt genegeerd.