UI Customization

TimeTiles provides a layered customization system that lets you control the visual appearance of your site — from simple color changes to full CSS overrides — all from the Payload CMS dashboard.

Customization Layers

The system is designed so you can start simple and go deeper as needed:

Each layer overrides the one above it. For example, a site’s inline color settings override its assigned theme preset.

Theme Presets

Theme presets are named, reusable visual configurations that can be shared across multiple sites.

Creating a Theme

Navigate to /dashboard/collections/themes and create a new theme with:

Colors (Light Mode) — Semantic color tokens that control the entire UI:

Colors (Dark Mode) — Optional overrides for dark mode. Leave empty to use the platform’s automatic dark mode derivation.

Typography:

Visual Style:

Assigning a Theme to a Site

In the Sites collection, each site has a Theme relationship field under Branding. Select a theme preset and all its settings will apply to that site. Any inline color overrides on the site take precedence over the theme.

Theme Versioning

Themes use Payload’s built-in versioning. Every change is tracked, and you can roll back to any previous version from the dashboard.

Site Branding

Each site can override platform defaults with its own branding. Navigate to /dashboard/collections/sites and edit the Branding section.

Identity

• Title — Overrides the platform site name in browser tabs and headers
• Logo (Light/Dark) — Upload separate logos for light and dark themes
• Favicon — Custom favicon for this site

Color Overrides

The same 15 semantic tokens available in theme presets are available as inline overrides on each site. These take the highest priority — they override both the platform defaults and any assigned theme preset.

Enter colors as any valid CSS color value:

• Hex: #3b82f6
• OKLCH: oklch(0.58 0.11 220) (recommended for perceptual uniformity)
• RGB: rgb(59, 130, 246)
• HSL: hsl(217, 91%, 60%)

Typography & Style

Same options as theme presets — font pairing, border radius, and density — applied as inline overrides.

Block-Level Style Controls

Every block in the page builder includes a Block Style section with per-block visual controls.

Available Controls

Use Cases

Responsive content: Show a simplified hero on mobile and a detailed version on desktop by creating two hero blocks with complementary visibility settings.

Section anchoring: Set anchorId to pricing on a block, then link to it from navigation: /page#pricing.

Visual rhythm: Alternate blocks with Large and None padding, using Gradient Fade separators between major sections.

Custom CSS Injection

For cases where the structured controls aren’t enough, you can inject custom CSS scoped to your site.

Configuration

In the Sites collection, open the Custom Code section:

Writing Custom CSS

Your CSS is automatically scoped to your site using the [data-site="your-site-slug"] selector. You can target specific blocks using data attributes:

/* Change all hero block backgrounds */
[data-block-type="hero"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
 
/* Style a specific block by ID */
[data-block-id="abc123"] {
  border-left: 4px solid var(--primary);
}
 
/* Override semantic tokens for this site */
--primary: #2563eb;
--accent: #059669;

Security

For security, the following CSS patterns are automatically stripped:

• @import — prevents loading external stylesheets
• url() — prevents loading external resources
• javascript: — prevents script injection
• expression() — prevents legacy IE script execution
• position: fixed — prevents full-page overlay attacks

Layout Templates

Layout templates control the structural frame of pages — header style, footer variant, and content width.

Creating a Layout Template

Navigate to /dashboard/collections/layout-templates:

Assigning Templates

Site default: In the Sites collection, set the Default Layout field. All pages on this site use this template unless overridden.

Page override: In the Pages collection, set the Layout Override field on any individual page to use a different template.

Resolution order: Page override > Site default > Platform default (marketing header, full footer, large width).

Example Templates

Priority & Inheritance

When multiple customization layers are configured, they resolve in this order (highest priority first):

1. Custom CSS — can override anything
2. Inline site branding colors — override theme preset colors
3. Theme preset — provides base visual configuration
4. Platform defaults — the cartographic design system

For layout:

1. Page layout override — per-page template
2. Site default layout — per-site template
3. Platform default — marketing header, full footer, large width

For blocks:

1. Block-level style controls — per-instance overrides
2. Block type defaults — built into each block component