Fonctionnement
Alva Courses personnalise le lecteur de cours à deux niveaux. Les réglages globaux de la boutique, dans Paramètres → Apparence, s'appliquent à tous les cours. L'onglet Paramètres → Apparence de chaque cours détermine s'il les suit ou s'il utilise sa propre couleur et sa propre police. Les modifications enregistrées parviennent aux apprenants au prochain chargement ou actualisation d'une page de cours.
| Réglage | Toute la boutique | Par cours |
|---|---|---|
| Couleur d'accentuation | Couleur par défaut | Couleurs de marque, Personnalisation avancée des couleurs |
| Police | Police par défaut | Default Font |
| Menu mobile | Style de menu mobile | Aucun |
| CSS personnalisé | Styles personnalisés | Aucun |
Comment personnaliser le lecteur de cours
1. Définir la couleur par défaut
Dans votre admin Shopify, ouvrez Alva Courses → Paramètres → Apparence. Sous Couleur par défaut, saisissez une valeur hexadécimale ou cliquez sur Choisir une couleur pour en sélectionner une dans la fenêtre Color Preview. Cliquez sur Close, puis sur Enregistrer dans la barre d'enregistrement.
Un cours n'utilise cette couleur que si Use global color est coché pour ce cours. Sinon, il conserve sa propre couleur (étape 4).
2. Choisir la police par défaut
Sous Police par défaut, sélectionnez une Famille de polices : Arial, Courier New, Georgia, Montserrat, Poppins, Times New Roman, Trebuchet MS ou Verdana. Montserrat et Poppins sont chargées depuis Google Fonts ; les autres dépendent des polices installées sur l'appareil de l'apprenant.
La police s'applique à tous les cours qui n'ont pas de police propre, ainsi qu'aux cours pour lesquels Use global font est coché. Police système par défaut ne définit aucune police pour toute la boutique. Enregistrez.
3. Choisir le style du menu mobile
Sous Style de menu mobile, choisissez comment les apprenants ouvrent la liste des leçons sur les écrans de moins de 1 024 pixels de large. L'Aperçu de la vitrine ci-dessous affiche votre choix.
- Hamburger (Par défaut) : un bouton carré à votre couleur d'accentuation qui fait glisser la liste des leçons.
- Pilule (Couleur d'accentuation) : un bouton arrondi Menu du cours à votre couleur d'accentuation, fixé en haut de l'écran pendant le défilement.
- En-tête de fil d'Ariane : une barre pleine largeur indiquant la section et la leçon en cours, sous laquelle la liste des leçons se déroule. Elle aussi reste fixée en haut.
- Flottant en bas à droite : un bouton Menu du cours fixé dans le coin inférieur droit, où il peut entrer en conflit avec les widgets de chat.
Enregistrez. Pour reformuler Menu du cours, utilisez les textes de la boutique.
4. Donner à un cours sa propre couleur et sa propre police
Ouvrez le cours et accédez à Paramètres → Apparence. Sous Couleurs de marque, décochez Use global color et choisissez une couleur. Sous Default Font, décochez Use global font et choisissez une Font Family. Use global font est grisé tant que vous n'avez pas défini de police pour toute la boutique.
Pour un contrôle plus fin, cliquez sur Activer sous Personnalisation avancée des couleurs. Un éditeur de couleurs s'ouvre : vous y définissez séparément les couleurs de la barre latérale, du contenu, des boutons, de la barre de progression, des champs et des bordures ; Edit Colors le rouvre plus tard. Activer est indisponible tant que Use global color est coché. Enregistrez le cours.
Ajouter du CSS personnalisé
Le CSS personnalisé restylise tout ce que les réglages ci-dessus ne couvrent pas. Dans Paramètres → Apparence, saisissez vos règles dans la zone CSS personnalisé sous Styles personnalisés, puis enregistrez. Alva Courses les ajoute à la liste des cours et à chaque page de cours, où elles remplacent les réglages de couleur et de police.
Alva Courses ne limite pas la portée de votre CSS. Il l'ajoute à la page de la vitrine exactement tel que vous l'avez saisi : un sélecteur nu comme h2 restylise donc aussi votre thème. Commencez chaque sélecteur par #alva-courses, la racine du lecteur, ou par un ID du lecteur tel que #alva-course-sidebar.
Un bandeau Avertissements de portée des sélecteurs liste jusqu'à cinq sélecteurs sans portée, et la zone signale le CSS qui ne peut pas être analysé. Il ne s'agit que d'avertissements : le CSS est enregistré tel que saisi, et la zone n'a pas de limite de longueur.
Terminez chaque déclaration par !important, car le lecteur définit lui-même beaucoup de ses styles de cette manière. Le lien Guide des sélecteurs CSS sous la zone liste les ID et les classes que vous pouvez cibler. Deux exemples sûrs :
#alva-courses .lesson-content p { line-height: 1.7 !important; }aère l'interligne des paragraphes de leçon.#alva-course-sidebar h2 { font-size: 22px !important; }redimensionne le titre du cours en haut de la barre latérale.
Pour une police absente de la liste Famille de polices, placez une ligne @import Google Fonts tout en haut, ou une règle @font-face avec une URL de police absolue (Liquid ne fonctionne pas ici). Nommez ensuite la police dans une règle limitée au lecteur.
Ce que voient les apprenants
Les apprenants voient votre couleur d'accentuation sur la leçon sélectionnée, les coches d'achèvement, la barre de progression, les liens des leçons, le bouton Terminer et continuer et le menu mobile. Votre police apparaît sur le titre du cours, les titres des leçons et le texte des leçons.
Questions fréquentes
Pourquoi ma couleur par défaut n'a-t-elle pas changé un cours ?
Un cours ne suit la couleur par défaut que si Use global color est coché dans l'onglet Apparence du cours. Sinon, il conserve sa propre couleur. Cochez la case, enregistrez le cours et rechargez la page du cours.
Puis-je ajouter du CSS personnalisé à un seul cours ?
Non. Styles personnalisés est un réglage unique pour toute la boutique, qu'Alva Courses ajoute à la liste des cours et à chaque page de cours. Pour qu'un cours ait un aspect différent, donnez-lui sa propre couleur et sa propre police dans son onglet Apparence.
Mon CSS personnalisé modifiera-t-il le reste de mon thème ?
C'est possible. Alva Courses ajoute votre CSS à la page de la vitrine tel quel : un sélecteur nu comme h2 restylise donc aussi les titres de votre thème. Commencez chaque sélecteur par #alva-courses pour le limiter au lecteur de cours.
Quand les apprenants voient-ils mes modifications ?
Au prochain chargement de page. Alva Courses lit vos réglages d'apparence à chaque chargement du lecteur de cours, il n'y a donc rien à publier. Une page déjà ouverte garde l'ancien aspect jusqu'à son actualisation.
Voir aussi
Cet article vous a-t-il été utile ?
Dernière mise à jour 2026-10-09