Custom CSS

On the Pro plan, each quiz has a Custom CSS field in its Settings that lets you add raw CSS to its public page — full control over spacing, colors, and typography beyond the built-in logo and primary color options.

Last updated

How do I add custom CSS to a quiz?

Open the quiz in the builder, go to Settings → Advanced → Custom CSS (Pro only), and write CSS targeting the classes and data attributes listed below. It applies only to that quiz's public page, not your dashboard.

How it works#

Custom CSS is per-quiz, not account-wide, so you can style a client-facing quiz differently from an internal one. It's saved with the rest of your quiz settings and injected into a <style> tag on the public page, after FluoTest's own styles — so your rules win. Before it's saved or rendered, the CSS is sanitized: it can't contain HTML tags, @import rules, expression(), or url() references that don't point at a data: URI, and it's capped at 20,000 characters.

Adding custom CSS to a quiz#

  1. Open the quiz you want to style and go to its Settings tab.
  2. Expand the "Advanced" section and find "Custom CSS" (this is a Pro feature — free accounts see an upgrade prompt here).
  3. Write CSS in the editor, targeting the classes and data attributes listed in the reference below.
  4. Click "Preview" to open the last saved version of the quiz in an embedded frame, or "Save" and then use the quiz's normal Preview link to see your changes live.
  5. Save the quiz. Changes to Custom CSS take effect immediately on the public page.

Selector reference#

The public quiz page's root element carries the class fluotest-quiz, and key elements carry stable data-fluotest-el attributes so your CSS keeps working even if FluoTest changes its internal styling classes.

SelectorWhat it targets
.fluotest-quizThe root element of the public quiz page. Scope all your rules under this to avoid affecting anything else.
[data-fluotest-el="root"]Same root element as .fluotest-quiz, addressable via attribute selector.
[data-fluotest-el="progress-track"]The background track of the progress bar.
[data-fluotest-el="progress-fill"]The filled portion of the progress bar.
[data-fluotest-el="question-card"]The card containing the current section's questions.
[data-fluotest-el="question-item"]An individual question's wrapper, repeated for each question on screen.
[data-fluotest-el="question-title"]A question's title text.
[data-fluotest-el="button-back"]The Back button.
[data-fluotest-el="button-next"]The Next / Submit / View results button.

Example snippets#

A few common customizations to start from — copy, tweak the values, and paste into the Custom CSS field.

Customize the button color and shape

.fluotest-quiz [data-fluotest-el="button-next"] {
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Adjust question spacing and title size

.fluotest-quiz [data-fluotest-el="question-item"] {
  padding: 2rem;
}

.fluotest-quiz [data-fluotest-el="question-title"] {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

Restyle the progress bar

.fluotest-quiz [data-fluotest-el="progress-track"] {
  height: 6px;
}

.fluotest-quiz [data-fluotest-el="progress-fill"] {
  background: linear-gradient(90deg, #9E3BB9, #FFD94D);
}

What's sanitized#

Custom CSS is public-facing input, so it's sanitized before it's saved and again before it's rendered:

  • No HTML tags: Anything that looks like an HTML tag (including </style>) is stripped, so your CSS can never break out of its <style> context.
  • No @import: @import rules are removed — they could otherwise pull in a third-party stylesheet.
  • No external url(): url() references are only kept if they point at a data: URI. Links to external hosts are stripped to prevent tracking-pixel-style abuse and mixed-content loads.
  • No expression(): Legacy CSS expression() syntax is removed.
  • 20,000 character limit: Anything past the limit is cut off — plenty for spacing, color, and typography overrides.

Frequently asked questions#

Does Custom CSS apply to my dashboard or just the public quiz?

Only the public, respondent-facing quiz page. Your dashboard and the quiz builder are never affected.

Can I use custom fonts or background images with url()?

Only via data: URIs (base64-encoded fonts or images inlined directly in your CSS). Links to externally hosted files are stripped for security.

Will my CSS break if FluoTest updates its design?

Target the data-fluotest-el attributes and the fluotest-quiz root class listed in the reference above — these are kept stable across design updates. Relying on other, unlisted classes may break in future updates.

Do I need to be on Pro to use custom CSS?

Yes. Custom CSS is a Pro-only feature, alongside custom domains, badge removal, and advanced analytics.

See also