Interactive Puzzle Page Styling: Customize Colors, Fonts & Layout (CSS)

Overview

Make your interactive puzzle pages look on-brand—without touching the puzzle logic. In this tutorial you’ll style the page with custom.css to change colors, fonts, spacing, and buttons while keeping all required HTML and JavaScript intact. Great for KDP/Etsy publishers showcasing samples, or educators matching school branding.

This tutorial focuses on CSS styling only. If you need to change the HTML template, see Interactive Puzzle Page Templates (Custom HTML).

Required Modules

Any Puzzle Maker Pro module that supports HTML output. You’ll select HTML output and click Create to generate your files.

Preparation

You’ll need:

A generated puzzle page (name.html, name.svg, name.json) in one folder
The custom.css file in the same folder
A text editor

You can download the default html and css here. (Most recent version)

What’s safe to change in CSS

Colors, fonts, spacing, borders, border-radius, shadows, gradients
The CSS variables in :root (preferred)
Decorative rules for text/backgrounds/borders
Avoid overriding display/position/pointer-events, removing padding from interactive containers, or forcing fixed width/height that fights the responsive SVG.

Step-by-Step

1) Adjust global theme tokens (`:root`)

Open custom.css and edit the palette and typography variables—fastest way to theme the entire page and puzzle UI.

:root {
  /* Typography */
  --pmp-font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --pmp-heading-weight: 700;
  --pmp-body-weight: 400;

  /* Page & surfaces */
  --pmp-page-background: #f5f7fb;
  --pmp-page-text: #1f2933;
  --pmp-surface-background: #ffffff;
  --pmp-surface-border: rgba(15, 23, 42, 0.08);
  --pmp-surface-radius: 16px;
  --pmp-surface-shadow: 0 16px 40px rgba(15,23,42,.08);

  /* Brand accents */
  --pmp-accent: #6366f1;
  --pmp-accent-strong: #4f46e5;
  --pmp-accent-soft: rgba(99,102,241,.12);
  --pmp-accent-contrast: #ffffff;
  --pmp-focus-ring: 0 0 0 3px rgba(129,140,248,.35);

  /* Status + glyphs */
  --pmp-success-bg:#dcfce7; --pmp-success-text:#166534;
  --pmp-error-bg:#fee2e2;   --pmp-error-text:#b91c1c;
  --pmp-symbol1:#1e3a8a;    --pmp-symbol2:#c084fc;
  --pmp-symbol-error:#e11d48;
}

These variables drive buttons, banners, inputs, the puzzle host, and even SVG symbol colors.

2) Polish the puzzle shell

Tweak the container and SVG host without breaking layout.

.bpt-container {
  background: var(--pmp-surface-background);
  border: 1px solid var(--pmp-surface-border);
  border-radius: var(--pmp-surface-radius);
  box-shadow: var(--pmp-surface-shadow);
  padding: 24px 24px 32px;
  gap: 20px;
}

.bpt-host {
  background: linear-gradient(180deg, #fdfdff 0%, #f1f4fb 100%);
  border-radius: calc(var(--pmp-surface-radius) - 4px);
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.08);
  /* Symbol colors passed into the SVG */
  --bpt-symbol1-color: var(--pmp-symbol1);
  --bpt-symbol2-color: var(--pmp-symbol2);
  --bpt-error-color: var(--pmp-symbol-error);
}

3) Style the header, picker, and timer

The top bar contains the title and optional gallery picker controls.

.bpt-topbar { padding-bottom: 12px; border-bottom: 1px solid var(--pmp-surface-border); }
.bpt-title  { font-weight: var(--pmp-heading-weight); font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: .01em; text-align: center; }

#bpt-select, #bpt-load {
  font-size: .95rem;
  border-radius: 999px;
  border: 1px solid rgba(79,70,229,.25);
  background: var(--pmp-accent-soft);
  color: var(--pmp-accent-strong);
  padding: 8px 18px;
  transition: border-color .2s, box-shadow .2s, background-color .2s, color .2s;
}

.bpt-timer { font-variant-numeric: tabular-nums; font-weight: var(--pmp-heading-weight); color: var(--pmp-accent); }

4) Tune banners (status messages)

Use your brand colors via the built-in status tokens.

.bpt-banner { border-radius: 12px; font-weight: 600; padding: 12px 16px; }
.bpt-banner.ok    { background: var(--pmp-success-bg); color: var(--pmp-success-text); }
.bpt-banner.error { background: var(--pmp-error-bg);   color: var(--pmp-error-text); }

5) Make the call-to-action buttons pop

Buttons live in the bottom bar; gradients and radius are safe.

.bpt-bottombar { padding-top: 12px; border-top: 1px solid var(--pmp-surface-border); gap: 12px; justify-content: flex-end; }

.bpt-bottombar button{
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 1rem; font-weight: 600;
  background: linear-gradient(135deg, var(--pmp-accent-strong), var(--pmp-accent));
  color: var(--pmp-accent-contrast);
  border: none;
  box-shadow: 0 10px 24px rgba(99,102,241,.28);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.bpt-bottombar button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(99,102,241,.35); }
.bpt-bottombar button:active{ transform: translateY(0);    box-shadow: 0 6px 18px  rgba(79,70,229,.45); }
.bpt-bottombar button:focus-visible { outline: none; box-shadow: var(--pmp-focus-ring); }

8) Logo area

Drop your brand mark without shifting layout.

.bpt-logo-wrap { display:flex; justify-content:center; align-items:center; min-height:56px; }
.bpt-logo-wrap img { max-height:48px; object-fit:contain; }

9) Responsive polish (mobile)

Keep components comfortable on small screens.

@media (max-width: 640px) {
  .bpt-container { border-radius: 12px; padding: 18px; }
  .bpt-bottombar { flex-wrap: wrap; justify-content: center; }
  .bpt-bottombar button { width: 100%; max-width: 240px; }
}

10) Apply, upload, verify

Save custom.css and place it in the same folder as your puzzle’s name.html, name.svg, and name.json.
Open the page in your browser. Check: title bar, top bar, buttons, banners, and in-puzzle highlights.
If something looks off, comment out your last few rules, refresh, and re-apply incrementally.
If it still fails, restore the original custom.css header and compare against the stock file to undo risky properties (e.g., display, position, fixed width/height).

Outcome

You’ve branded your interactive puzzle page using supported CSS hooks:

Color, typography, surfaces, and buttons themed via :root tokens
Clean top bar, banners, and CTA buttons
Accessible focus rings and mobile-friendly layout
SVG symbol colors piped from CSS variables—no code edits needed

This gives KDP/Etsy publishers and educators a professional, on-brand interactive experience that keeps visitors engaged.