Champ de customisation HTML/CSS
Le champ de customisation HTML/CSS est une option disponible seulement avec l'offre Drimify Premium
Vous trouverez le champ HTML/CSS tout en bas de l'étape de création "design" dans l'interface Drimify.
Vous pouvez modifier la typographie en ajoutant du code CSS dans le champ de personnalisation avec le code suivant :
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...).
Vous pouvez augmenter la taille de la zone de jeu dans la balise <style> grâce au code CSS suivant :
.qz-container {max-width:600px;}
Attention ! Vérifiez bien le rendu du jeu sur tous les types d'appareils. La taille maximum est de 800px.
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.
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.
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...).
Comment puis-je augmenter la taille de la zone de jeu ?
Vous pouvez augmenter la taille de la zone de jeu dans la balise <style> grâce au code CSS suivant :
.qz-container {max-width:600px;}
Attention ! Vérifiez bien le rendu du jeu sur tous les types d'appareils. La taille maximum est de 800px.
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.
Mis à jour le : 25/02/2022
Merci !