Theme package

A theme is a package of files. It sets the look of the booking form and the sections, not the data.

Files

File	Required	Contents
theme.json	yes	Theme details
booking.css	yes	Look of the booking form (page and dialog)
blocks.css	yes	Look of the sections
services.html, team.html, hours.html, contact.html	yes	Templates for the four sections
works.html	no	Gallery template; without it the portfolio uses the standard grid

theme.json

{
  "id": "atelier-rosa",
  "name": "Atelier Rosa",
  "version": "1.0.0",
  "exclusive": true,
  "description": "Warm tones and handwritten titles"
}

• id: lowercase letters, digits and hyphens, 3 to 60 characters (^[a-z0-9][a-z0-9-]{2,59}$).
• name: up to 80 characters.
• version: x.y.z. An existing version cannot be uploaded again.
• ownerCompanyId is filled in automatically when a partner uploads a theme for a business.

Limits

• CSS at most 100 KB, each template at most 20 KB.

CSS

• Allowed: plain CSS, @media, @keyframes, images and fonts as data: URLs.
• Not allowed: @import and external URLs.
• The system scopes every selector under [data-theme-id="ID"], so a theme cannot change the rest of the site.

Templates

Templates use a subset of Mustache:

Syntax	Meaning
{{field}}	The value, always safely escaped
{{#list}}…{{/list}}	Repeats the block for each item
{{^list}}…{{/list}}	Shown when the list is empty

Allowed elements: div, section, article, header, footer, button, h2–h4, p, span, strong, em, small, ul, ol, li, dl, dt, dd, img, time, br, hr, address, figure, figcaption.

Allowed attributes: class, role, alt, title, src, datetime, data-*, aria-*. src may contain only a single field, for example src="{{photo}}".

Not allowed: scripts, on… attributes, links, forms, iframe, javascript:, HTML comments, <? and <![.

Fields by section

Template	Fields
services.html	services[] (id, name, notes, price, location) and locations[] (name, city, services[])
team.html	staff[] (name, initials, location, description, photo)
hours.html	locations[] (name, city, days[] (label, value), exceptions[] (date, value, note), warning)
contact.html	company (name, phone, email) and locations[] (name, city, address, contact)
works.html	See Portfolio template

Example

<div class="at-grid">
  {{#services}}
  <article class="at-card" data-service-id="{{id}}">
    <h3>{{name}}</h3>
    <p class="at-muted">{{notes}} · {{location}}</p>
    <p class="at-price">{{price}}</p>
  </article>
  {{/services}}
  {{^services}}<p class="at-muted">No published services.</p>{{/services}}
</div>

The booking form CSS is served from https://app.tempact.app/public/v1/themes/{themeId}/{version}/booking.css.