Joomla Template Styles — Customizer, Fonts, Colors and Layout Options

In this tutorial, you'll learn how to use the Joomla Cassiopeia style customizer — changing brand colors, fonts, layout options, header styles, and duplicating styles to create unique looks for different pages on your site.

What You'll Learn

• How to access template styles (Extensions > Templates > Styles)
• Cassiopeia style options: Brand, Color, Font, Layout, Header, Menu, Background
• The Brand tab: logo upload, site title toggle, tagline toggle, brand size
• The Color tab: link color, text color, body background, header/sidebar/footer backgrounds, accent color
• The Font tab: headings font family, body font family
• The Layout tab: template width (fluid vs static), sidebar positions, front page vs other pages
• The Header tab: header style (modern, classic, static), header height
• The Menu tab: menu type (dropdown, collapse, hover), animation
• The Background tab: background color, background image, repeat settings
• How to duplicate a style for multiple variations
• Assigning styles to specific menu items
• Responsive preview for testing styles

Why It Matters

A website's visual identity directly affects user trust and engagement. Changing colors, fonts, and layout options in Joomla's style customizer lets you match your site's look to your brand without writing any CSS. Understanding how to create and assign multiple template styles means you can serve different visual experiences for different sections of your site — all from a single template.

Real-World Use

A university runs its website on Joomla. Each faculty — Engineering, Arts, Science — needs a distinct color scheme. The web team creates one Cassiopeia style for each faculty, changes the brand colors and header logo per style, and assigns each style to the faculty's menu items. A single template, four styles, four distinct looks.

Learning Path

flowchart LR
  A["Template Basics"] --> B["Template Styles
You are here"]:::current
  B --> C["Template Overrides"]
  C --> D["Child Templates"]
  D --> E["CSS & User.css"]

  classDef current fill:#38bdf8,color:#0f172a,stroke-width:2px

Accessing Template Styles

You manage template styles from Extensions > Templates > Styles. This page shows all the template styles installed on your site. Each row shows:

• Style name — the name you give this configuration
• Template — which template this style belongs to
• Default — a star icon indicates the default style
• ID — the database ID of this style

Click a style name to open its settings. The Cassiopeia style editor has several tabs, each dedicated to a group of settings.

The Style Editor Tabs

Brand Tab

The Brand tab controls how your site identity appears in the header.

When you upload a logo, it replaces the plain text site title. The logo should be a transparent PNG or SVG for best results. Cassiopeia scales the logo to fit the brand area, so use a reasonable size (around 200x60 pixels).

If you choose not to upload a logo, Cassiopeia displays the site title and tagline as text. The site title comes from Global Configuration > Site Name.

# Recommended logo specifications
# Format: PNG or SVG with transparency
# Size: 200x60 pixels (approximate)
# Placement: stored in images/ folder automatically
# Alternative: use a text-based brand with CSS fonts

Color Tab

The Color tab lets you change the color palette of your entire site. Each color setting affects specific parts of the layout.

Casssiopeia uses CSS custom properties (CSS variables) for colors. When you change a color in the style editor, Joomla writes the value to the page as a CSS variable.

/* Cassiopeia CSS variables for colors */
:root {
  --cassiopeia-color-link: #0d6efd;
  --cassiopeia-color-text: #212529;
  --cassiopeia-color-body-bg: #ffffff;
  --cassiopeia-color-header-bg: #f8f9fa;
  --cassiopeia-color-sidebar-bg: #f8f9fa;
  --cassiopeia-color-footer-bg: #212529;
  --cassiopeia-color-accent: #0d6efd;
}

Choose colors that have sufficient contrast against backgrounds. Joomla does not validate contrast ratios in the style editor, so you need to check Accessibility manually.

Font Tab

The Font tab controls which typefaces your site uses.

You can enter any valid CSS font-family value. Common choices:

<!-- System fonts (fast, no external requests) -->
Arial, Helvetica, sans-serif
Georgia, Times New Roman, serif
Segoe UI, Tahoma, Geneva, Verdana, sans-serif

<!-- Web fonts (load from Google Fonts or similar) -->
Open Sans, Arial, sans-serif
Roboto, Arial, sans-serif
Lato, Arial, sans-serif

If you use Google Fonts, you need to add the @import or link tag to your template's index.php or user.css. Cassiopeia does not load Google Fonts by default. This is intentional — it keeps the template fast and privacy-friendly.

Layout Tab

The Layout tab controls the overall structure of your pages.

The template width setting determines whether your content spans the entire browser width (fluid) or stays within a centered container (static). Fluid layouts are common for modern designs, while static layouts work well for content-heavy sites.

Cassiopeia uses Bootstrap's grid system. The sidebar width is specified in columns, where the full width is 12 columns. If you set both sidebars to 3 columns each, the main content area takes the remaining 6 columns.

Cassiopeia also lets you set separate layout rules for the front page versus other pages:

• is_frontpage — layout when the home page is displayed
• is_not_frontpage — layout for all other pages

This means you can have a full-width homepage with no sidebars and a two-column layout for interior pages.

Header Tab

The Header tab changes how the top of your page looks.

The header style options:

• Modern: A clean header with the brand on the left and navigation on the right. The menu is inline and the header has a background color.
• Classic: A two-row header. The brand sits on top and the navigation appears below it in a separate bar.
• Static: The header stays at the top of the page and scrolls away with the content (as opposed to sticky/fixed headers).

The header height sets a minimum height for the header area. This is useful when you need extra space for a taller logo or additional header elements.

Menu Tab

The Menu tab controls how navigation menus behave.

Menu type options:

• Dropdown: Submenus appear when the user clicks the parent menu item. Standard behavior for desktop sites.
• Collapse: Submenus expand inline below the parent item. Common for mobile navigation.
• Hover: Submenus appear when the user hovers over the parent item. Use with caution on touch devices.

The animation setting controls whether submenu transitions are animated (slide/fade) or instant.

Background Tab

The Background tab sets the overall page background.

If you set both a color and an image, the image appears on top of the color. Use a subtle texture pattern for backgrounds rather than a large image to keep page load times fast.

/* What Cassiopeia generates from Background settings */
body {
  background-color: #f0f0f0;
  background-image: url('/images/bg-texture.png');
  background-repeat: repeat;
}

Duplicating a Template Style

The most powerful feature of template styles is duplication. You can copy an existing style and modify the copy without affecting the original.

To duplicate a style:

1. Go to Extensions > Templates > Styles
2. Check the checkbox next to the style you want to duplicate
3. Click the Duplicate button in the toolbar
4. A new style appears named "Copy of [Original Name]"
5. Click the new style to edit its settings
6. Rename it, change options, assign to pages

# Duplicate a template style
# Extensions > Templates > Styles
# Select style checkbox > Duplicate
# Click new style > Edit name and options
# Assign to menu items > Save

This technique is how you create different looks for different sections of your site. Each duplicated style stores its own set of colors, fonts, logo, and layout options. They all use the same underlying template files, but each produces a different visual result.

Assigning Styles to Pages

After you create multiple styles, you need to tell Joomla which pages use which style. Do this in the Menu Assignment tab of the style editor.

The Menu Assignment options are:

When you select "Only on the pages selected", a tree of menu items appears. Check the ones that should use this style.

Joomla applies styles in this priority:

1. If a page has a specific style assigned to its menu item, that style is used
2. If no specific assignment exists, the default style is used
3. Only one style can be the default (marked with a star)

This priority means you should always keep one style as the default. Duplicate styles typically apply to specific pages while the default handles everything else.

Responsive Preview

When editing a style, you can preview how it looks on different devices. The responsive preview button in the toolbar shows:

• Desktop view (1280px and above)
• Tablet view (768px)
• Mobile view (375px)

This is useful for checking how your style choices look on small screens without publishing the style first.

Global vs. Style Settings

Some template settings are global (applied by the template code) while others are per-style (stored with the style configuration).

This distinction matters when you plan your styling Strategy. If you want completely different module positions for different pages, you need multiple templates (or a child template), not multiple styles.

Saving and Applying Changes

When you change style settings and click Save:

1. Joomla stores the settings in the #__template_styles database table
2. The frontend reads these settings when the page loads
3. Cassiopeia generates inline CSS variables based on your color and font choices
4. The page renders with your custom settings

If you change a style and do not see the changes on the frontend, clear Joomla's cache:

# Clear Joomla cache after changing template styles
# System > Clear Cache
# Check all cache groups
# Click Delete
# Also clear browser cache (Ctrl+Shift+Delete in most browsers)

Common Mistakes

1. Forgetting to assign a style to pages: You create a new style with custom colors, but it does not appear on any page because you left the menu assignment set to "No Pages". Always assign the style to pages or make it the default.

2. Changing the default style by mistake: You edit the default style thinking you created a copy. Now every page on your site has changed colors. Always duplicate the style first, then edit the copy.

3. Not clearing the cache after style changes: You update colors in the style editor, but the frontend still shows old colors. Joomla's cache holds the old CSS. Clear System > Clear Cache to see changes.

4. Using low-contrast color combinations: You pick a light gray link color on a white background. The links become invisible. Always check contrast ratios, especially for text and links.

5. Applying too many style variations: You create 20 different styles for a small site. Managing assignments becomes confusing. Limit style variations to cases where there is a real visual need (different brand sections, landing pages, seasonal campaigns).

Practice Questions

1. How do you create a second template style for Cassiopeia? Answer: Go to Extensions > Templates > Styles, check the Cassiopeia style checkbox, click Duplicate in the toolbar. Then click the new style to edit its name, settings, and menu assignment.

2. Can a template style have its own logo? Answer: Yes. The Brand tab in the Cassiopeia style editor lets you upload a logo. Each style can have a different logo, which is useful when different sections of your site need different branding.

3. What happens if no template style is assigned to a page? Answer: If a page does not have a specific style assigned, Joomla uses the default style (marked with a star in Extensions > Templates > Styles). Every site must have exactly one default style.

4. Challenge: Create three template styles for a fictional multi-brand company. Style 1 is the default with a blue theme. Style 2 is for the "Premium Products" section with gold accents and a different logo. Style 3 is for the "Blog" section with a wider layout and no sidebars. Assign each style to the appropriate menu items. Verify that navigating between sections shows the correct style.

FAQ

Mini Project

Your task: Create a complete visual identity for a Joomla site using template styles.

1. Start with the default Cassiopeia style. Note its current colors and layout.
2. Duplicate it and create a style named "Homepage Hero" with a dark header background, no sidebars, and full-width layout. Assign it only to the home page.
3. Duplicate it again to create "Content Pages" with a light header, left sidebar, and static layout. Assign it to all content pages.
4. Duplicate it a third time to create "Landing Page" with a different logo, accent color, and centered layout. Assign it to a special landing page menu item.
5. Add a background image to the Landing Page style.
6. Test navigation between all sections and verify each shows the correct style.
7. Check the responsive preview for each style at mobile, tablet, and desktop sizes.

This exercise simulates a real-world scenario where a single template serves multiple brand identities through style variations.

What's Next

Now that you can customize template styles, you are ready to take customization further:

Continue to Lesson 17: Template Overrides — Learn how to override component and module layouts to customize output without modifying core files.

Related lessons:

• Joomla Template Basics — Understand template structure and the Template Manager
• Joomla CSS and User.css — Customize styles with CSS overrides