Hoe het werkt
Alva Courses stylt de cursusplayer op twee niveaus. Winkelbrede instellingen in Instellingen → Uiterlijk gelden voor alle cursussen. Op het tabblad Instellingen → Uiterlijk van een cursus bepaal je of die de winkelbrede instellingen volgt of een eigen kleur en lettertype gebruikt. Opgeslagen wijzigingen bereiken studenten de volgende keer dat ze een cursuspagina laden of vernieuwen.
| Instelling | Winkelbreed | Per cursus |
|---|---|---|
| Accentkleur | Standaardkleur | Merkkleuren, Geavanceerde kleuraanpassing |
| Lettertype | Standaardlettertype | Default Font |
| Mobiel menu | Stijl mobiel menu | Geen |
| Aangepaste CSS | Aangepaste stijlen | Geen |
Zo breng je de cursusplayer in je huisstijl
1. Stel de standaardkleur in
Open in je Shopify-admin Alva Courses → Instellingen → Uiterlijk. Typ onder Standaardkleur een hexwaarde of klik op Kleur kiezen om er een te kiezen in het venster Color Preview. Klik op Close en daarna op Opslaan in de opslaanbalk.
Een cursus gebruikt deze kleur alleen als Use global color bij die cursus is aangevinkt. Anders houdt de cursus zijn eigen kleur (stap 4).
2. Kies het standaardlettertype
Kies onder Standaardlettertype een Lettertypefamilie: Arial, Courier New, Georgia, Montserrat, Poppins, Times New Roman, Trebuchet MS of Verdana. Montserrat en Poppins worden geladen via Google Fonts; de andere zijn afhankelijk van de lettertypen die op het apparaat van de student staan.
Het lettertype geldt voor elke cursus zonder eigen lettertype en voor cursussen waarbij Use global font is aangevinkt. Systeemstandaard stelt geen winkelbreed lettertype in. Sla op.
3. Kies de stijl van het mobiele menu
Kies onder Stijl mobiel menu hoe studenten op schermen smaller dan 1.024 pixels de lessenlijst openen. Het Voorbeeld van winkel eronder toont je keuze.
- Hamburger (Standaard): een vierkante knop in je accentkleur waarmee de lessenlijst naar binnen schuift.
- Pil (Accentkleur): een afgeronde knop Cursusmenu in je accentkleur, die bovenaan blijft staan terwijl studenten scrollen.
- Kruimelpad-header: een balk over de volle breedte met de huidige sectie en les, waaronder de lessenlijst uitklapt. Blijft ook bovenaan staan.
- Zwevend rechtsonder: een knop Cursusmenu die vast in de rechteronderhoek staat, waar hij kan botsen met chatwidgets.
Sla op. Wil je Cursusmenu anders formuleren, gebruik dan de winkelteksten.
4. Geef één cursus een eigen kleur en lettertype
Open de cursus en ga naar Instellingen → Uiterlijk. Haal onder Merkkleuren het vinkje bij Use global color weg en kies een kleur. Haal onder Default Font het vinkje bij Use global font weg en kies een Font Family. Use global font is grijs tot je een winkelbreed lettertype instelt.
Voor fijnere controle klik je onder Geavanceerde kleuraanpassing op Inschakelen. Er opent een kleureditor waarin je aparte kleuren instelt voor zijbalk, inhoud, knoppen, voortgangsbalk, invoervelden en randen; met Edit Colors open je hem later opnieuw. Inschakelen is niet beschikbaar zolang Use global color is aangevinkt. Sla de cursus op.
Aangepaste CSS toevoegen
Met aangepaste CSS pas je alles aan wat de bovenstaande instellingen niet dekken. Typ in Instellingen → Uiterlijk regels in het vak Aangepaste CSS onder Aangepaste stijlen en sla op. Alva Courses voegt ze toe aan de cursuslijst en elke cursuspagina, waar ze de kleur- en lettertype-instellingen overschrijven.
Alva Courses beperkt je CSS niet tot de player. Het voegt de CSS precies zoals getypt toe aan de storefrontpagina, dus een kale selector zoals h2 verandert ook de stijl van je thema. Begin elke selector met #alva-courses, de root van de player, of met een player-ID zoals #alva-course-sidebar.
Een banner Waarschuwingen over selectorbereik toont maximaal vijf selectors zonder bereik, en het vak markeert CSS die niet te parseren is. Beide zijn alleen waarschuwingen: de CSS wordt opgeslagen zoals getypt en het vak heeft geen lengtelimiet.
Sluit elke declaratie af met !important, want de player stelt veel van zijn eigen stijlen op die manier in. De link CSS-selectorgids onder het vak toont de ID's en klassen die je kunt targeten. Twee veilige voorbeelden:
#alva-courses .lesson-content p { line-height: 1.7 !important; }geeft alinea's in lessen meer regelafstand.#alva-course-sidebar h2 { font-size: 22px !important; }verandert het formaat van de cursustitel bovenaan de zijbalk.
Wil je een lettertype buiten de lijst Lettertypefamilie, zet dan een Google Fonts-regel met @import helemaal bovenaan, of een @font-face-regel met een absolute URL naar het lettertype (Liquid werkt hier niet). Noem het lettertype daarna in een regel met bereik.
Wat cursisten zien
Cursisten zien je accentkleur op de geselecteerde les, de voltooiingsvinkjes, de voortgangsbalk, links naar lessen, de knop Voltooien en doorgaan en het mobiele menu. Je lettertype is zichtbaar bij de cursustitel, de lestitels en de lestekst.
Veelgestelde vragen
Waarom is mijn Standaardkleur niet veranderd bij een cursus?
Een cursus volgt de Standaardkleur alleen als Use global color is aangevinkt op het tabblad Uiterlijk van de cursus. Anders houdt de cursus zijn eigen kleur. Vink het vakje aan, sla de cursus op en laad de cursuspagina opnieuw.
Kan ik aangepaste CSS aan slechts één cursus toevoegen?
Nee. Aangepaste stijlen is één winkelbrede instelling die Alva Courses toevoegt aan de cursuslijst en elke cursuspagina. Wil je één cursus er anders uit laten zien, geef die dan een eigen kleur en lettertype op het tabblad Uiterlijk.
Verandert mijn aangepaste CSS de rest van mijn thema?
Dat kan. Alva Courses voegt je CSS toe aan de storefrontpagina zoals getypt, dus een kale selector zoals h2 verandert ook de koppen van je thema. Begin elke selector met #alva-courses om de CSS binnen de cursusplayer te houden.
Wanneer zien studenten mijn wijzigingen?
Bij hun volgende paginalading. Alva Courses leest je uiterlijkinstellingen telkens als de cursusplayer laadt, dus er hoeft niets te worden gepubliceerd. Een pagina die al openstond houdt de oude look tot hij wordt vernieuwd.
Zie ook
Was dit nuttig?
Laatst bijgewerkt 2026-10-09