Style Templates

Style Templates

Overview

Style templates are predefined design presets that instantly change the look and feel of your calculator. Each template provides a complete set of CSS variable values that control colors, fonts, spacing, borders, and other visual properties. Templates give you a polished starting point so you can get a professional-looking calculator without writing any CSS. You apply templates in Calculator Editor → Placement & Styling → Styling → Styles sub-tab.

Steps

  1. In the Styles sub-tab, locate the Style Template dropdown at the top.
  2. Click the dropdown and browse the available templates (e.g., "Clean", "Modern", "Minimal").
  3. Select a template. The CSS variables in the editor below update immediately, and the live preview reflects the new look.
  4. If the template looks good as-is, publish your calculator.
  5. If you want to tweak the template, edit the CSS variables in the editor below the dropdown. Your changes override the template defaults.

Switching templates replaces all current CSS variable values and clears any @media responsive overrides. If you've made custom edits (including mobile @media blocks), copy them first with Copy CSS.

The Styles CSS editor can also hold responsive @media token overrides in the same place as base variables — see CSS Variable Customization.

Details

Control Description
Style Template dropdown Lists all available predefined style templates.
CSS editor Editor showing the current CSS variables (and optional @media overrides). Updates when you pick a template.
Copy CSS button Copies the current Styles CSS, including @media blocks, to your clipboard.
Reset button Reverts base CSS variables to the selected template's defaults and clears @media overrides.

Examples

  • Quick launch — You're building your first calculator and want it to look great immediately. You select the "Clean" template, preview it, and publish — no CSS editing needed.
  • Branded customization — You pick the "Modern" template as a starting point, then adjust the primary color variable to match your brand's hex color. The rest of the template's design stays intact.