Organizers

Customize your organization's QueueKat theme

As an Owner or Admin, use the appearance settings to give your organization's public and event pages a look that feels like yours, while keeping them readable in light and dark themes.

When to use this guide

Use it when you are setting up your organization's web appearance or making a careful finishing change to its public pages. Start in Settings → Look and feel. The theme preview is useful for comparing components, but it is not a substitute for checking the pages visitors use.

Steps

Set the built-in appearance first. Choose a palette or edit its light and dark colors, then set typography and corner style. Body text size ranges from 16–20 px; heading weight choices are 400, 500, 600, 700, and 800. Add the appropriate logos and images with the appearance controls. These controls are easier to review and keep consistent than hand-written overrides.
Inspect both previews. Switch between Light and Dark in the preview and check text, links, buttons, fields, and focus indicators. The dark preview remains available even if your organization does not allow visitors to use dark mode.
Use custom CSS only for finishing touches. Open Advanced custom CSS for small typography, color, border, or spacing refinements that the appearance controls do not cover. Custom CSS is bounded; it is not a general stylesheet or a way to rearrange the page.
Save and inspect real pages. Check the organization page and an event page in both themes, including links, keyboard focus, errors, and any content that appears only in a particular event state. If a change makes something difficult to read or use, adjust or remove it.

What custom CSS can affect

QueueKat scopes custom rules to the main content of organization-hosted pages. They can affect public organization and event content, but not the site navigation, QueueKat footer, or the settings workspace. Website custom CSS is not included in email; email clients may use different fonts or colors.

The compiler accepts HTML element, class, ID, and universal (*) selectors; descendant, child (>), adjacent-sibling (+), and general-sibling (~) combinators; comma-separated selectors; and a limited set of simple pseudo-classes: :hover, :focus, :focus-visible, :focus-within, :active, :disabled, :checked, :first-child, :last-child, :only-child, :empty, and :root. A few selectors from current public markup are h1, #org-home, #org-events, and #org-events-heading. The current pages also use the class .text-muted; classes are accepted syntax, but generated utility classes such as this one are implementation details, not a stable customization API. Prefer the semantic elements and IDs where they fit.

For example, these selectors target elements present on current public pages. The compiler accepts the CSS; still check the result on your own content:

#org-home h1 {
  letter-spacing: 0.02em;
}

#org-events {
  border-radius: 1rem;
  padding: 1rem;
}

.text-muted {
  line-height: 1.5;
}

a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

Only a leading light/dark theme selector is allowed as an attribute selector. Use html[data-theme="light"] or html[data-theme="dark"], followed by a space and your content selector. An unprefixed rule applies in both modes. When a comma-separated rule needs a mode restriction, repeat the prefix for each selector:

html[data-theme="light"] #org-events-heading,
html[data-theme="light"] .text-muted {
  color: #253a35;
}

html[data-theme="dark"] #org-events-heading,
html[data-theme="dark"] .text-muted {
  color: #e7faf7;
}

The mode shown on a visitor's page follows that visitor's account or device preference and your dark-mode setting. If dark mode is disabled, visitors see the light theme; the dark preview is still available for preparation.

Supported CSS and limits

Rules must be flat selector { property: value; } blocks. The allowed properties are:

Color and borders: color, background-color, background-image, border-color, border-top-color, border-right-color, border-bottom-color, border-left-color, border-width, border-style, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius.
Typography: font-size, font-weight, font-style, font-family, line-height, letter-spacing, word-spacing, text-align, text-decoration, text-decoration-color, text-decoration-thickness, text-transform, and text-underline-offset.
Spacing and surface detail: padding, padding-top, padding-right, padding-bottom, padding-left, margin, margin-top, margin-right, margin-bottom, margin-left, gap, row-gap, column-gap, and box-shadow.

Values are limited to plain CSS-like values and the supported color functions rgb(), rgba(), hsl(), hsla(), oklch(), and oklab(). External resources are the exception described below. Escapes, markup, control characters, var(), calc(), arbitrary functions, and !important are not accepted.

Custom CSS is limited to 12,000 bytes. It does not support stylesheet imports, nesting, media queries, arbitrary attribute selectors, pseudo-elements, scripts, or structure-changing layout, hiding, and positioning properties such as display, width, grid, flex, and position. Only the spacing properties listed above are accepted; other unsupported properties are rejected too. Use the built-in appearance controls rather than trying to work around the limits.

Images, fonts, and external hosts

An image in background-image or a font source in @font-face may use an external URL only when all of these conditions hold:

The URL uses HTTPS.
Its hostname exactly matches one of up to 10 approved domains. Wildcards, subdomains, ports, paths, and URL schemes are not entered in the allowlist; resource URLs cannot use a custom port.
The URL is used only for an image background or an @font-face source.

For example, if images.example.org is approved:

#org-hero {
  background-image: url("https://images.example.org/cover.webp");
}

The domain field is limited to 2,540 bytes; list exact hostnames, one per line. Keep in mind that a host serving an external image or font receives each visitor's IP address when their browser requests that resource. Only approve a provider you trust. If you have permission to use a font, you can instead upload TTF or WOFF2 files in Look and feel (up to 24 files, 2 MB each) so visitors do not need to request that font from a third-party font host.

The only supported at-rule is a restricted @font-face. It accepts font-family, src, font-weight, font-style, and font-display; an external src must use an approved HTTPS hostname. For example:

@font-face {
  font-family: EventFont;
  src: url("https://fonts.example.org/event.woff2") format(woff2);
  font-display: swap;
}

#org-home {
  font-family: EventFont, sans-serif;
}

Expected outcome

Your organization's public pages reflect the built-in appearance settings plus only the small CSS refinements you chose. Confirm the finished result on an actual organization page and event page in both themes. Palette controls validate their supported color pairings, but custom CSS colors are not automatically checked for every background or state. You are responsible for checking contrast, visible keyboard focus, and readability after every custom color change.

Troubleshooting

A rule is rejected: Check that it is a flat rule, uses a supported selector and property, and contains no unsupported value or !important.
A theme-specific rule appears in the wrong mode: Prefix every selector in its comma-separated list with the same html[data-theme="light"] or html[data-theme="dark"] selector.
An image or font does not load: Verify HTTPS, spelling and exact hostname against the approved domains. Adding a parent domain does not approve its subdomains; save the setting after changing the list.
A preview looks right but a page does not: The preview shows representative components. Review the actual organization and event pages, where content and event state can differ.