Joomla 6 is out and it brings a great example of a Child Template with new options for colors and font sizes. 

With Joomla 4.0 we got Cassiopeia as standard template and since 4.1 we can create child templates: a copy of the template where you can add as many changes as you want while it still inherits all functionality from the parent.

One of the key goals for Joomla 6 was to enhance the Cassiopeia template and simplify its customization. To ensure compatibility with existing websites, Joomla 6 introduces a child template based on Cassiopeia, featuring new configuration options.

What’s new?

When you install or update to Joomla 6, you will find a new template installed: Cassiopeia Extended

In the template style there are two new tabs available: Colour Settings and Font Settings

In the Colour Settings you can modify:

• Header Background
• Header Text
• Body Background
• Body Text
• Links
• Links Hover
• Button Primary Background
• Button Primary Hover Background
• Button Primary Text
• Button Primary Hover Text
• Footer Background
• Footer Text

In the Font Settings you can select the Font Scheme (in Cassiopeia you find this setting in the Advanced tab) and change the font size for

• Body
• H1
• H2
• H3

How does it work?

If you go to System -> Templates -> Site Templates and click on “Cassiopeia_extended Details and Files”, you will see that the child template has not only a templateDetails.xml file, but also several PHP files: index.php, error.php, offline.php and component.php.

These files aren’t complete overrides of the parent files in Cassiopeia; they extend them with the new options.

For example the index.php looks like this:

<?php

/**
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia_extended
 *
 * @copyright   (C) 2025 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

/** @var Joomla\CMS\Document\HtmlDocument $this */

require JPATH_THEMES . '/cassiopeia/index.php';

$wa = $this->getWebAssetManager();

// Advanced Color Settings
$wa->registerAndUseStyle('colors_custom', 'global/colors.css')
    ->addInlineStyle(':root {
        --body-bg: ' . $this->params->get('bodybg') . ';
        --body-color: ' . $this->params->get('bodycolor') . ';
        --btnbg: ' . $this->params->get('btnbg') . ';
        --btnbgh: ' . $this->params->get('btnbgh') . ';
        --btncolor: ' . $this->params->get('btncolor') . ';
        --btncolorh: ' . $this->params->get('btncolorh') . ';
        --footerbg: ' . $this->params->get('footerbg') . ';
        --footercolor: ' . $this->params->get('footercolor') . ';
        --headerbg: ' . $this->params->get('headerbg') . ';
        --headercolor: ' . $this->params->get('headercolor') . ';
        --link-color: ' . $this->params->get('linkcolor') . ';
        --link-hover-color: ' . $this->params->get('linkcolorh') . ';
    }')

    // Advanced Font Settings
    ->registerAndUseStyle('font_advanced', 'global/fonts.css')
    ->addInlineStyle(':root {
        --body-font-size: ' . $this->params->get('bodysize') . 'rem;
        --h1size: ' . $this->params->get('h1size') . 'rem;
        --h2size: ' . $this->params->get('h2size') . 'rem;
        --h3size: ' . $this->params->get('h3size') . 'rem;
    }');

The file loads the original index.php from Cassiopeia (that’s what “require” means):

require JPATH_THEMES . '/cassiopeia/index.php';

and afterwards adds new CSS files (colors.css and fonts.css) and inline styles to use the new options.

The colors.css file contains definitions like this:

.container-header {
  background-color: var(--headerbg);
  background-image: none;
}

These two lines of CSS change the background color of the header, using the color you choose in the Colours Settings. All these colors and font sizes are defined as CSS variables (--body-color, --btnbg, etc.), so you can use them in your user.css file too. For example, if you want to use the link color as background color for a card header:

you can add something like this into your user.css:

.card-header {
  color: #fff;
  background-color: var(--link-color);
}

and the card would look like this:

What is coming?

Child templates offer a powerful way to enhance an existing template without starting from scratch. Cassiopeia Extended is a compact example that showcases what’s possible using this approach. If you would like to expand the child template with additional options, you will currently need to duplicate it manually. However, Joomla 6.1 is set to introduce a built-in copy function, so if you can hold off a bit longer, easier customization is just around the corner. Stay tuned!

Further readings

https://magazine.joomla.org/all-issues/january-2021/joomla-4-cassiopeia-template

https://magazine.joomla.org/all-issues/may-2022/a-deep-dive-into-joomla-child-templates