Octane AI offers a custom CSS toggle in quizzes. While quizzes normally use dynamic classes, enabling custom CSS will set customizable class names instead.
💡 What you'll learn
How to turn on custom CSS (jump to section)
Editing class names (jump to section)
💡 Prerequisites
Custom CSS can be enabled on Octane Plus plans.
We recommend this feature only if you're savvy with CSS & HTML development, or have access to a developer. While Octane AI does support custom CSS, our support team is unable to assist with issues applying code beyond the guidance provided in this document.
How to turn on custom CSS
Open your quiz in the Octane AI quiz editor.
In the quiz editor, navigate to Design and click on Custom CSS.
Click on 'Enable custom class names'.
When disabled, many quiz elements will have dynamic class names instead.
💡 What does turning custom CSS on do?
When custom CSS is disabled, quizzes will use dynamic classes for most elements.
Enabling custom CSS will set many classes to a set of default class names. These class names can be changed inside of Octane AI's quiz editor and are set per quiz.
You can check out a glossary of custom CSS class names, as well as an explanation of Octane AI's HTML structure here.
Editing class names
You can either use the class names that are generated when custom CSS is enabled, or replace the class names with your own.
You can use multiple classes for a specific element as long as each entry is separated by a space.
❓Where do I add my custom CSS code?
Custom CSS code should be added to the same environment where the quiz has been published. For example, if your quiz is published in one of its own webpages, consider adding the CSS code in the same webpage.
The Octane AI editor is only required for:
Enabling custom CSS
Referencing custom CSS classes
Customizing custom CSS class names
Once you have your custom CSS file ready and linked to your quiz, you can start customizing the aesthetics of your quiz.
Whether it's changing the color scheme, adding animations, or tweaking fonts and layouts, the custom CSS provides a powerful tool to bring your quiz to life. In your CSS code, target the custom class names given in the quiz editor or this glossary to affect specific elements within your quiz.
Do note that applying custom CSS rules require knowledge in CSS and HTML development. For detailed instructions or specific issues, we recommend reaching out to a developer.