This article is also available in:
The HTML/CSS customisation field is an option available only with the Drimify Premium offer

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...).

We recommend that you do not use the main body type or html type tags when customising to avoid conflicts and malfunctions.
Was this article helpful?
Cancel
Thank you!