Add comprehensive override philosophy documentation

Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-02-27 04:26:16 +00:00
parent e2ddd58d2a
commit d66f357cb8
3 changed files with 389 additions and 2 deletions

View File

@@ -39,6 +39,17 @@ MokoCassiopeia includes **16 mobile-responsive module overrides** and **12 compo
**Important**: Following Cassiopeia template best practices, MokoCassiopeia avoids overriding standard Joomla core modules (such as mod_search, mod_login, mod_breadcrumbs) to ensure proper language loading and compatibility. **Exception**: mod_menu "Main Menu" override provides essential Bootstrap 5 collapsible dropdown functionality. **Important**: Following Cassiopeia template best practices, MokoCassiopeia avoids overriding standard Joomla core modules (such as mod_search, mod_login, mod_breadcrumbs) to ensure proper language loading and compatibility. **Exception**: mod_menu "Main Menu" override provides essential Bootstrap 5 collapsible dropdown functionality.
### Alternative Layouts, Not Replacements
**All MokoCassiopeia overrides use alternative layout names (`mobile.php`) instead of replacing default layouts (`default.php`).** This means:
- ✅ Default Joomla layouts continue to work unchanged
- ✅ You must explicitly select the "mobile" layout in module/menu item settings
- ✅ Joomla core updates don't break your site
- ✅ Full control over which modules use enhanced layouts
**📖 See [OVERRIDE_PHILOSOPHY.md](OVERRIDE_PHILOSOPHY.md) for complete details on how to activate and use these alternative layouts.**
### Key Features ### Key Features
All module overrides share these characteristics: All module overrides share these characteristics:
@@ -655,16 +666,54 @@ Override CSS variables in your custom color scheme:
--- ---
## How to Activate Alternative Layouts
All MokoCassiopeia overrides are **alternative layouts** that must be explicitly activated. They do not automatically replace default layouts.
### Quick Start: Enable Mobile Layout
1. **Go to Joomla Administrator** → Extensions → Modules
2. **Open the module** you want to enhance (e.g., VirtueMart Cart)
3. **Navigate to Advanced tab**
4. **Find "Alternative Layout" field**
5. **Select "MokoCassiopeia - mobile"** from dropdown
6. **Save & Close**
### For Menu Items (Component Views)
1. **Go to Menus** → Select your menu
2. **Open the menu item** (e.g., Events List)
3. **Navigate to Advanced Options or Page Display tab**
4. **Find "Alternative Layout" field**
5. **Select "MokoCassiopeia - mobile"** from dropdown
6. **Save & Close**
### Apply to All Modules in a Position
In your template's `index.php`, specify layout for entire module position:
```php
<jdoc:include type="modules" name="sidebar-left" style="none" layout="mobile" />
```
**📖 For complete documentation, see [OVERRIDE_PHILOSOPHY.md](OVERRIDE_PHILOSOPHY.md)**
---
## Version History ## Version History
| Version | Date | Changes | | Version | Date | Changes |
|----------|------------|--------------------------------------------------| |----------|------------|--------------------------------------------------|
| 03.08.04 | 2026-02-27 | Added alternative layout activation instructions, JEM overrides |
| 03.08.03 | 2026-02-25 | Removed mod_search override per Cassiopeia philosophy |
| 03.08.00 | 2026-02-22 | Added Community Builder component overrides |
| 03.07.00 | 2026-02-22 | Initial release of all mobile-responsive overrides | | 03.07.00 | 2026-02-22 | Initial release of all mobile-responsive overrides |
--- ---
## Additional Resources ## Additional Resources
- **Override Philosophy**: [OVERRIDE_PHILOSOPHY.md](OVERRIDE_PHILOSOPHY.md) ⭐ **Start here**
- **Main README**: [README.md](../README.md) - **Main README**: [README.md](../README.md)
- **Changelog**: [CHANGELOG.md](../CHANGELOG.md) - **Changelog**: [CHANGELOG.md](../CHANGELOG.md)
- **CSS Variables**: [CSS_VARIABLES.md](CSS_VARIABLES.md) - **CSS Variables**: [CSS_VARIABLES.md](CSS_VARIABLES.md)

332
docs/OVERRIDE_PHILOSOPHY.md Normal file
View File

@@ -0,0 +1,332 @@
<!--
Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia.Documentation
REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia
FILE: docs/OVERRIDE_PHILOSOPHY.md
VERSION: 03.08.04
BRIEF: Philosophy and implementation of non-replacing alternative layouts
PATH: /docs/OVERRIDE_PHILOSOPHY.md
-->
# 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/templates/html/mod_virtuemart_cart/default.php
✅ GOOD (Alternative layout):
src/templates/html/mod_virtuemart_cart/mobile.php
```
### How Joomla Handles Layouts
When a module or component looks for a layout, Joomla searches in this order:
1. **Template override with specified layout name**: `templates/mokocassiopeia/html/{extension}/{view}/{layout}.php`
2. **Extension's specified layout**: `{extension}/tmpl/{view}/{layout}.php`
3. **Template override for default layout**: `templates/mokocassiopeia/html/{extension}/{view}/default.php`
4. **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:
1. Open the module/menu item for editing
2. Navigate to the **Advanced** tab
3. Find the **Alternative Layout** field
4. Select **MokoCassiopeia - mobile** from the dropdown
5. Save
### Method 2: Override in Module Position
If you want all modules in a specific position to use the mobile layout:
```php
<!-- 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/templates/html/mod_menu/mainmenu.php`
- `src/templates/html/mod_menu/mainmenu_component.php`
- `src/templates/html/mod_menu/mainmenu_heading.php`
- `src/templates/html/mod_menu/mainmenu_url.php`
- `src/templates/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.php`
- `mod_virtuemart_product/mobile.php`
- `mod_virtuemart_currencies/mobile.php`
- `mod_virtuemart_category/mobile.php`
- `mod_virtuemart_manufacturer/mobile.php`
**Community Builder (2)**:
- `mod_cblogin/mobile.php`
- `mod_comprofilerOnline/mobile.php`
**Main Menu (1)**:
- `mod_menu/mainmenu.php` (custom layout name)
**Industry Extensions (8)**:
- `mod_k2_content/mobile.php`
- `mod_acymailing/mobile.php`
- `mod_hikashop_cart/mobile.php`
- `mod_kunenalatest/mobile.php`
- `mod_kunenalogin/mobile.php`
- `mod_kunenasearch/mobile.php`
- `mod_kunenastats/mobile.php`
- `mod_osmembership/mobile.php`
### Component View Overrides (12 total)
All use `mobile.php` naming (alternative layout):
**Community Builder (4)**:
- `com_comprofiler/userprofile/mobile.php`
- `com_comprofiler/userslist/mobile.php`
- `com_comprofiler/registers/mobile.php`
- `com_comprofiler/login/mobile.php`
**JEM - Joomla Event Manager (5)**:
- `com_jem/eventslist/mobile.php`
- `com_jem/event/mobile.php`
- `com_jem/calendar/mobile.php`
- `com_jem/venue/mobile.php`
- `com_jem/categories/mobile.php`
**Kunena Forum (1)**:
- `com_kunena/category/mobile.php`
**OSMembership (2)**:
- `com_osmembership/plan/mobile.php`
- `com_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:
1. Name files `mobile.php` or use descriptive custom names (`mainmenu.php`, `toc-left.php`)
2. Document the alternative layout in MODULE_OVERRIDES.md
3. Add CSS with BEM naming: `.{extension}-{view}__element`
4. Test that default layouts still work
5. Provide clear instructions for selecting the layout
### ❌ DON'T:
1. Create `default.php` files that replace core layouts
2. Override standard Joomla core modules without strong justification
3. Break backward compatibility
4. Assume users will automatically get your layout
5. 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
```bash
find templates/oldtemplate/html -name "default.php"
```
### Step 2: Rename to Alternative Layouts
```bash
# For each default.php found:
mv default.php mobile.php
```
### Step 3: Update Module Settings
For each module using the old override:
1. Edit module in administrator
2. Advanced tab → Alternative Layout
3. Select "mobile" from dropdown
4. 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:**
1. File is in correct location: `templates/mokocassiopeia/html/{extension}/{view}/`
2. File has `.php` extension
3. File is not named `default.php`
4. Cache is cleared (System → Clear Cache)
### Module Still Uses Default Layout
**Check:**
1. Module's Alternative Layout setting in administrator
2. Module position's `layout` parameter in `<jdoc:include>` tag
3. File permissions (must be readable)
4. Template is assigned to correct pages
### Layout Works But Looks Wrong
**Check:**
1. CSS is loaded: inspect element and check for `.{extension}-{view}__` classes
2. `template.css` is up to date
3. Browser cache is cleared
4. CSS variables are defined in template
---
## References
- [Joomla Docs: Layout Overrides](https://docs.joomla.org/Layout_Overrides_in_Joomla)
- [Joomla Docs: Alternative Layouts](https://docs.joomla.org/J3.x:How_to_use_the_alternative_layout_feature)
- [MODULE_OVERRIDES.md](MODULE_OVERRIDES.md) - Complete override inventory
- [CSS_VARIABLES.md](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)

View File

@@ -61,11 +61,17 @@ This directory contains comprehensive documentation for the MokoCassiopeia Jooml
* Light and dark mode theming * Light and dark mode theming
* **[Module & Component Overrides](MODULE_OVERRIDES.md)** - Mobile-responsive overrides guide * **[Module & Component Overrides](MODULE_OVERRIDES.md)** - Mobile-responsive overrides guide
* 20 module overrides + 3 component overrides * 16 module overrides + 12 component overrides
* VirtueMart, Joomla core, Community Builder, industry extensions * VirtueMart, Community Builder, JEM, Kunena, industry extensions
* Mobile-first responsive design patterns * Mobile-first responsive design patterns
* Accessibility features and customization * Accessibility features and customization
* **[Override Philosophy](OVERRIDE_PHILOSOPHY.md)** ⭐ - Alternative layouts, not replacements
* Why overrides use `mobile.php` naming instead of `default.php`
* How to activate alternative layouts in Joomla
* Benefits of non-replacing overrides
* Developer guidelines and best practices
* **[Roadmap](ROADMAP.md)** - Version-specific roadmap * **[Roadmap](ROADMAP.md)** - Version-specific roadmap
* Current features (v03.07.00) * Current features (v03.07.00)
* Feature evolution timeline * Feature evolution timeline