Do you use a template as a basis for different projects and would you like to design some parts differently in just one project? Maybe you wondering how to create a Joomla template that can be used as a parent template for a child template. For our project we have chosen the Cassiopeia default Joomla 4 template. We've created a new Cassiopeia Child-template and added some great features as well.

A child template works exactly the same as any other template except that it uses all the code, PHP, CSS and JavaScript of its parent Cassiopeia template.

Default layout of Template Cassiopeia after installing Sample Data.

Demo data is included in the Joomla 4 installation.If you are just starting to use Joomla 4, then installing the sample data will give you a great preview of how the Cassiopeia template can be used.

Joomla 4 Cassiopeia Template

 

Brand new Child-template, based on Cassiopeia default Joomla 4 template

LIVE DEMO https://cassiopeia.linelab.org

Joomla 4 Cassiopeia Child-Template Linelab

 

We tested the performance, accessibility and SEO of the new Child-Template. The results are excellent. We used the Lighthouse tool for testing. Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

SEO

 New features & changes

New positions called "cart" and "top-c" have been added. In the image below you can see the complete list of module positions.

 

The admin area of the template was also modified, it was necessary to add language translations to the file "administrator/language/overrides/en-GB.override.ini"

TPL_CASSIOPEIA_HEAD_LABEL="Heading Font"
TPL_CASSIOPEIA_CSSANIMATE_LABEL="Animate CSS"
TPL_CASSIOPEIA_OWL_LABEL="Swiper Touch Slider"
TPL_CASSIOPEIA_C1="Color 1"
TPL_CASSIOPEIA_C2="Color 2"
TPL_CASSIOPEIA_C3="Color 3"
TPL_CASSIOPEIA_C4="Color 4"
TPL_CASSIOPEIA_C5="Color 5"
TPL_CASSIOPEIA_BACKGROUND="Background Color"
TPL_CASSIOPEIA_BACKGROUND_IMAGE="Background Image"
TPL_CASSIOPEIA_BG_IMAGE="Image"
TPL_CASSIOPEIA_TEXT="Text Color"
TPL_CASSIOPEIA_LINK="Link Color"
TPL_CASSIOPEIA_HOVER="Link Hover Color"
TPL_CASSIOPEIA_HOVER_LABEL="Menu Hover"
TPL_CASSIOPEIA_FONT_BODY="Font weight - Body"
TPL_CASSIOPEIA_FONT_HEAD="Font weight - Heading"
TPL_CASSIOPEIA_BTN_CARD="Buttons and Card"
TPL_CASSIOPEIA_BTN="Primary Button"
TPL_CASSIOPEIA_CARD="Card"
TPL_CASSIOPEIA_BTN_BG="Button Background"
TPL_CASSIOPEIA_BTN_HOVER="Button Hover Background"
TPL_CASSIOPEIA_BTN_TEXT="Button Text"
TPL_CASSIOPEIA_BTN_TEXT_HOVER="Button Text Hover"
TPL_CASSIOPEIA_CARD_HEAD_BG="Card Header Background"
TPL_CASSIOPEIA_CARD_HEAD_BORDER="Header Bottom Border"
TPL_CASSIOPEIA_CARD_BG="Card Body Background"
TPL_CASSIOPEIA_CARD_BG_BORDER="Card Body Border"

New web fonts "Poppins" and "Montserrat" have been added. In the template settings, you can choose a different font for the "Heading" <h1>, <h2>, <h3>, <h4>, <h5> and <h6> and the template body. You can also set the "font weight" for the headings.

Optionally, you can also use the Animate.css library for various effects.
A new "Hover menu" function has been added. Those who don't care so much about the accessibility of the site can use the function.
Support for Swiper Touch Slider has been added. Swiper library is also used by Phoca Cart, so there is no need to load it from the component.

 A new Alternate Off-canvas  Layout for the Menu Module has been added.

Alternate Layout for the Menu Module

You can add your own custom Color scheme - Color palettes for a specific section like text color, link color, background color, button color, etc.. You can add custom Background image.

Custom colors

 Custom Background image

 

How to Install a Joomla Child Template

Create a "Child Template" for the default Cassiopeia template. In the left column of the Joomla administration, click "System > Site Templates > Cassiopeia Details and Files > Create Child Template". Watch the video. Enter a name for the Child template. We used the name "demo".

Download the package, unzip and upload all files to the sub-template folders "media/templates/site/cassiopeia_childtemplatename" and "templates/cassiopeia_childtemplatename".  Set Child template as default and save the template style settings.

Customize the Cassiopeia Child-Template and try out the new features.

LIVE DEMO https://cassiopeia.linelab.org

Download: https://www.linelab.org/support/joomla-4-template-cassiopeia-customization-child-template