- Add Pa11y CI config template (templates/configs/pa11yci.json) - Replace all github.com/mokoconsulting-tech with git.mokoconsulting.tech/MokoConsulting - Update .moko-standards governance file Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
9.9 KiB
Override Philosophy — MokoCassiopeia
Core Principle: Add-On, Not Replacement
MokoCassiopeia overrides are designed as alternative layouts, not replacements of default Joomla layouts.
This means:
- ✅ Default Joomla layouts continue to work unchanged
- ✅ Site administrators can choose when to use our enhanced layouts
- ✅ Updates to Joomla core layouts don't break the site
- ✅ Compatibility with other extensions is maintained
- ✅ Users have control over which layouts to use
Technical Implementation
Layout Naming Convention
All MokoCassiopeia overrides use mobile.php naming instead of default.php:
❌ BAD (Replaces default):
src/html/mod_virtuemart_cart/default.php
✅ GOOD (Alternative layout):
src/html/mod_virtuemart_cart/mobile.php
How Joomla Handles Layouts
When a module or component looks for a layout, Joomla searches in this order:
- Template override with specified layout name:
templates/mokocassiopeia/html/{extension}/{view}/{layout}.php - Extension's specified layout:
{extension}/tmpl/{view}/{layout}.php - Template override for default layout:
templates/mokocassiopeia/html/{extension}/{view}/default.php - Extension's default layout:
{extension}/tmpl/{view}/default.php
By naming our overrides mobile.php instead of default.php, they become step 1 alternatives that must be explicitly selected, rather than step 3 replacements that are automatically used.
How to Use Alternative Layouts
Method 1: Module/Menu Item Settings
When editing a module or menu item in Joomla administrator:
- Open the module/menu item for editing
- Navigate to the Advanced tab
- Find the Alternative Layout field
- Select MokoCassiopeia - mobile from the dropdown
- Save
Method 2: Override in Module Position
If you want all modules in a specific position to use the mobile layout:
<!-- In your index.php template file -->
<?php if ($this->countModules('sidebar-left')) : ?>
<jdoc:include type="modules" name="sidebar-left" style="none" layout="mobile" />
<?php endif; ?>
Method 3: Module Chrome (Advanced)
Create a custom module chrome in templates/mokocassiopeia/html/layouts/chromes/ that automatically applies the mobile layout.
Exception: Main Menu
The only exception to this philosophy is mod_menu with the "Main Menu" module type.
The template includes files like:
src/html/mod_menu/mainmenu.phpsrc/html/mod_menu/mainmenu_component.phpsrc/html/mod_menu/mainmenu_heading.phpsrc/html/mod_menu/mainmenu_url.phpsrc/html/mod_menu/mainmenu_separator.php
These use a custom layout name (mainmenu) instead of replacing default.php, which allows the site to:
- Use the enhanced Bootstrap 5 collapsible menu for main navigation
- Keep standard Joomla menus working in other positions
- Provide better mobile navigation without breaking existing menus
To use this layout, set the module's Alternative Layout to MokoCassiopeia - mainmenu.
Override Inventory
Module Overrides (16 total)
All use mobile.php naming (alternative layout):
VirtueMart (5):
mod_virtuemart_cart/mobile.phpmod_virtuemart_product/mobile.phpmod_virtuemart_currencies/mobile.phpmod_virtuemart_category/mobile.phpmod_virtuemart_manufacturer/mobile.php
Community Builder (2):
mod_cblogin/mobile.phpmod_comprofilerOnline/mobile.php
Main Menu (1):
mod_menu/mainmenu.php(custom layout name)
Industry Extensions (8):
mod_k2_content/mobile.phpmod_acymailing/mobile.phpmod_hikashop_cart/mobile.phpmod_kunenalatest/mobile.phpmod_kunenalogin/mobile.phpmod_kunenasearch/mobile.phpmod_kunenastats/mobile.phpmod_osmembership/mobile.php
Component View Overrides (12 total)
All use mobile.php naming (alternative layout):
Community Builder (4):
com_comprofiler/userprofile/mobile.phpcom_comprofiler/userslist/mobile.phpcom_comprofiler/registers/mobile.phpcom_comprofiler/login/mobile.php
JEM - Joomla Event Manager (5):
com_jem/eventslist/mobile.phpcom_jem/event/mobile.phpcom_jem/calendar/mobile.phpcom_jem/venue/mobile.phpcom_jem/categories/mobile.php
Kunena Forum (1):
com_kunena/category/mobile.php
OSMembership (2):
com_osmembership/plan/mobile.phpcom_osmembership/plans/mobile.php
Joomla Core (2):
com_content/article/toc-left.php(custom layout name)com_content/article/toc-right.php(custom layout name)
Benefits of This Approach
1. Zero Breaking Changes
Existing sites continue to work exactly as before. No layouts are forcibly changed.
2. Gradual Adoption
Site administrators can:
- Test mobile layouts on specific modules first
- Roll out changes module-by-module
- Keep some modules using default layouts if needed
- Easily revert by changing the Alternative Layout setting
3. Extension Compatibility
Third-party extensions' default layouts remain untouched, preventing conflicts with:
- Extension updates
- Other templates
- Custom development
4. Joomla Core Updates
When Joomla core updates:
- Default layouts get new features/bug fixes automatically
- Mobile layouts remain stable and tested
- No emergency fixes needed after Joomla updates
5. Multi-Language Support
Joomla's language system loads extension language files properly because:
- Extensions aren't hijacked by template overrides
- Language strings come from the correct source
- Translations work as expected
Standards Not Overridden
Following Cassiopeia template best practices, MokoCassiopeia does not override standard Joomla core modules:
- ❌
mod_breadcrumbs- Use Joomla core layout - ❌
mod_login- Use Joomla core layout - ❌
mod_articles_latest- Use Joomla core layout - ❌
mod_articles_category- Use Joomla core layout - ❌
mod_articles_news- Use Joomla core layout - ❌
mod_search- Use Joomla core layout (removed in v03.08.03)
Reason: These modules have robust core layouts with proper language loading, accessibility, and ongoing Joomla maintenance.
Developer Guidelines
When adding new overrides to MokoCassiopeia:
✅ DO:
- Name files
mobile.phpor use descriptive custom names (mainmenu.php,toc-left.php) - Document the alternative layout in MODULE_OVERRIDES.md
- Add CSS with BEM naming:
.{extension}-{view}__element - Test that default layouts still work
- Provide clear instructions for selecting the layout
❌ DON'T:
- Create
default.phpfiles that replace core layouts - Override standard Joomla core modules without strong justification
- Break backward compatibility
- Assume users will automatically get your layout
- Forget to document how to enable the alternative layout
Migration from Replacing Overrides
If you're migrating from a template that used default.php overrides:
Step 1: Identify Replaced Layouts
find templates/oldtemplate/html -name "default.php"
Step 2: Rename to Alternative Layouts
# For each default.php found:
mv default.php mobile.php
Step 3: Update Module Settings
For each module using the old override:
- Edit module in administrator
- Advanced tab → Alternative Layout
- Select "mobile" from dropdown
- Save
Step 4: Test
- Verify module displays correctly
- Check that other modules still use default layouts
- Confirm language strings load properly
Troubleshooting
My Alternative Layout Doesn't Appear in Dropdown
Check:
- File is in correct location:
templates/mokocassiopeia/html/{extension}/{view}/ - File has
.phpextension - File is not named
default.php - Cache is cleared (System → Clear Cache)
Module Still Uses Default Layout
Check:
- Module's Alternative Layout setting in administrator
- Module position's
layoutparameter in<jdoc:include>tag - File permissions (must be readable)
- Template is assigned to correct pages
Layout Works But Looks Wrong
Check:
- CSS is loaded: inspect element and check for
.{extension}-{view}__classes template.cssis up to date- Browser cache is cleared
- CSS variables are defined in template
References
- Joomla Docs: Layout Overrides
- Joomla Docs: Alternative Layouts
- MODULE_OVERRIDES.md - Complete override inventory
- CSS_VARIABLES.md - Template styling system
Version History
- 03.08.04: Created OVERRIDE_PHILOSOPHY.md document
- 03.08.03: Removed mod_search override to align with philosophy
- 03.08.02: Removed standard Joomla module overrides for proper language loading
- Earlier: Renamed all overrides from default.php to mobile.php (21 files)