Customizing Quiz Appearance

Accessing appearance settings

Open your quiz and click Design in the top navigation bar.

Layout options

| Layout | Description | |---|---| | Classic | Question above answers in a vertical stack | | Cards | Full-screen one-question-at-a-time cards | | Sidebar | Progress bar on the left, question on the right | | Minimal | Clean, text-only layout |

Colors and typography

• Primary color — buttons, progress bars, selected states
• Background — solid color, gradient, or background image
• Text color — question text and answer labels
• Font — select from Google Fonts or upload a custom font (Pro plan)

Button styles

Choose from: Rounded, Pill, Square. You can also set hover color and border radius manually in Advanced CSS.

Progress bar

Toggle on/off. Formats: percentage, step counter ("Question 2 of 6"), or hidden.

Custom CSS

Under Design > Advanced > Custom CSS you can inject CSS that overrides any style. Example:

.qc-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 999px;
}