Cet article est aussi disponible en :
Le champ de customisation HTML/CSS est une option disponible seulement avec l'offre Drimify Premium

Où puis-je trouver le champ dans le tableau de bord de mon jeu ?

Vous trouverez le champ HTML/CSS tout en bas de l'étape de création "design" dans l'interface Drimify.

Trouver le champ HTML/CSS dans votre onglet design

Comment puis-je modifier la typographie et les couleurs en CSS ?

Vous pouvez modifier la typographie en ajoutant du code CSS dans le champ de personnalisation avec le code suivant :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<style>
.qz-container {font-family:'Nunito';}
.qz-QuizDataHeader {font-family:'Merriweather';}
.qz-btn {background-color:#00A1DE;}
</style>


La balise <link> est l’appel externe des webfont disponibles depuis Google Fonts ou Adobe Fonts. Pour l’utilisation d’une typographie personnalisée, vous devez l’héberger sur un serveur distant.

La balise <style> contient le CSS personnalisé
.qz-container agit sur l’ensemble de la page au même titre que le <body> en langage HTML.
.qz-QuizDataHeader s’applique de manière globale sur tous les titres de tous les écrans.
.qz-btn s’applique de manière globale sur les boutons de chaque écran.

Vous pouvez retrouver le nom des différentes classes CSS à personnaliser en utilisant le mode "inspecteur" de votre navigateur web. Vous pouvez ensuite appliquer librement tous types d'attributs CSS à chaque classe (font, color etc...).

Nous recommandons de ne pas utiliser les balises principales de type body ou html lors de la personnalisation afin d'éviter les conflits et dysfonctionnements.
Cet article a-t-il répondu à vos questions ?
Annuler
Merci !