Customising a Joomla Template With Overrides and Child Templates

Woman developer

Most Joomla sites start with a template that is close to right but not quite there. You might want a different header, an extra module position or a cleaner article layout. The quick fix is to open the template files and start editing. That works until the template or Joomla itself gets an update and your changes vanish.

Joomla gives you two safer tools for this job. Layout overrides change how a module, component or layout displays its output. Child templates let you change a template while leaving the parent intact. Used together, they keep your design work apart from code that someone else maintains.

Why editing template files directly causes trouble

A template is a set of files that someone else wrote and will keep improving. When the developer releases a new version, the installer replaces those files with fresh copies. Any line you changed by hand is gone at that point. The same applies to core Joomla files, which get replaced during upgrades.

The Joomla documentation makes this point about small layout files called JLayouts. It says you should not edit them directly because changes would be overwritten during any core upgrade. The fix it recommends is to copy the file into your own template and edit the copy. That idea sits behind both overrides and child templates.

There is a design benefit too. When your changes live in their own files, you can see exactly what you have customised. A new developer can pick up the site and find the custom work quickly. Clean structure behind the scenes is part of good modern business website design, even if visitors never see it.

How layout overrides work

An override is a copy of an output file placed inside your template, which you then edit. Joomla uses that copy to display the matching module, component or layout on pages using that template. The original file stays untouched in its usual place. You only copy the pieces you want to change.

The files live in a folder called html inside the template. According to the Joomla documentation on layout overrides, a module override goes in a path such as templates/yourtemplate/html/mod_login/. A component view follows the same pattern, for example templates/yourtemplate/html/com_content/article/. Small JLayouts go in templates/yourtemplate/html/layouts/, which mirrors the core layouts folder.

The documentation also advises copying only the files you need. Copying everything adds clutter, which it describes as site bloat. A lean set of overrides is easier to check after each upgrade. If a core layout changes in a later version, you only have a handful of files to compare.

Alternative layouts

Alternative layouts are a close cousin of overrides. A standard module override applies wherever that module appears on your template. An alternative module layout only runs when you select it in the module settings. That lets you style one module differently without touching the others.

The documentation notes that alternative module layout file names must not contain underscores. It also warns that the administrator is responsible for checking the layout works on every template where the module appears. For component and category layouts, a menu item setting takes priority because the most specific setting wins. Keep a short note of which layouts you have assigned so they are easy to find later.

What a child template adds

Overrides handle output from modules and components. A child template handles the template itself. It builds on a parent and uses all of the parent’s files except any files of the same name you place in the child. You add only what you want to change.

The Joomla documentation on child templates uses Cassiopeia as the example parent. It says a new child starts with a single file, templateDetails.xml. You can edit that file to change settings such as template positions. From there you can add your own CSS file, or an index.php file to add extra module positions.

The documentation also states that child template files are not affected by Joomla updates. Because the child only holds your changes, the parent can still be updated as normal. Files you have not replaced keep coming from the parent. You get fixes from the template developer while your custom work stays put.

Creating a child template

The steps in the documentation are short. Go to System, then Site Templates and open the parent template. Choose Create Child Template, fill in the dialog and confirm. Then close the parent and open the new child, which is where your custom files will go.

To add custom styles, choose New File, pick the css folder and name the file user with the css file type. Add your styles, then save and close. Finally, create a menu item that uses the child template style so your pages pick it up. You can rename the style in Site Template Styles so it is easy to spot.

Planning your changes before you start

A little planning saves a lot of rework. List the changes you want and sort them by where they belong. Visual tweaks such as colours, fonts and spacing usually go in a CSS file in the child template. Changes to what a module or article prints go in an override.

Think about the visitor before the code. Changes that make pages faster to read, easier to scan or clearer to act on tend to pay off. Our guide to web design improvements that boost sales covers the kind of changes worth doing first. Start with the ones that affect the most pages.

Test on a copy of the site before you change the live one. Some hosts offer a staging copy, and good Joomla hosting makes that step simpler. Check pages on a phone and a desktop after each change. Keep a simple log of each file you added and why.

Checking your work after updates

Overrides and child templates protect your changes, but they still need care. When Joomla or the parent template updates, the original files you copied may change. Your override keeps the old version, which can miss a fix or a new feature. A quick comparison after major upgrades keeps things in step.

Work through your override folder one file at a time. Compare each file with the current original and copy across anything new that matters. Then check the pages that use it on a test copy. If the job looks too involved, our tips on finding the best web design services can help you pick someone to handle it.

Frequently asked questions

Will a template update wipe out my overrides?

That depends on where they live. Overrides kept in a child template are the safer option, because the documentation states child template files are not affected by Joomla updates. Changes made inside a third party template you later update could be replaced, so a child template is the better home.

Do I need to know PHP to create an override?

Many overrides are small changes to markup, so basic HTML gets you a long way. Override files are PHP files, though, so some care is needed. Change one thing at a time and test it before moving on.

Can I use a child template with any Joomla template?

The documentation for this feature sits in the Joomla 4 section and uses Cassiopeia as the example parent. Templates from other developers may work differently. Check your template’s notes or ask its developer before you build on it.

Should colour and font changes go in an override?

Usually not. Styling changes belong in a CSS file such as user.css in a child template. Save overrides for changes to the HTML that a module, component or layout outputs.