How to Override Module Output in Joomla 6 (HTML Layout Guide)
Module overrides in Joomla 6 give you full control over how modules display on the front-end without modifying core files. This means you can redesign layouts, add classes, insert icons, restructure markup, and style everything freely—while still remaining update-safe. If you want to customize Joomla visually and structurally, module override is one of the most essential techniques you must master.
Learn how to locate module layout files, duplicate them properly into your template, safely customize markup, and manage multiple layout variations like professionals.
What Is a Module Override and Why Use It?
A module override is the process of copying a Joomla module layout file from its core directory into your template HTML folder. Once overridden, Joomla loads your modified version instead of the original. This ensures:
- No core file is edited
- Changes stay intact after Joomla updates
- You gain full control over HTML structure
- You can apply UI improvements without touching logic
If you want to boost UI consistency, improve typography, modify markup for CSS frameworks, or inject icons and wrappers—module override is the cleanest approach compared to editing system files directly.
Where Joomla 6 Stores Module Layout Files
All core module layouts live inside:
/modules/mod_[module_name]/tmpl/
For example:
/modules/mod_login/tmpl/
modules/mod_articles_latest/tmpl/
modules/mod_menu/tmpl/
Each module can have one or more layout files such as default.php or alternative layouts.
Create a Module Override Step-by-Step
Step 1: Copy Layout File to Your Template
Never edit files inside /modules/. Instead, copy into your active template directory:
templates/your_template/html/mod_[module_name]/default.php
Folder structure example:
templates/cassiopeia/html/mod_articles_latest/default.php
If the folder doesn’t exist, create it manually. Joomla will auto-load your override immediately once detected.
Step 2: Edit the Override File
Open default.php and make edits you want. Typical changes include:
- Add HTML wrappers
- Insert additional classes for CSS frameworks like Bootstrap/Tailwind
- Change structure of titles, intro text, or image placement
- Inject icons using SVG or font libraries
Example before:
<div class="latestnews">
<h4><a href="/...">Article Title</a></h4>
</div>
Example after modifying with badge + wrapper:
<div class="latestnews card p-3 shadow-sm">
<h4 class="fw-bold">
<span class="badge bg-primary me-2">New</span>
<a href="/..." class="text-dark text-decoration-none">Article Title</a>
</h4>
</div>
Now you’ve officially created a custom layout override!
Selecting Alternative Layouts in Module Manager
You can create multiple layout files to switch UI quickly. Just duplicate the file:
default.php → card.php
default.php → minimal.php
default.php → grid.php
Then select layout inside module Settings → Advanced → Layout.
This lets you build different presentation styles for different module instances without duplicating code.
Override Tips for Real-World Joomla Projects
- Use distinct classes to avoid CSS conflicts
- Minify HTML logically—clean markup improves maintainability
- Create reusable layouts to fit different sections
- Test responsive states—modules behave differently on mobile
- Never place logic-heavy PHP inside override—focus on presentation only
When You Should Not Use Overrides
Overrides are fantastic, but not always necessary. If you only need small color changes or spacing tweaks, CSS alone may be enough. Use override only when you must restructure HTML output or insert UI components not available by default.
Recommended Resource for Faster Template Customization
For a smoother UI workflow and cleaner override environment, try using best fast Joomla template — optimized for overrides & modern layout building.
Conclusion
Module override is a powerful and update-safe skill every Joomla developer should master. By copying layout files into your template and customizing structure freely, you unlock complete control over module output and front-end presentation. Whether you’re building a blog layout, enhancing menus, or designing card-style article listings—overrides give you the freedom to shape Joomla visually and consistently.
- How to override com_content article layouts in Joomla 6
- Best CSS structuring practices when designing Joomla templates