Theme & Customization
At a glance
An advanced theme and SEO customization layer — theme gallery with live preview, color-scheme presets, validated custom CSS with variables and scoping, logo upload with eight auto-sized variants, header/footer presets, page-width modes, font-pair presets and the full F18.13 SEO toolkit (meta templates, OG, Twitter Cards, SportsClub JSON-LD, sitemap, robots, canonicals, hreflang).
How it works
Theme & Customization is the polish layer where editors take a site from 'works' to 'looks like our brand'. The theme gallery lists curated templates by category with a live-preview endpoint that renders the current site's content under a candidate template without committing — editors see exactly how their pages will look before applying. Color-scheme presets are eight pre-defined combinations (heritage-bottle, ivory-mint, sport-rouge, etc.); applying one updates only colors, never logos or fonts.
Custom CSS injection generates CSS variables from BrandingConfig, scopes user-supplied CSS under `[data-tenant-brand="<id>"]` to prevent leakage, validates braces, warns on `!important` overuse, and tracks versions for rollback. Logo upload generates eight variants automatically — favicon (16/32/48), header (light/dark backgrounds), Open Graph (1200×630), Apple touch icon and a WebP variant — so editors upload once and every surface gets the right asset. Header and footer layouts ship as six presets each (sticky, centered-logo, transparent-hero, multi-column, social-focused, hidden, etc.); switching presets preserves custom colors and content.
PageWidthMode picks fixed/fluid/responsive content max-width with breakpoint-level container control. Font-pair presets pair a heading font with a body font from ten curated combinations across modern, classic, elegant, sport and minimal categories — applying a pair updates fonts and weights without touching colors or logo. The bundled SEO features (F18.13.*) layer on top: configurable title formats and length limits, OG with og:locale and article tags, Twitter Cards with creator handle and image:alt, SportsClub JSON-LD with sameAs and memberOf, dynamic sitemap.xml with hreflang xhtml:link alternates, enhanced robots.txt with crawl-delay and patterns, language-aware canonicals and hreflang with x-default.
Everything is per-site, audited and tenant-isolated.
Key capabilities
- Theme gallery with non-destructive live preview before apply
- Eight color-scheme presets applied without touching logo, fonts or CSS
- Validated, scoped custom CSS with variable generation and version tracking
- Logo upload generates eight variants (favicon, header, OG, WebP) automatically
- Six header and six footer presets with custom-content preservation
- Page-width modes (fixed/fluid/responsive) and ten curated font pairs
- Full SEO bundle: title formats, OG, Twitter Cards, SportsClub JSON-LD, sitemap, robots, canonicals, hreflang
In practice
Olof, brand manager for the Norwegian Federation, refreshes the federation site for the new season. He opens the theme gallery, clicks 'Live preview' on the new 'Editorial' template, and sees the federation's actual content rendered in the new layout in seconds. He applies it.
He picks the heritage-bottle color scheme to match the new brand book, switches to the Fraunces+Inter font pair from the preset list, and uploads the new logo SVG once — the system generates the favicon, header variants and OG image automatically. He sets the title format to `site — page`, adds the federation's @handle for Twitter Cards, and links the federation's Facebook and Instagram in sameAs for the SportsClub JSON-LD. He runs an SEO audit on the home page; it scores 100/100.
The next ISR build ships everything within a minute.
Features in this subsystem
15| ID | Status | Features |
|---|---|---|
| F18.12.01 | Shipped | Theme gallery with live preview — PL-F1812a ✅ PL-F1812a |
| F18.12.02 | Shipped | Per-club color scheme presets — PL-F1812a ✅ PL-F1812a |
| F18.12.03 | Shipped | Custom CSS injection enhancements (variables, scoping, validation) — PL-F1812a ✅ PL-F1812a |
| F18.12.04 | Shipped | Logo upload with auto-sizing (8 variants) — PL-F1812a ✅ PL-F1812a |
| F18.12.05 | Shipped | Header/footer layout selection — PL-F1812b ✅ PL-F1812b |
| F18.12.06 | Shipped | Page width and content max-width configuration — PL-F1812b ✅ PL-F1812b |
| F18.12.07 | Shipped | Font pair selection (heading + body) — PL-F1812b ✅ PL-F1812b |
| F18.13.01 | Shipped | Enhanced per-page meta title/description with configurable title templates, length limits, auto-description, SEO preview and audit endpoints ✅ PL-F1813a |
| F18.13.02 | Shipped | Enhanced Open Graph tags with og:locale and og:locale:alternate for multi-language sites plus article-specific OG properties ✅ PL-F1813a |
| F18.13.03 | Shipped | Dedicated Twitter Card support with site-level defaults, per-page creator handle, separate twitter:image:alt, and card type fallback ✅ PL-F1813a |
| F18.13.04 | Shipped | Schema.org SportsClub structured data with sport="Pétanque", logo, sameAs social profiles, and memberOf federation hierarchy ✅ PL-F1813a |
| F18.13.05 | Shipped | Auto-generated sitemap.xml for CMS sites with lastmod, changefreq, priority, and xhtml:link hreflang alternates for multi-language sites ✅ PL-F1813b |
| F18.13.06 | Shipped | Enhanced robots.txt per CMS instance with crawl-delay, custom disallow/allow patterns, user-agent rules, and sitemap reference ✅ PL-F1813b |
| F18.13.07 | Shipped | Enhanced canonical URLs with language-aware resolution (default uses clean path, non-default includes prefix) and canonical+alternates endpoint ✅ PL-F1813b |
| F18.13.08 | Shipped | hreflang link tags for all available language versions plus x-default pointing to default language with partial translation awareness ✅ PL-F1813b |