Help center

Theme design

Designing themes for Exponential: designs, the override system, styles, assets and accessibility.

130 pages

Designers: start here The landing page for designers: what Exponential's design system is, a first-week plan, the six sections of the designer help (theme design, templates, theme extensions, distribution, sales, maintenance), the tutorials… Designers Theme design
Theme designers: start here The landing page for theme designers - what this section adds to the designer help, a task-to-page index that maps every task of a theme designer to the right page, the pages of this section, and the pages from other… Theme designers Theme design
The design cascade The exact order in which Exponential searches designs and extensions for a template, stylesheet or image, with a worked example from this installation and the caches that hold the result. DevelopersDesigners Theme design
The pagelayout The template that frames every page: how the kernel calls it, what it must print, a minimal working pagelayout, how real designs split it into parts, and how a module can ask for another one. Designers Theme design
Loading stylesheets How a design's CSS reaches the page: the ezcss_load operator, the design.ini lists (CSSFileList, FrontendCSSFileList, BackendCSSFileList, AdminComponentCSSFileList), stylesheets a content template requires, order, media… Designers Theme design
Accessibility basics for themes The accessibility foundations every Exponential design needs: language and direction on html, landmarks and headings, a skip link, visible focus, contrast, alt text, forms, motion, zoom, and how the project tests (axe… Designers Theme design
Dark mode overview How dark mode works in Exponential designs: color tokens with a light and a dark value, a theme attribute on html set before the first paint, light, dark and system choices, and what admin4 does as the reference… Designers Theme design
CSP-safe design Designing so a strict Content Security Policy can be enforced: what the policy allows by default, the three rules (no inline script, no inline style, no third-party origins), the patterns that replace inline code, the… DevelopersDesigners Theme design
Layouts for designers The layouts editor from a designer's side: layouts, zones, blocks, collections and rules, how the pagelayout resolves and draws a layout, which templates draw what, and how a design takes over their markup. Designers Theme design
Tutorial: create a theme extension Build a complete theme extension from an empty folder, step by step: folders, metadata, design registration, a siteaccess that uses the design, a CSP-safe pagelayout, a stylesheet with tokens and dark mode, a script, an… DevelopersDesigners Theme design
Designer help, every page The index of every page for designers in this help, by section: theme design, templates, theme extensions, distribution, sales and the maintenance life cycle. Designers Theme design
Your first day as a theme designer A plan for the first working day of a theme designer new to Exponential - looking at a real site with the right eyes, finding which template drew what, collecting the content classes, and leaving with a list of what to… Theme designers Theme design
Reading paths for theme designers Ordered reading lists for theme designers by situation - visual designers who do not code, designers who write CSS and templates, designers redesigning a running site, designers of themes for publication, and designers… Theme designers Theme design
How Exponential themes differ For theme designers who have built themes for other systems. The six ideas that make an Exponential theme different, each in a few sentences, with the page that explains it in depth. Theme designers Theme design
From mockup to theme The workflow from a design in a design tool to a working Exponential theme - seven stages, who does what in each, what each stage hands to the next, and where the technical steps are documented. Theme designers Theme design
Mapping a design to content classes How theme designers turn mockups into a map of content classes, fields and view modes - reading a class, what each common datatype can look like, a mapping sheet to fill in, and what to ask the developer when a field is… Theme designers Theme design
Designing with real content Why and how theme designers draw with the content an Exponential site really holds - where to get it, how to measure the extremes, a set of stress cases, and how to test a design against content on a development… Theme designers Theme design
Designing for editors Design rules that keep an Exponential theme working when editors, not designers, fill it - variable text length, optional fields, images of any shape, rich text, translations, and the field descriptions that guide… Theme designers Theme design
Designing view modes How theme designers plan the views of each content class - full, line, embed, embed-inline and custom modes such as card - with a view matrix, how few modes a design really needs, and what to hand the developer. Theme designers Theme design
Designing content listings and cards How theme designers design lists, grids and cards for Exponential content - folder lists, mixed classes in one list, sort order set by editors, pagination, cards with and without images, and the accessibility of… Theme designers Theme design

Documentation license

This documentation is free documentation, licensed under the GNU Free Documentation License 1.3 or later.

Exponential Copyright © 1998-2026 Exponential Foundation and 7x