Theme design: course overview
Theme design is the course for people who change how Exponential looks. Learners start by reading how a page finds its
templates, then build a theme extension of their own, training_theme, and take it all the way: its pagelayout and
overrides, stylesheets and scripts through the packer, a block in the administration built to the admin4 styling
rules, accessibility and right-to-left support, icons, metadata, an .ezpkg export, a Git repository with a
composer.json, a license inventory and a first release in a local repository.
Who it is for
- Designers and front-end developers who build or adapt themes for sites made with Exponential.
- Developers who build administration pages for extensions and must follow the admin4 styling rules (modules 4 and 6 can be taught on their own to them).
- Agencies preparing to publish or sell themes (modules 7 and 8).
Outcome
After the course, learners can read the design chain of any siteaccess and find the template behind any markup; create and switch on a theme extension; write a pagelayout, overrides and safe cache blocks; deliver stylesheets and scripts through the ezjscore packer and keep a theme ready for a Content Security Policy; build administration markup from the shared components and tokens that work in dark mode and forced colors; make and test an accessible, right-to-left-safe theme; ship icons; and package, license and release a theme without ever moving a published tag.
Format and length
| Lessons | 30 lessons in 8 modules |
| Lesson time | 24 hours 15 minutes (presenting and exercises) |
| With breaks | about 25 hours 45 minutes, as in the modules' timing plans |
| Format | Classroom with a projector, or online with screen sharing; every learner at their own computer with a shell |
| Group size | Up to about 10 learners per trainer: most exercises change files, and the trainer checks screens and sources |
| Level | Beginner to advanced, rising through the modules |
Prerequisites
- Learners: HTML and CSS; basic use of a shell and a text editor; Git basics for module 7. The template language is introduced where it is needed; the developers course (Developers, in this section of the help) teaches it in full.
- Trainer: experience building a theme extension on the version they teach, and the train-the-trainer course or equivalent experience (Train the trainer: course overview).
Lab setup
- One installation per learner, because learners create extensions, change settings and activate and deactivate
extensions. Install each with
php bin/php/console exp:install --apply(7. The console install) using a package with demo content, so folders, articles and images exist (Choosing the site package for a class). How to build, serve and reset a lab: Module 2: Building the training lab. - An administrator account per learner with
setup/setup(for Setup > RAD) anduiswitch/design, its e-mail address atexample.invalid. Never the shared administrator of a real site. - The administration siteaccess in
admin4(oradmin4l) for modules 4 to 6. - On every learner computer: a current Chromium-based browser with developer tools, an axe-based accessibility
checker, Git,
xmllint, and if possible Composer. - For lesson 4.5, one development checkout with the development dependencies (
vendor/bin/phpunit). - No real mail and no remote repositories: nothing in the course is published.
Modules
| Module | Lessons | Duration | Topics |
|---|---|---|---|
| Module 1: Designs and the fallback chain | 4 | 3 h 10 min | Design folders, the chain of a siteaccess, template path comments, site and administration designs |
| Module 2: Templates, overrides and the pagelayout | 4 | 4 h 5 min | The design extension wizard, the pagelayout, override.ini, cache blocks |
| Module 3: Stylesheets and scripts through the packer | 4 | 2 h 55 min | design.ini lists, the ezjscore packer, the clear routine, Content Security Policy |
| Module 4: Styling the administration | 5 | 4 h 35 min | The styling rules, shared components, tokens and dark mode, forced colors, review and tests |
| Module 5: Accessibility and right to left | 4 | 3 h 40 min | The project's status, an accessible frame, testing, right to left |
| Module 6: Icons | 2 | 1 h 30 min | Icon themes in an extension, admin4 icons |
| Module 7: Packaging a theme | 4 | 3 h 10 min | Metadata, activation and loading order, .ezpkg and Composer, Git |
| Module 8: Licensing and releasing | 3 | 2 h 40 min | Licenses, versions and permanent tags, changelog, release notes, checklists |
Reading path
For a trainer preparing the course, in this order:
- Templates and design: change what a page looks like: the whole technical base in one guide.
- Designs, siteaccesses and the design fallback chain, The pagelayout, Template overrides for site builders and View cache and cache blocks.
- Stylesheets and scripts for your site and Content Security Policy.
- Styling the administration and The admin4 design: read the first one completely; modules 4 and 6 depend on it.
- Accessibility standards, Accessibility for site builders and Right-to-left languages in the administration.
- Icon themes in extensions.
- The designers' guides: Theme extensions: start here, Distributing a theme: start here and The life cycle of a theme.
- Then the modules in order: each module's overview first (its preparation list and timing plan), then its lessons.
Build
training_themeyourself once on a lab installation, exactly as the exercises describe.
Suggested schedules
Lesson times add up to 24 hours 15 minutes; the schedules add breaks and a short daily review.
Four full days
| Day | Morning | Afternoon |
|---|---|---|
| 1 | Module 1 | Module 2 |
| 2 | Module 3 | Module 4 (lessons 4.1 to 4.3) |
| 3 | Lessons 4.4 and 4.5, Module 6 | Module 5 |
| 4 | Module 7 | Module 8, open questions |
Module 6 comes before module 5 on day 3 because its exercises continue the dashboard block of module 4.
Eight half days (for example one a week)
| Half day | Modules |
|---|---|
| 1 | Module 1 |
| 2 | Module 2 |
| 3 | Module 3 |
| 4 | Module 4, lessons 4.1 to 4.3 |
| 5 | Lessons 4.4 and 4.5, Module 6 |
| 6 | Module 5 |
| 7 | Module 7 |
| 8 | Module 8 |
Between half days, learners keep their installation and training_theme; every module builds on the last.
Two days for administration pages only
For developers who build admin pages for extensions: lessons 1.1, 1.4, 2.1, 3.1, 3.3, all of module 4, lesson 5.4 and module 6 (10 hours 30 minutes of lessons).
Assessing learners
- Each lesson's quiz and expected result check understanding during the course; the peer review of lesson 4.5 and the checklists of lesson 8.3 are practical checks.
- The finished
training_themeis a natural final task: it should pass the review checklist of lesson 4.5 and the "theme extension is ready" checklist of lesson 8.3. - The Assessments course has further material. All assessments are the trainer's own assessment, not an official certification; the partner program's certifications are separate (Certifications).
Related pages
- Trainers: start here
- Course catalogue
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.