User Documentation Templates control how a Joomla site looks: the layout, colours, module positions, and every other visual element are defined by the template that's assigned to it. Joomla ships with two templates, Atum for the administrator and Cassiopeia for the front end, and both can be customised or replaced.
This section covers the basics of how templates work, ways to customise Cassiopeia and build on it safely, replacing its default branding, and some practical tips for varying a site's look from page to page.
Getting Started with Templates
What a template is and how to start shaping Cassiopeia's look using its built-in options.
- Template Basics – What a Joomla template is, the two templates every site starts with (Atum for the administrator, Cassiopeia for the front end), and the customisation options covered elsewhere in this section.
- Cassiopeia Customisation – Using Cassiopeia's built-in style options and a custom CSS file to change branding, colours, and layout without editing template code directly.
Customising Templates
Ways to change a template's output and structure beyond its built-in options, from overriding how one extension renders to building a template that survives updates.
- Template Overrides – Copying and modifying an extension's output files to change its markup, using a login module override as a worked example.
- Template Layouts – Creating alternative layouts for modules, components, categories, and menu items so different instances can look different.
- Child Templates – Building a template that inherits from Cassiopeia and overrides only the files you change, so template updates don't overwrite your customisations.
- Cassiopeia templateDetails.xml – The XML file that defines a template's metadata, module positions, language support, and configurable options.
Branding and Icons
Replacing the default icons and logo Joomla ships with to match your site's brand.
- Favicons – Creating and installing the small icon shown in browser tabs, in the SVG and ICO formats Joomla expects.
- Template SVG Logos – Designing a custom vector logo in Inkscape and configuring Joomla to use an SVG file as the site's brand graphic.
- Standard Icons – Using the Font Awesome icon set built into Cassiopeia and Atum, and finding an icon's name from the full library.
Template Tips
Practical techniques for varying a site's look from page to page rather than site-wide.
- Switching Templates – Setting a site's default template style and assigning a different one to specific pages via menu items.
- Home Page in Different Style – Giving the home page its own look using module assignments, custom styles, overrides, or a child template.
- Module and Menu Styles – Adding custom CSS classes to individual modules or menu items and styling them in the user.css file.