LearnyBox vous permet d'ajouter du code personnalisé pour adapter certains comportements ou l'apparence de vos pages.
Pour éviter les erreurs les plus fréquentes, il est important de placer chaque type de code au bon endroit et de respecter quelques règles de vigilance lors de son intégration.
Même si vous ne développez pas régulièrement, quelques principes simples permettent de réduire les risques de conflit avec vos pages ou avec l'éditeur.
Utiliser le bon emplacement pour chaque type de code
Chaque type de code doit être ajouté dans l'emplacement qui lui est dédié.
Pour accéder aux zones de code CSS et Javascript, ouvrez la page concernée dans l'éditeur de page puis, dans la barre d'administration, cliquez sur Options avancées puis sur Code CSS et Javascript.
HTML
Le bloc HTML doit contenir uniquement du code HTML.
⚠️ Évitez d'y ajouter du CSS ou du Javascript directement, sauf si cela fait partie intégrante d'un composant HTML que vous maîtrisez parfaitement.
CSS
Le code CSS doit être ajouté dans la section dédiée aux styles personnalisés :
Options avancées → Code CSS et Javascript
Cette zone doit contenir uniquement du CSS.
Javascript
Le code Javascript doit être ajouté dans la section dédiée :
Options avancées → Code CSS et Javascript
Il peut être placé en haut ou en bas de page.
Cette zone doit contenir uniquement du Javascript.
Choisir vos sélecteurs avec précaution
Lorsque vous ajoutez du HTML, du CSS ou du Javascript, les sélecteurs utilisés doivent être choisis avec attention.
LearnyBox utilise déjà de nombreux identifiants, classes et éléments pour faire fonctionner les pages et l'éditeur de page.
Si votre code cible un sélecteur déjà utilisé par LearnyBox, vous risquez notamment de :
Modifier involontairement l'affichage de la page
Perturber certains éléments de l'interface
Provoquer des comportements inattendus dans l'éditeur de page
Lorsque cela est possible, privilégiez des classes ou identifiants spécifiques à votre propre personnalisation afin de limiter les risques de conflit.
Il est généralement préférable d'utiliser une classe créée spécialement pour votre personnalisation plutôt qu'un sélecteur très générique susceptible d'être déjà utilisé ailleurs sur la page.
Vérifier les balises HTML et Javascript
Pour le HTML comme pour le Javascript, vérifiez systématiquement que toutes les balises nécessaires sont correctement ouvertes et fermées.
Une balise manquante ou incorrectement fermée peut entraîner :
Un affichage différent de celui attendu
Des éléments qui disparaissent ou du texte brut qui apparait sur la page
Un comportement imprévisible du contenu affiché
Avant d'enregistrer vos modifications, prenez le temps de relire votre code et de vérifier sa structure.
Tenir compte des extensions de navigateur
Certaines extensions installées sur le navigateur de vos visiteurs peuvent bloquer l'exécution de certains scripts Javascript.
Dans ce cas, un comportement qui fonctionne correctement lors de vos tests peut ne pas fonctionner chez certains utilisateurs.
Si vous utilisez du Javascript personnalisé, gardez à l'esprit que son exécution peut dépendre de l'environnement de navigation de chaque visiteur.
Comprendre les limites du support
LearnyBox met à votre disposition les emplacements permettant d'ajouter du code personnalisé.
En revanche, nous ne fournissons pas de support d'analyse, de débogage, de correction ou de réécriture des contenus personnalisés que vous ajoutez dans votre compte.
Si un problème provient de votre code personnalisé, vous devrez vérifier son fonctionnement ou faire appel à un développeur capable de l'analyser.
Nous pouvons néanmoins supprimer du code s'il gène le chargement de l'éditeur.
Comment vérifier que votre personnalisation fonctionne
Après avoir ajouté ou modifié un code personnalisé :
Vérifiez l'affichage sur la page concernée
Testez les éléments impactés
Contrôlez le comportement dans différents navigateurs lorsque cela est pertinent
Assurez-vous que l'éditeur de page continue de fonctionner normalement
Si un comportement inattendu apparaît après l'ajout d'un code personnalisé, retirez temporairement la modification afin de déterminer si elle est à l'origine du problème.
Que faire en cas de problème ?
Si un comportement inattendu apparaît après l'ajout d'un code personnalisé :
Retirez temporairement le code ajouté
Testez à nouveau la page pour vérifier si le problème disparaît
Isolez le dernier code modifié afin d'identifier plus facilement l'origine du dysfonctionnement
Vérifiez le comportement dans un autre navigateur ou sans extension de navigateur
Assurez-vous que l'éditeur de page se charge correctement
Si l'éditeur ne se charge plus après l'ajout d'un code personnalisé, contactez le support. Nous pouvons supprimer du code lorsqu'il empêche le chargement de l'éditeur.
À ce stade : vous connaissez les principales bonnes pratiques pour intégrer du code personnalisé sur LearnyBox tout en limitant les risques de conflits et d'erreurs d'affichage.