Joomla Templates & Extensions — Complete Theming & Plugin Guide

Joomla templates control the visual presentation of your site. They consist of an index.php layout file, CSS stylesheets, JavaScript files, and a templateDetails.xml manifest that defines module positions. Think of a template as the stage your content performs on — the same article can look dramatically different depending on the template.

What You’ll Learn

• Joomla’s template structure and the Cassiopeia default template
• Creating template overrides without modifying core files
• Using user.css for safe customizations
• Managing plugins by type (content, system, authentication)
• Installing extensions via upload, URL, and directory
• Creating template styles and assigning them to menu items

Why Templates and Extensions Matter

A good template makes your site look professional with minimal effort. But the real power is in overrides — the ability to change how specific components (articles, categories, modules) render without touching the core.

The same approach powers DodaTech’s tutorial platform: a base template with targeted overrides for specific content types. Even Durga Antivirus Pro uses template customization for its documentation pages.

    flowchart LR
    A["Joomla Menus & Modules"] --> B["Templates & Extensions<br/><strong>You are here</strong>"]:::current
    B --> C["Users, Security & Administration"]

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

Template Structure

templates/
└── mytemplate/
    ├── index.php              # Main template layout
    ├── component.php          # Component-only output (print/offline)
    ├── error.php              # Error page template
    ├── offline.php            # Offline mode page
    ├── templateDetails.xml    # Template info & positions
    ├── template_preview.png   # Preview thumbnail
    ├── css/
    │   └── template.css       # Main stylesheet
    ├── js/
    │   └── template.js        # Main script
    └── html/                  # Override directory
        ├── com_content/
        │   ├── article/
        │   │   └── default.php
        │   └── category/
        │       └── blog.php
        ├── mod_menu/
        │   └── default.php
        └── layout.php

Default Templates

The Template Manager

1. System → Site Templates or Extensions → Templates → Site Templates
2. Browse templates with previews
3. Click a template to:
   • Edit Main Template (index.php) — Edit the layout
   • Edit CSS — Modify stylesheets
   • Customize — Copy templates to override
   • Preview — View with sample content

Setting the Default Template

1. System → Site Template Styles
2. Find your template, click the star icon to set as default
3. Or edit the template style and set Default to Yes

Template Overrides

Overrides let you customize how specific extensions display without modifying core files. When Joomla or the extension updates, your overrides are preserved.

Creating an Override

1. System → Site Templates → [Your Template] → Create Overrides
2. Select the component/module to override (e.g., com_content → article)
3. Joomla copies the default layout into templates/[template]/html/com_content/article/
4. Edit the copied file

<?php
// Example: templates/cassiopeia/html/com_content/article/default.php override
defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\LayoutHelper;

$app = Factory::getApplication();
$template = $app->getTemplate(true);
?>
<div class="custom-article item-page<?php echo $this->pageclass_sfx; ?>">
  <?php if ($this->params->get('show_page_heading')) : ?>
    <div class="page-header">
      <h1><?php echo $this->escape($this->params->get('page_heading')); ?></h1>
    </div>
  <?php endif; ?>

  <article>
    <header class="article-header">
      <h2><?php echo $this->escape($this->item->title); ?></h2>
      <?php echo LayoutHelper::render('joomla.content.info_block.block', $this->item); ?>
    </header>

    <?php if ($this->item->images->image_intro) : ?>
      <figure class="article-image">
        <img src="<?php echo htmlspecialchars($this->item->images->image_intro); ?>"
             alt="<?php echo htmlspecialchars($this->item->images->image_intro_alt); ?>">
      </figure>
    <?php endif; ?>

    <div class="article-body">
      <?php echo $this->item->text; ?>
    </div>
  </article>
</div>

Custom CSS with user.css

Cassiopeia includes user.css for custom styles that survive template updates:

/* templates/cassiopeia/css/user.css */
body {
  font-family: 'Inter', system-ui, sans-serif;
}

.container-main {
  max-width: 1200px;
  margin: 0 auto;
}

.article-title {
  font-size: 2rem;
  color: #1a365d;
}

.moduletable h3 {
  border-bottom: 2px solid #4299e1;
  padding-bottom: 0.5rem;
}

Plugin Manager

Plugins respond to events in Joomla. They’re the most granular extension type.

Accessing Plugins

Extensions → Plugins or System → Plugins

Plugin Types

Configuring a Plugin

1. Extensions → Plugins → [Plugin Name]
2. Configure plugin-specific options
3. Set Status → Enabled
4. Configure Access and Ordering if needed

Useful Core Plugins

Extension Manager

Installing Extensions

Three methods:

1. Upload Package File — Upload a ZIP file directly
2. Install from URL — Provide a direct download URL
3. Install from Directory — Point to an extracted folder on the server

Extension Types

Recommended Extensions

Template Styles

A template style is a saved configuration of a template. You can have multiple styles for one template with different settings.

Creating a Template Style

1. System → Site Template Styles → New
2. Select a template
3. Configure settings (colors, logo, layout width)
4. Set Menu Assignment to apply the style to specific pages

This lets you have different color schemes for different sections of your site.

Common Mistakes

1. Editing Core Template Files

Never edit Cassiopeia or other default template files directly — updates overwrite them. Always create overrides or use user.css.

2. Overriding Too Many Files

Each override is one more file to maintain when upgrading Joomla. Only override what you actually need to change.

3. Not Clearing the Template Cache

CSS and template changes may not appear immediately. Clear the cache at System → Clear Cache and System → Clear Expired Cache.

4. Installing Nulled Extensions

“Nulled” (cracked) commercial extensions contain malware, compromise security, and violate licensing. Always purchase from the developer or use free GPL extensions from the Joomla Extensions Directory.

Practice Questions

1. What is the difference between a template and a template style?
   Answer: A template is the file set (index.php, CSS). A template style is a saved configuration of that template. You can have multiple styles for one template with different settings.

2. How do you customize a template without losing changes on update?
   Answer: Use user.css for CSS customizations and template overrides for PHP changes. These files are preserved when the template updates.

3. What is the Content — Load Module plugin used for?
   Answer: It embeds modules inside articles using {loadposition position-name} or {loadmodule mod_name} syntax, enabling dynamic content placement within article text.

4. Challenge: Create a template override for the article layout that adds a “Last Updated” date below the title. Add a custom CSS rule in user.css that changes link colors to a shade of blue. Create a second template style for Cassiopeia with different logo and assign it to the About Us page.

FAQ

Try It Yourself

1. Add a custom CSS rule in user.css that changes the site title color
2. Create a template override for com_content → article and add a custom class to the article wrapper
3. Enable the Content — Load Module plugin
4. Test installing an extension from the JED (Joomla Extensions Directory)
5. Create a second template style with a different logo and assign it to one menu item

What’s Next

What’s Next

Congratulations on completing this Joomla Templates Extensions tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!