HTML/ CSS Customisation Field
The HTML/ CSS customisation field is an option available only with the Drimify Premium offer
You will find the HTML/ CSS field at the bottom of the "design" creation step in the Drimify interface.
You can change the typography, colours and other attributes by adding CSS code in the customisation field with the following code:
The <link> tag is the external call for web font available from Google Fonts or Adobe Fonts. To use a custom typography, you must host it on a remote server.
The <style> tag contains the custom CSS
.qz-container acts on the entire page in the same way as the <body> in HTML.
.qz-QuizDataHeader applies globally to all titles on all screens.
.qz-btn applies globally to the buttons on each screen.
You can find the name of the different CSS classes available to customise using the "inspector" mode of your web browser. You can then freely apply all types of CSS attributes to each class (font, colour, etc.).
You can increase it by using this CSS code in the <style> tag:
.qz-container {max-width:600px;}
Warning ! Check the visual of the game on each type of devices. The maximum size is 800px.
We recommend that you do not use the main body type or html type tags when customising to avoid conflicts and malfunctions.
Where can I find the field in my dashboard?
You will find the HTML/ CSS field at the bottom of the "design" creation step in the Drimify interface.
How do I edit typography and colours in CSS?
You can change the typography, colours and other attributes by adding CSS code in the customisation field with the following code:
<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>The <link> tag is the external call for web font available from Google Fonts or Adobe Fonts. To use a custom typography, you must host it on a remote server.
The <style> tag contains the custom CSS
.qz-container acts on the entire page in the same way as the <body> in HTML.
.qz-QuizDataHeader applies globally to all titles on all screens.
.qz-btn applies globally to the buttons on each screen.
You can find the name of the different CSS classes available to customise using the "inspector" mode of your web browser. You can then freely apply all types of CSS attributes to each class (font, colour, etc.).
How to increase the size of the game play area?
You can increase it by using this CSS code in the <style> tag:
.qz-container {max-width:600px;}
Warning ! Check the visual of the game on each type of devices. The maximum size is 800px.
We recommend that you do not use the main body type or html type tags when customising to avoid conflicts and malfunctions.
Updated on: 24/11/2022
Thank you!