Overview
Octane AI's custom CSS options will allow you to directly customize the class names of elements in the Octane AI quiz.
This allows you to target those classes with code on your website and gives you free reign to shape quiz design to exactly what your brand needs.
What you'll learn
Where to find & enable Octane AI's custom CSS settings.
Prerequisites
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
To enable custom CSS in the quiz editor, go to:
Design > Custom CSS
Then, select the checkbox labeled Enable custom class names (this option is disabled by default).
When disabled, Octane AI quiz elements will have dynamic class names.
Where do I add my CSS code?
The CSS code can be added to the same environment that the quiz has been published on.
For example, if your quiz is published in one of its own webpages, adding the code in the same webpage would be one option.
Class names can even be changed to equal existing ones on your website.
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.
Editor documentation
The quiz editor includes documentation for each of the classes that can be changed. Nearly every element in quizzes can be targeted, so we highly recommend checking out the quiz editor's documentation if you'd like additional context on any of the CSS elements.
