Dans RacontR, il est possible d’injecter du code Javascript et CSS à l’intérieur de vos projets pour les personnaliser et y ajouter des fonctionnalités. Le code est une discipline qui requiert certaines connaissances, une autonomie et beaucoup de tests !
Voici les différentes possibilités de RacontR que nous allons aborder :
Ajoutez du code personnalisé CSS, JS et trouver un ID
Une autre façon de trouver un ID
Ajoutez une classe à vos éléments
Ajouter un code personnalisé CSS, JS et trouver un ID
Pour ajouter du code à vos pages, rien de plus simple (illustration ci-dessous) :
A cet endroit, vous pouvez choisir entre du code JS (javascript) et du CSS.
Ceci fait, copiez-collez ou éditez votre code dans la fenêtre qui apparaît. N’oubliez pas de valider pour enregistrer.
Voilà, vous avez intégré votre bout de code au projet. Il ne vous reste plus qu’à aller dans l’aperçu du projet pour voir le résultat !
2. Trouvez l’ID d’un élément RacontR
Vous aurez à trouver l’ID d’un élément RacontR pour être en mesure de personnaliser ou de l’intégrer dans votre code. L’ID est propre et unique à chaque élément de votre projet. Le second exemple est tiré du navigateur Google Chrome, le processus demeure essentiellement le même sur Firefox ou Safari.
Lorsque vous cliquez sur un élément, vous trouverez son ID en dessous de la timeline.
Une autre façon de trouver un ID
Méthode alternative :
Pour ouvrir l’inspecteur d’élément, il faut faire clic droit avec la souris dans votre page en mode preview, puis choisir "inspecter l’élément".
Cliquez sur la petite loupe
Survolez à l’aide de la souris l’élément dont vous désirez avoir l’ID. Survolez à l’aide de la souris l’élément dont vous désirez avoir l’ID
Enfin, observez dans la console le numéro affiché dans la case « ID » correspondant à l’élément.
Ajoutez votre propre classe à un élément
Pour les utilisateurs familiarisés avec le CSS, vous pouvez ajouter vos propres classes à un élément sur RacontR.
Pour cela :
Cliquez sur l’élément
Ouvrez l’onglet de ses propriétés,
Ajoutez une classe puis validez.
