Comment Alva Courses applique le CSS personnalisé
Alva Courses applique votre CSS personnalisé deux fois. Il ajoute l'ensemble du texte à la page de la vitrine sous forme de feuille de style, exactement tel que saisi. Il copie ensuite chaque règle simple de premier niveau sur les éléments correspondants à l'intérieur de #alva-courses, sous forme de styles en ligne !important, qui l'emportent sur ceux du lecteur.
Les règles placées dans @media, les règles de survol et autres règles d'état, ::before et ::after, ainsi que les règles portant sur #alva-courses lui-même ne reçoivent que la copie en feuille de style, tout comme les parties d'une leçon dessinées après son chargement, comme les écrans de quiz et une liste de commentaires actualisée. Elles y sont en concurrence avec la feuille de style du lecteur, qui définit de nombreux styles avec !important.
Résoudre le problème étape par étape
1. Enregistrer le CSS et recharger la page de la vitrine
Après avoir modifié la zone CSS personnalisé, cliquez sur Enregistrer dans la barre d'enregistrement. Alva Courses lit votre CSS à chaque chargement du lecteur de cours : il n'y a donc rien à publier. Rechargez la page de la vitrine : une page déjà ouverte ne prend pas la modification en compte d'elle-même.
L'Aperçu de la vitrine de cet onglet montre le style du menu mobile, jamais votre CSS personnalisé.
2. Corriger les erreurs de syntaxe
Un message rouge sous la zone, Le CSS n'a pas pu être analysé. Vérifiez qu'il ne contient pas d'erreurs de syntaxe. ou un message commençant par Le CSS contient peut-être des erreurs de syntaxe, signifie généralement que le navigateur a ignoré certaines règles. Le CSS est tout de même enregistré tel que saisi : les règles cassées atteignent donc votre vitrine et ne font rien.
Cherchez une accolade fermante manquante, qui peut avaler toutes les règles qui la suivent, et retirez toute balise <style> : la zone accepte du CSS brut. Liquid ne fonctionne pas ici, utilisez donc des URL absolues pour les fichiers de police.
3. Vérifier que le sélecteur correspond
Dans votre vitrine, faites un clic droit sur l'élément et choisissez Inspecter dans votre navigateur. Comparez son ID et ses classes réels avec votre sélecteur ; le lien Guide des sélecteurs CSS sous la zone liste les principaux sélecteurs du lecteur.
Une règle affichée barrée dans le panneau Styles a perdu face à une autre règle : voir les étapes 4 et 5. Une règle qui n'apparaît pas du tout ne correspondait pas. Commencez-la par #alva-courses et vérifiez chaque nom de classe.
4. Renforcer les règles dans @media et les états de survol
Une règle qui ne reçoit que la copie en feuille de style doit l'emporter sur la feuille de style du lecteur. Terminez chaque déclaration par !important et rendez le sélecteur plus spécifique que la règle du lecteur affichée dans Inspecter : par exemple #alva-courses .lesson-content p plutôt que #alva-courses p.
Certains styles du lecteur sont définis sur l'élément lui-même avec !important, et aucune règle de feuille de style ne l'emporte sur eux. Sortez cette règle de @media pour la placer au premier niveau, où la copie en ligne s'applique. Les écrans de quiz définissent leurs couleurs, tailles de texte et espacements sur chaque élément avec !important et sont dessinés après l'exécution de la copie en ligne : le CSS personnalisé ne peut donc généralement pas les modifier. Le Guide des sélecteurs CSS indique aussi de ne pas placer les classes du menu mobile dans @media.
5. Écarter le CSS de votre thème
Le lecteur de cours s'exécute dans la page de votre thème, et non dans un cadre séparé : les feuilles de style de votre thème se chargent donc à côté de lui. Si Inspecter montre qu'une règle du thème l'emporte, rendez votre sélecteur plus spécifique que celui du thème.
6. Vérifier que votre CSS atteint cette page
Le CSS personnalisé n'atteint que la liste des cours de la vitrine et les pages de cours, et non la page de profil de l'apprenant, la page Mes cours des comptes clients, ni les blocs de la page de remerciement et du statut de commande.
Les fenêtres contextuelles, comme la fenêtre de fin de cours et la visionneuse d'images, se trouvent en dehors de #alva-courses : les sélecteurs qui commencent par celui-ci ne peuvent donc pas les atteindre. Les vidéos YouTube, Vimeo et Loom intégrées sont des cadres séparés : votre CSS peut dimensionner le cadre, pas ce qui est lu à l'intérieur.
7. Charger la police que nomme votre CSS
Une règle font-family ne fonctionne que si la police se charge. Alva Courses charge automatiquement Montserrat et Poppins lorsque votre CSS les nomme ; toute autre police ne s'affiche que si votre thème ou l'appareil de l'apprenant la possède déjà. Définissez la police sur les éléments que vous voulez modifier, et pas seulement sur #alva-courses : le lecteur attribue sa propre police à chaque élément qu'il contient.
Pour une autre police web, placez une ligne @import Google Fonts tout en haut de la zone, ou ajoutez une règle @font-face avec une URL de police absolue. Un @import placé après une autre règle est ignoré.
Si vous êtes toujours bloqué
Écrivez à courses@alvaapps.com en indiquant l'adresse de la page de la vitrine, la règle qui ne fonctionne pas, l'élément qu'elle devrait modifier et tout message rouge sous la zone CSS personnalisé. Une capture d'écran de l'élément dans Inspecter aide aussi.
Questions fréquentes
Pourquoi mon CSS fonctionne-t-il sur ordinateur mais pas sur mobile ?
Alva Courses n'applique les règles situées dans @media que par la feuille de style, où les propres styles !important du lecteur peuvent l'emporter. Ajoutez !important à chaque déclaration et utilisez un sélecteur plus spécifique.
Le bandeau Avertissements de portée des sélecteurs empêche-t-il mon CSS de fonctionner ?
Non. Il liste jusqu'à cinq sélecteurs qui ne commencent pas par #alva-courses ou par un autre préfixe du lecteur. Ces règles s'appliquent quand même, mais elles peuvent aussi restyliser votre thème.
Pourquoi la zone indique-t-elle que mon CSS contient peut-être des erreurs de syntaxe alors qu'il semble correct ?
La vérification compare un décompte approximatif de vos règles avec ce que le navigateur a analysé, et un bloc @media contenant plus d'une règle peut la déclencher sur du CSS valide. Inspectez l'élément sur votre vitrine pour vous en assurer.
Le CSS personnalisé peut-il styliser la page Mes cours des comptes clients ?
Non. Alva Courses n'applique le CSS personnalisé qu'à la liste des cours de la vitrine et aux pages de cours. Shopify affiche la page Mes cours ainsi que les blocs de la page de remerciement et du statut de commande sans lui.
Voir aussi
Cet article vous a-t-il été utile ?
Dernière mise à jour 2026-10-12