Wie Alva Courses benutzerdefiniertes CSS anwendet
Alva Courses wendet Ihr benutzerdefiniertes CSS zweimal an. Zuerst fügt es den gesamten Text genau so, wie Sie ihn eingegeben haben, als Stylesheet in die Storefront-Seite ein. Dann kopiert es jede einfache Regel der obersten Ebene als Inline-Stil mit !important auf die passenden Elemente innerhalb von #alva-courses; diese Stile haben Vorrang vor den eigenen Stilen des Players.
Regeln innerhalb von @media, Hover- und andere Zustandsregeln, ::before und ::after sowie Regeln für #alva-courses selbst erhalten nur die Stylesheet-Kopie, ebenso Teile einer Lektion, die erst nach dem Laden gezeichnet werden, etwa Quiz-Bildschirme und eine aktualisierte Kommentarliste. Dort konkurrieren sie mit dem Stylesheet des Players, das viele Stile mit !important setzt.
Schritt-für-Schritt-Behebung
1. Das CSS speichern und die Storefront-Seite neu laden
Klicken Sie nach dem Bearbeiten des Felds Benutzerdefiniertes CSS in der Speicherleiste auf Speichern. Alva Courses liest Ihr CSS bei jedem Laden des Kursplayers, es gibt also nichts zu veröffentlichen. Laden Sie die Storefront-Seite neu: Eine bereits geöffnete Seite übernimmt die Änderung nicht von selbst.
Die Storefront-Vorschau in diesem Tab zeigt den Stil des mobilen Menüs, nie Ihr benutzerdefiniertes CSS.
2. Syntaxfehler beheben
Eine rote Meldung unter dem Feld, Das CSS konnte nicht verarbeitet werden. Prüfen Sie es auf Syntaxfehler. oder eine, die mit Das CSS enthält möglicherweise Syntaxfehler beginnt, bedeutet meist, dass der Browser einige Regeln verworfen hat. Das CSS wird trotzdem so gespeichert, wie Sie es eingegeben haben, daher erreichen die fehlerhaften Regeln Ihr Storefront und bewirken nichts.
Suchen Sie nach einer fehlenden schließenden geschweiften Klammer, die alle nachfolgenden Regeln verschlucken kann, und entfernen Sie alle <style>-Tags: Das Feld erwartet reines CSS. Liquid funktioniert hier nicht, verwenden Sie für Schriftdateien also absolute URLs.
3. Prüfen, ob der Selektor passt
Klicken Sie in Ihrem Storefront mit der rechten Maustaste auf das Element und wählen Sie in Ihrem Browser „Untersuchen“. Vergleichen Sie seine tatsächliche ID und seine Klassen mit Ihrem Selektor; der Link CSS-Selektor-Leitfaden unter dem Feld listet die wichtigsten Selektoren des Players auf.
Eine Regel, die im Bereich „Stile“ durchgestrichen angezeigt wird, hat gegen eine andere Regel verloren: siehe Schritte 4 und 5. Eine Regel, die gar nicht angezeigt wird, hat nicht gepasst. Beginnen Sie sie mit #alva-courses und prüfen Sie jeden Klassennamen.
4. Regeln in @media und Hover-Zuständen verstärken
Eine Regel, die nur die Stylesheet-Kopie erhält, muss das Stylesheet des Players übertrumpfen. Beenden Sie jede Deklaration mit !important und machen Sie den Selektor spezifischer als die in „Untersuchen“ angezeigte Regel des Players, zum Beispiel #alva-courses .lesson-content p statt #alva-courses p.
Manche Player-Stile sind direkt am Element mit !important gesetzt, und keine Stylesheet-Regel kommt dagegen an. Verschieben Sie diese Regel aus @media auf die oberste Ebene, wo die Inline-Kopie greift. Quiz-Bildschirme setzen ihre Farben, Textgrößen und Abstände an jedem Element mit !important und werden erst gezeichnet, nachdem die Inline-Kopie gelaufen ist, daher kann benutzerdefiniertes CSS diese meist nicht ändern. Der CSS-Selektor-Leitfaden rät außerdem davon ab, die Klassen des mobilen Menüs in @media einzuschließen.
5. Das CSS Ihres Themes ausschließen
Der Kursplayer läuft innerhalb der Seite Ihres Themes, nicht in einem separaten Frame, daher werden die Stylesheets Ihres Themes mitgeladen. Zeigt „Untersuchen“, dass eine Theme-Regel gewinnt, machen Sie Ihren Selektor spezifischer als den des Themes.
6. Prüfen, ob Ihr CSS diese Seite erreicht
Benutzerdefiniertes CSS erreicht nur die Kursliste und die Kursseiten im Storefront, nicht die Teilnehmer-Profilseite, die Seite „Meine Kurse“ in Kundenkonten oder die Danke- und Bestellstatus-Blöcke.
Pop-ups wie das Fenster zum Kursabschluss und der Bildbetrachter liegen außerhalb von #alva-courses, daher können Selektoren, die damit beginnen, sie nicht erreichen. Eingebettete YouTube-, Vimeo- und Loom-Videos sind separate Frames: Ihr CSS kann die Größe des Frames festlegen, nicht aber das, was darin abgespielt wird.
7. Die Schriftart laden, die Ihr CSS nennt
Eine font-family-Regel funktioniert nur, wenn die Schriftart geladen wird. Alva Courses lädt Montserrat und Poppins automatisch, wenn Ihr CSS sie nennt; jede andere Schriftart erscheint nur, wenn Ihr Theme oder das Gerät des Teilnehmers sie bereits hat. Legen Sie die Schriftart für die Elemente fest, die Sie ändern möchten, nicht nur für #alva-courses: Der Player gibt jedem Element darin eine eigene Schriftart.
Für eine andere Webschrift setzen Sie ganz oben in das Feld eine Google-Fonts-@import-Zeile oder fügen eine @font-face-Regel mit einer absoluten Schrift-URL hinzu. Ein @import unterhalb einer anderen Regel wird ignoriert.
Wenn Sie immer noch nicht weiterkommen
Schreiben Sie an courses@alvaapps.com und nennen Sie die Adresse der Storefront-Seite, die Regel, die nicht funktioniert, das Element, das sie ändern soll, und eine eventuelle rote Meldung unter dem Feld Benutzerdefiniertes CSS. Ein Screenshot des Elements in „Untersuchen“ hilft ebenfalls.
Häufige Fragen
Warum funktioniert mein CSS auf dem Desktop, aber nicht auf dem Smartphone?
Alva Courses wendet Regeln innerhalb von @media nur über das Stylesheet an, wo die eigenen !important-Stile des Players gewinnen können. Ergänzen Sie jede Deklaration um !important und verwenden Sie einen spezifischeren Selektor.
Verhindert das Banner „Warnungen zum Selektor-Geltungsbereich“, dass mein CSS funktioniert?
Nein. Es listet bis zu fünf Selektoren auf, die nicht mit #alva-courses oder einem anderen Player-Präfix beginnen. Diese Regeln gelten trotzdem, können aber auch Ihr Theme umgestalten.
Warum meldet das Feld, mein CSS enthalte möglicherweise Syntaxfehler, obwohl es korrekt aussieht?
Die Prüfung vergleicht eine grobe Zählung Ihrer Regeln mit dem, was der Browser verarbeitet hat, und ein @media-Block mit mehr als einer Regel kann sie auch bei gültigem CSS auslösen. Untersuchen Sie das Element in Ihrem Storefront, um sicherzugehen.
Kann benutzerdefiniertes CSS die Seite „Meine Kurse“ in Kundenkonten gestalten?
Nein. Alva Courses wendet benutzerdefiniertes CSS nur auf die Kursliste und die Kursseiten im Storefront an. Shopify stellt die Seite „Meine Kurse“ sowie die Danke- und Bestellstatus-Blöcke ohne es dar.
Siehe auch
War das hilfreich?
Zuletzt aktualisiert 2026-10-12