Template styles in Joomla: a different look per page

Most Joomla sites run one template, but that template can have as many styles as you like. A style is a saved set of template parameters: logo, colours, fonts, layout width, whatever the template offers. Give the shop section a different header, the landing page a fluid layout or the Dutch pages their own logo, and you still maintain one set of template files.

Where styles live

Go to System > Site Template Styles. Every installed site template has at least one style, and the one with the yellow star is the default. Clicking a style name opens its parameters; clicking the template name in the next column opens the files.

That split matters. Files (overrides, user.css, index.php) belong to the template and are shared by every style. Parameters belong to the style. If a change has to apply to one part of the site only, it must be something the template exposes as a parameter, or you need a separate child template (see child templates in Joomla).

Make a second style

1. Tick the current default style and click Duplicate. Joomla creates a copy named "Cassiopeia - Default (2)".
2. Open the copy and give it a name that says where it is used, such as "Cassiopeia - Shop".
3. Change what should differ. In Cassiopeia that is typically the brand logo and title, the colour scheme, the font scheme, and on the Advanced tab the layout (static or fluid), sticky header and back-to-top link.
4. Save. Do not set it as default.

Assign it to pages

There are two ways to tie a style to pages, and they do the same thing.

From the style: Menu Assignment tab

The style has a Menu Assignment tab listing every menu and menu item. Tick the items that should use this style. This is the quickest way to give a whole section, such as every item in a shop menu, the same look. Use the "Toggle" buttons per menu to select a whole menu at once.

From the menu item: Template Style field

Every site menu item has a Template Style field on its Details tab. "- Use Default -" follows the default style; picking a style here is the same as ticking the item on that style's Menu Assignment tab. Change it in one place and the other follows.

Pages without their own menu item

Assignment works per menu item, not per article. An article opened from a blog or category list gets the style of the menu item it was reached through. That is usually what you want: articles in the shop blog look like the shop.

It goes wrong for pages that have no matching menu item at all, such as an article linked from a module or a search result. Joomla then falls back to the default style. If those pages need the other look, create a menu item for them in a hidden menu (a menu without a module) and assign the style there. The same hidden-menu trick gives them a clean URL too.

One default per language

On a multilingual site the Default field on a style offers "All" or a single content language. Set the Dutch style as default for Dutch and the English style for English, and every page in that language gets its own logo or tagline without touching any menu item. This needs the System - Language Filter plugin to be enabled; without it the language default is ignored.

When Cassiopeia's options run out

A style can only save what the template offers, and Cassiopeia offers little: a logo, a few colour and font schemes and some layout switches. The usual next step is writing CSS or building a child template. Kickstart Cassiopeia, our own styling module for Cassiopeia, adds the missing settings instead: colours for every part of the page, Google Fonts, a top bar, footer columns and button styles. You pick the values and the module writes the CSS, on Joomla 4, 5 and 6, without a child template.

When the style does not change

• The page is cached. Page cache and the host's proxy cache keep serving the old HTML. Clear Joomla's cache and test with a query string added to the URL.
• The item uses "- Use Default -". Check the menu item itself; an assignment made on the style tab shows up there, so a mismatch means the save did not stick.
• The page has no menu item. See above: it falls back to the default style.
• The change is in a file, not a parameter. A colour set in user.css applies to every style of the template. Scope it with a body class instead, or use the page class suffix of the menu item (see styling one menu item differently).

Administrator styles

The same system exists for the back end under System > Administrator Template Styles. Atum styles let you change the brand colours and logo of the administrator, which is a cheap way to make a staging site look different from production so nobody edits the wrong one. Each user can also pick their own administrator style under Edit Account > Basic Settings.