Joomla Template Development
Joomla Template Development is a course in customising and building templates on Joomla 6, from adapting Cassiopeia with child templates and overrides to turning HTML and CSS into a template with the Web Asset Manager and template parameters. It suits people who look after Joomla websites and web developers, and you leave with your own installable template.
- Duration18 hours · 3 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
Joomla is still the open source CMS behind many websites in government agencies, schools and organisations. The whole look of a site depends on its template, yet many sites still run old templates that cannot be upgraded, or have edits made directly to the core template that are overwritten at the next update. Site maintainers therefore need to understand how templates work in current Joomla, both to customise safely and to build their own.
This course works on Joomla 6. It starts with how the template system works and how to customise Cassiopeia, the default template, through template styles, user.css, child templates and overrides. Learners then build their own template from modern HTML and CSS, write templateDetails.xml, manage CSS and JavaScript with the Web Asset Manager, and add template parameters and module chrome. They go on to style the standard components, check accessibility and speed and package the template as a ZIP file, and finish with a workshop that builds a template with its own identity. (3 days, 6 hours per day, 18 hours in total, Beginner level.)
What you’ll gain
- Understand templates, template styles and module positions in Joomla 6
- Customise Cassiopeia safely with user.css, child templates and overrides
- Turn an HTML and CSS page into a Joomla template that installs and works
- Manage CSS and JavaScript with the Web Asset Manager and add template parameters
- Style menus and standard components so they work on mobile and follow accessibility principles
- Package, install and maintain a template so it works on both Joomla 6 and Joomla 5
Who this course is for
- People who look after Joomla websites in government agencies, schools and organisations
- Web developers who build Joomla templates for clients or their organisation
- Joomla beginners who want their site to have a distinctive look
- Anyone moving an old Joomla site who needs a new template
Prerequisites
- Basic HTML and CSS; a refresher is given if you are not yet confident
- Some experience of the Joomla administrator helps you learn faster
- No PHP programming is needed, as only the statements a template uses are covered
- Able to install and uninstall software on Windows or macOS
Curriculum
Course Details
This course is the 2026 edition of Joomla Template: Creating and Editing Custom Templates, rewritten from scratch for Joomla 6 and its default Cassiopeia template. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures with a lab in every topic. Beginner level. Day 1 covers the template system and safe customisation of Cassiopeia with template styles, user.css, child templates and overrides. Day 2 builds your own template from an
HTML and CSS page, with templateDetails.xml, the Web Asset Manager, template parameters and module chrome. Day 3 styles the standard components, checks accessibility and speed, packages the template as a ZIP file and ends with a workshop that builds your own template. The same template structure also works on Joomla 5, which has received security fixes only since October 2026, and the instructor points out what to check there. Learners take home starter files and finished templates for every lab.
Day 1 The Template System and Customising Cassiopeia
Section 1: Lab: Preparing the Tools and Installing Joomla 6
- Joomla versions today: Joomla 6 and sites still running Joomla 5
- Install Joomla 6 on Docker, Laragon or XAMPP with PHP 8.3
- Set up VS Code and browser DevTools for template work
- Create sample content and menus to test templates against
- Lab: install a Joomla 6 site to use throughout the course
Section 2: Understanding the Joomla Template System
- Site and administrator templates: Cassiopeia and Atum
- How a template differs from a template style
- The main files: index.php, templateDetails.xml, error.php, offline.php and component.php
- The templates and media folders for CSS, JavaScript and images
- Module positions and the jdoc:include statement
Section 3: Lab: Customising Cassiopeia with Template Styles
- Set the logo, site name, colours, fonts and layout width
- Add your own CSS and JavaScript with user.css and user.js
- Use CSS custom properties to change colours across the site from one place
- Edit files safely in the Template Manager or VS Code
- Lab: restyle Cassiopeia in your organisation's colours and fonts
Section 4: Lab: Child Templates
- What a child template is, and why Joomla updates no longer overwrite your changes
- Create a child template from Cassiopeia
- Override only the files you need and inherit the rest from the parent
- Lab: build a child template with a new site header and footer
Section 5: Lab: Template Overrides and Layout Overrides
- Create component and module overrides from the Template Manager
- The html folder structure, and changing the article and category blog pages
- Alternative layouts that can be chosen per menu item or per module
- Layout overrides in html/layouts, and checking overrides after an update
- Lab: redesign the article page to show the author, date and images in a new way
Day 2 Building Your Own Template from HTML
Section 6: Lab: Designing a Layout with Modern HTML and CSS
- A semantic HTML page: header, nav, main, aside and footer
- Layouts with CSS Grid and Flexbox
- Mobile-first responsive design and media queries
- Inspect and fix CSS with browser DevTools
- Lab: build a multi-column starter HTML page
Section 7: Lab: Turning HTML into a Joomla Template
- Change index.html to index.php and add the file header Joomla needs
- Insert metas, styles, scripts, messages and the component with jdoc:include
- Place module positions and hide empty columns with countModules
- Add a favicon and set the page language
- Lab: show real Joomla content in the new template
Section 8: Lab: templateDetails.xml and the Web Asset Manager
- Write templateDetails.xml: template details, files, media and positions
- Register CSS and JavaScript in joomla.asset.json
- Use assets and their dependencies from index.php
- Use only the parts of the Bootstrap 5 bundled with Joomla that you need
- Lab: install the template from a folder and make it the default
Section 9: Lab: Template Parameters
- Add settings to templateDetails.xml, such as the logo, colours and layout options
- Read parameters in index.php and change the design accordingly
- Language files for setting labels and descriptions
- Lab: let site maintainers change the main colour and logo from the back end
Section 10: Lab: Module Chrome and Module Placement
- Built-in module styles and choosing one in the module settings
- Create your own module chrome in html/layouts/chromes
- Module class and header class for styling individual modules
- Show modules inside content and only on selected pages
- Lab: create card-style and highlight-bar module boxes
Day 3 Styling, Quality Checks and Delivering the Template
Section 11: Lab: Styling Menus and Standard Components
- A dropdown main menu and a mobile menu
- Breadcrumbs, pagination and system messages
- Category list, blog and article pages
- Contact, login and search forms
- Lab: give every main page of the sample site a consistent style
Section 12: Lab: Several Template Styles by Menu Item
- Create several template styles from one template
- Give the home page a different layout from other pages by menu item
- Design error.php for 404 pages and the offline.php page
- Lab: build a landing-page home page and inner pages with a sidebar
Section 13: Template Quality: Accessibility and Speed
- Accessibility basics: colour contrast, heading order and keyboard use
- Dark mode with prefers-color-scheme
- Smaller images and CSS files, and loading scripts with defer
- Check with Lighthouse and fix the low-scoring areas
- Heading structure and HTML that support SEO
Section 14: Lab: Packaging, Installing and Maintaining a Template
- Organise the files and zip them into a package with a template version
- Install on a new site and fix common installation problems
- Update a template without overwriting users' settings
- Check the template on Joomla 5 sites still in use, and prepare those sites to move to Joomla 6
- Lab: install your own template on a freshly installed site
Section 15: Workshop: A Template with Its Own Identity
- Choose a brief for an agency, shop or school site and sketch the layout
- Build a template with parameters, module chrome and overrides
- Test on mobile, check accessibility and package it as a ZIP file
- Present the work and get feedback from the instructor
Schedule & training options
For individuals — public rounds
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
For organisations — in-house / private
- Tailor the content to your team’s tools and projects
- Your dates, at your office or live online
- Quotation with tax ID for procurement
Instructors
Frequently asked questions
What files make up a Joomla template?
A Joomla 6 template centres on index.php, the page skeleton that places modules and the component; templateDetails.xml, which declares the name, version, files, module positions and settings; and joomla.asset.json, which registers CSS and JavaScript for the Web Asset Manager to load. It may also include error.php, offline.php, an html folder for overrides, and CSS, images and JavaScript in the media folder. Zipped together, it installs from the administrator.
How do you turn an HTML page into a Joomla template?
Finish the page design in HTML and CSS first. Rename index.html to index.php and replace the parts that change from page to page with jdoc:include statements for the component, modules, system messages, and CSS and JavaScript. Write templateDetails.xml listing the files and module positions, register the CSS and JavaScript in joomla.asset.json, then zip it and install it from the administrator. The course practises every step until the template installs and can be customised.
Should I edit a default template such as Cassiopeia directly?
No. When Joomla updates, Cassiopeia's files are overwritten and your changes are lost. The safe options are to use the template style settings, add CSS and JavaScript in user.css and user.js, create a child template when you need to change template files, and use template overrides to change how articles or modules look. The course practises all three and explains when to use each.
Who is the Joomla Template Development course for, and what should I know beforehand?
It suits people who look after Joomla websites, web developers who build templates for clients or their organisation, and Joomla beginners who want their site to have its own look. Basic HTML and CSS is expected, with a refresher provided. You do not need to program in PHP, as only the statements a template uses are covered.
What will I be able to do after the Joomla Template Development course?
You will be able to customise Cassiopeia safely with user.css, child templates and overrides, turn HTML and CSS into a Joomla 6 template, add template parameters and module chrome, style the standard components for mobile, and package a template as a ZIP file and install it on a live site, leaving with a template of your own. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Can the Joomla Template Development course be run in-house for our team?
Yes. It can be run in-house for your team, with examples adapted to your own work, such as using your organisation's design and Joomla website as the brief for building the template. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.
Related articles
Articles are published in Thai.