Module 3: Stylesheets and scripts through the packer
A theme's look lives in its stylesheets and its behavior in its scripts. In Exponential both are named in
design.ini and delivered by the ezjscore packer, never linked by hand. In this module learners add files to
training_theme the Exponential way, compare packed and unpacked pages, learn the three caches that remember an old
stylesheet, and remove every reason for inline code so their theme can run under the shipped Content Security Policy.
At a glance
| Course | Theme design |
| Duration | 2 hours 55 minutes (with one 10-minute break) |
| Lessons | 4 |
| Level | Beginner to intermediate |
Lessons
| Lesson | Duration | What learners do |
|---|---|---|
| Lesson 3.1: Listing stylesheets and scripts in design.ini | 45 minutes | Add training.css to the frontend list, require article.css from one template |
| Lesson 3.2: The ezjscore packer | 45 minutes | Switch the packer off and on for one siteaccess, find a packed file and read its name |
| Lesson 3.3: After a stylesheet change | 30 minutes | Run the clear routine, hard reload, compare the packed names |
| Lesson 3.4: A theme ready for a Content Security Policy | 45 minutes | Read a report-only violation, replace inline code with classes, data attributes and a script file |
Preparing this module
- Learners'
training_themefrom module 2 working on their public siteaccess, with the skip link and breadcrumb of lesson 2.2. - A browser with developer tools (console and network panel) on every learner computer; show where they are before lesson 3.4.
- Check on a copy of the lab that
extension/ezjscore/settings/ezjscore.inihasPackercommented out and thatDevelopmentModeisdisabled, so the packer is on at the start of lesson 3.2. - If the lab runs on Velocity, have
php bin/php/console exp:velocity cache clear --applyon the board for lesson 3.3.
Timing plan
| Part | Minutes |
|---|---|
| Lesson 3.1 | 45 |
| Lesson 3.2 | 45 |
| Break | 10 |
| Lesson 3.3 | 30 |
| Lesson 3.4 | 45 |
| Total | 175 |
Related pages
- Module 2: Templates, overrides and the pagelayout
- Theme design: course overview
- Trainers: start here
- 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.