Customize Cassiopeia in Joomla 6: colors, logo, positions, child template

Cassiopeia is the default Joomla 6 site template, and you can change most of it without touching code. The template style’s Advanced tab sets the logo, a Standard or Alternative color theme, the fonts and a fluid or static layout. Custom CSS goes in a user.css file, and bigger changes go in a child template so a Joomla update does not undo them. To try every step below without risk, you can open a Joomla 6 test site, which runs Cassiopeia out of the box.

What is Cassiopeia in Joomla?

Cassiopeia is the front-end template Joomla installs by default. It has been the default since Joomla 4.0, which the Joomla downloads page for 4.0.0dates to 17 August 2021, and it is still the default in Joomla 6, as the Joomla Community Magazine’s December 2023 article “Cassiopeia, Joomla’s powerful built-in template” explains. The October 2025 Joomla 6.0 release announcementstill calls it “the default frontend template (Cassiopeia)”. Its description in the Cassiopeia language file on GitHubplaces it in Joomla’s space-themed line of templates, after Solarflare, Milkyway and Protostar, and says it is based on Bootstrap 5.

In Joomla 6.1 that means Bootstrap 5.3: the joomla-cms package.json on the 6.1-dev branch pins Bootstrap at ^5.3.8, alongside Font Awesome 6.7. Joomla 6.0 also added a core child template, Cassiopeia Extended, covered below. Joomla itself runs about 1.1% of all websites, per W3Techs’ Joomla usage statistics in October 2026, and every fresh Joomla 4, 5 or 6 install starts on Cassiopeia.

Where do you find Cassiopeia’s settings?

Cassiopeia’s settings live in its template style, not in its files. Open System, then Site Template Styles, and click Cassiopeia - Default. The Advanced tab holds every option the template has. The Menu Assignment tab lets you give some pages a different style, so you can run two Cassiopeia styles with different colors on one site.

The files live elsewhere: System, then Site Templates, then Cassiopeia Details and Files opens the template editor, where you create user.css, overrides and child templates. The Advanced tab fields come straight from the Cassiopeia templateDetails.xml on the 6.1-dev branch:

How do you change Cassiopeia’s colors?

Cassiopeia has two built-in color themes and no color picker. On the Advanced tab, set Colour Theme to Standard or Alternative. The Joomla user guide’s Cassiopeia template customisation page describes Standard as a dark blue background for the brand bar and Alternative as a maroon one. For any other color you have two options.

The first is Cassiopeia Extended, new in Joomla 6.0. It is a child of Cassiopeia that ships with Joomla and adds color pickers for the header background and text, body background and text, links and link hover, the primary button, and the footer, plus font sizes for the body and H1 to H3. Viviana Menzel walks through it in the Joomla Community Magazine’s October 2025 article “Cassiopeia’s child learns to dress itself”. Open its style, Cassiopeia Extended - Default, under Site Template Styles, switch on its Colour Settings, and make it the default.

The second is CSS. Cassiopeia defines its colors as CSS custom properties in the colors_standard.scss source file, so a few lines in user.css recolor the whole site:

:root {  --cassiopeia-color-primary: #0b5d3b;  --cassiopeia-color-hover: #08422a;  --link-color: #0b5d3b;  --link-color-rgb: 11, 93, 59;  --link-hover-color: #08422a;  --link-hover-color-rgb: 8, 66, 42;}

--cassiopeia-color-primary colors the header and the primary accents. The source file marks the older --cassiopeia-color-link variable as deprecated in favor of --link-color, so set the newer name. The file defines an -rgb version of each link color next to the hex value, so set both to keep them in step.

How do you add a logo, title and tagline?

Set Brand to Yes, then choose an image in the Logo field from the media manager, and Cassiopeia shows it in the header. If you leave Logo empty, the Title (alternative to logo) text appears instead. With neither set, the template falls back to the Joomla logo it ships with, which is why a fresh site shows it. That order is set in Cassiopeia’s index.php on GitHub, which also wraps the logo in a .brand-logo link. Tagline adds a line under the logo or title. Set Brand to No to hide the whole block, for example when a module in the below-top position carries your branding.

An SVG logo stays sharp at every size and is usually the smallest file. Upload it first in Content, Media, then pick it in the Logo field. If the logo looks too large, constrain it in user.css with a rule such as .brand-logo img { max-height: 48px; }, rather than editing the image.

How do you change fonts in Cassiopeia?

Use the Fonts Schemefield on the Advanced tab. It offers None (the browser default), Roboto loaded from the site’s own files, Fira Sans or Roboto with Noto Sans from Google Fonts, and System Fonts. System Fonts arrived in Joomla 5.0: the Joomla 4.4.0 templateDetails.xml has no such option, and the Joomla 5.0.0 templateDetails.xml adds it with separate body and heading font stacks.

In the current Joomla 6.1 templateDetails.xml, the System Fonts choice gives you 14 named stacks, from Neo-Grotesque and Humanist to Slab Serif and Monospace Code. They use fonts already on the visitor’s device, so nothing is downloaded. That matters because the field’s own note warns that loading fonts from external sources may break privacy rules in some countries. For a font Joomla does not list, set --cassiopeia-font-family-body and --cassiopeia-font-family-headings in user.css and host the font files yourself.

Cassiopeia’s 18 module positions

Cassiopeia declares 18 module positions in its templateDetails.xml. The user guide’s Cassiopeia templateDetails.xml page lists 16 and leaves out the two error-page positions, so the XML file itself is the one to trust. A module only appears if you assign it to one of these names in its Position field:

To see them on your own pages, open System, Site Templates, click Options, set Preview Module Positions to Enabled, and add ?tp=1to a front-end URL. The user guide’s template basics page notes that you use &tp=1 when the URL already has a query string. Empty positions collapse: Cassiopeia’s index.php only adds a sidebar column when a module is assigned to it, so a page with no sidebar module gets the full width. Positions also explain most of what breaks when you move to another template, which our guide on how to test a Joomla template online covers.

How do you add custom CSS with user.css?

Cassiopeia loads media/templates/site/cassiopeia/css/user.cssafter its own styles whenever the file exists, but it does not ship one. Create it in four steps, as the user guide’s Cassiopeia customisation page describes:

1. Open System, then Site Templates, then Cassiopeia Details and Files.
2. In the file tree, select the css folder and click New File.
3. Type user as the name, choose css as the file type, and click Create.
4. Add your rules, save, and reload the front end with the browser cache cleared.

A user.js file in the jsfolder works the same way for JavaScript. Marc Dechèvre’s February 2022 magazine article “Joomla 4 Cassiopeia template: a bunch of tips & tricks” notes that the file moved from templates/cassiopeia/css to the media folder in Joomla 4.1, so older tutorials point to the wrong place. Core contributor Viviana Menzel confirmed on the Joomla issue tracker (#37431, March 2022) that user.css is not overwritten by an update. Never edit template.css or index.php in Cassiopeia itself: those are core files and the next update replaces them.

How do you create a Cassiopeia child template?

A child template is a new template that uses every file of its parent except the ones you add to it. Child templates arrived in Joomla 4.1, released in February 2022, and the Joomla 4.1 release announcementdescribes them as a way to create “different instances of a template with one click”. The user guide’s child templates page adds that child template files are not affected by Joomla updates. Five steps cover it:

1. Open the Cassiopeia template files. In the administrator, go to System, then Site Templates, and click Cassiopeia Details and Files.
2. Create the child template. Click the Create Child Template button in the toolbar and give the child a short name, such as mysite. Joomla adds it to the Site Templates list as a child of Cassiopeia.
3. Make the child's style the default. Go to System, then Site Template Styles, open the style that belongs to the child, set the logo, colors and fonts on its Advanced tab, and make it the default style with the star icon.
4. Add only the files you change. Open the child's Details and Files screen and add a css/user.css file, or create layout overrides from the Create Overrides tab. Every file you do not add is still read from Cassiopeia.
5. Check the front end and run an update. Load the site, compare it with the parent, then apply a Joomla update on a test copy and confirm your changes are still there.

The child’s media files live in media/templates/site/<child>/, and its templateDetails.xmlnames Cassiopeia as the parent, as Philip Walton shows in the magazine’s May 2022 deep dive into Joomla child templates. A child can carry its own CSS, JavaScript, images, fonts, layout overrides and even its own index.php.

One trap: Cassiopeia Extended is a child template too, but it is part of Joomla core. Joomla maintainer Richard Fath explained on the Joomla issue tracker (#46548, December 2025)that editing a core template’s files gets overwritten on update, whether it is a parent or a child. Using Extended’s color pickers is fine, because those are style settings stored in the database. Adding files to it is not; put those in a child you created yourself. The Joomla 6.1 template manager language file also lists a Copy Child Template button, the feature that thread asked for, which gives you an editable copy of a child to start from.

When should you use a template override instead?

Use an override when you want to change the HTML of one view, not the look of the whole site. The Create Overridestab in a template’s Details and Files screen lists modules, components, plugins and layouts. Pick one, and Joomla copies its layout file into the template’s htmlfolder, where you edit the copy. The user guide’s template overrides page warns not to edit any of the files supplied with Cassiopeia itself.

In practice the two work together: create a child template first, then create overrides from the child’s Create Overrides tab, so they live in the child’s html folder. A typical setup is a child with a user.css for colors and spacing and two or three overrides, such as the article layout or the main menu module. Keep the list short: every override is a copy that Joomla core updates no longer change, so after a big update compare each one with the new core layout.

How do you try Cassiopeia changes without risking your live site?

Make the changes on a copy first. A color theme switch is easy to undo, but a broken override or a user.css rule that hides the menu shows up on every page of a live site at once. A throwaway Joomla 6.1 site runs the same Cassiopeia version as a fresh install, so you can try the color theme, the fonts, the position preview and a child template, then copy the files that work to the live site.

On JInstant, a test site opens in about 30 seconds with a one-click admin link and deletes itself after 4 hours. Choose Joomla 6.1 to match a current site. If you want realistic content to style, our guide to Joomla sample data shows how to fill a fresh site with articles and menus first, and the post on how to practice Joomla online lists more exercises worth trying on a disposable copy.

Conclusion

Most Cassiopeia changes need no code: the Advanced tab sets the logo, the Standard or Alternative color theme, the fonts and the layout, and Cassiopeia Extended adds color pickers in Joomla 6. For anything else, put CSS in user.cssand lasting changes in a child template you create yourself, never in Cassiopeia’s own files. Preview the 18 positions with ?tp=1 before you assign modules. The free Joomla test site guide lists every way to get a copy to try this on, and the quickest is to open a test site in one click.

Frequently asked questions