13 KiB
[CLIENT NAME] - MokoCassiopeia Custom Fork
Custom Joomla Template Fork for [CLIENT NAME]
This is a customized fork of the MokoCassiopeia Joomla template, tailored specifically for [CLIENT NAME]'s website.
💡 Tip: This fork was likely created using the automated Client Fork Workflow. If you're creating a new client fork, use the workflow for instant setup!
📋 About This Fork
This repository contains client-specific customizations built on top of the MokoCassiopeia template. The template provides a modern, lightweight enhancement layer for Joomla with advanced theming, Font Awesome 7, Bootstrap 5, and dark mode support.
Customization Strategy
This fork maintains the following customizations:
- Custom Color Schemes: Brand-specific colors for light and dark modes
- Custom Code: Client-specific HTML, CSS, and JavaScript customizations
- Configuration: Pre-configured template settings for the client environment
All customizations are designed to be preserved when syncing with upstream MokoCassiopeia updates.
🚀 Quick Start
Prerequisites
- Joomla: 4.4.x or 5.x
- PHP: 8.0 or higher
- Git: For version control and syncing with upstream
- Local Development: MAMP/XAMPP/Docker for local testing
Installation for Development
-
Clone this repository:
git clone [YOUR-FORK-URL] cd [YOUR-FORK-NAME] -
Set up upstream remote (for syncing updates):
git remote add upstream https://github.com/mokoconsulting-tech/MokoCassiopeia.git git fetch upstream -
Install into Joomla:
- Copy the
src/directory contents to your Joomla installation:src/templates/→[joomla]/templates/src/media/→[joomla]/media/templates/site/mokocassiopeia/src/language/→[joomla]/language/src/administrator/language/→[joomla]/administrator/language/
- Copy the
-
Enable the template:
- Log into Joomla admin
- Navigate to System → Site Templates
- Set MokoCassiopeia as the default template
🎨 Custom Branding & Colors
Custom Color Schemes
This fork includes custom color schemes specific to [CLIENT NAME]'s brand:
Location:
- Light mode:
src/media/css/colors/light/colors_custom.css - Dark mode:
src/media/css/colors/dark/colors_custom.css
Note: These files are gitignored in the upstream repository to prevent conflicts, but are tracked in this fork.
Modifying Brand Colors
-
Edit the custom color files:
# Light mode colors edit src/media/css/colors/light/colors_custom.css # Dark mode colors edit src/media/css/colors/dark/colors_custom.css -
Key variables to customize:
:root[data-bs-theme="light"] { --color-primary: #YOUR-BRAND-COLOR; --accent-color-primary: #YOUR-ACCENT-COLOR; --color-link: #YOUR-LINK-COLOR; --nav-bg-color: #YOUR-NAV-BG; } -
Test your changes:
- Clear Joomla cache: System → Clear Cache
- Clear browser cache (Ctrl+Shift+R / Cmd+Shift+R)
- View your site in light and dark modes
Available CSS Variables
For a complete reference of all customizable CSS variables, see the CSS Variables Documentation in the upstream repository.
🔧 Custom Code Injection
Using custom.php
The src/templates/custom.php file allows for custom PHP functions and HTML snippets:
Location: src/templates/custom.php
Example Use Cases:
- Custom helper functions
- Client-specific HTML snippets
- Custom console logging
- Integration code
Example:
<?php
// Custom helper function
function console_log($output, $with_script_tags = true) {
$js_code = 'console.log(' . json_encode($output, JSON_HEX_TAG) . ');';
if ($with_script_tags) {
$js_code = '<script>' . $js_code . '</script>';
}
echo $js_code;
}
?>
<!--
Custom HTML code can be added here
-->
Custom Code via Joomla Template Settings
You can also inject custom code via the Joomla admin interface:
- Navigate to System → Site Templates → MokoCassiopeia
- Go to the Custom Code tab
- Add custom HTML/CSS/JS in:
- Custom Head Start: Injected at the beginning of
<head> - Custom Head End: Injected at the end of
<head>
- Custom Head Start: Injected at the beginning of
This approach is ideal for:
- Analytics tracking codes
- Custom meta tags
- External script includes
- Custom CSS snippets
🔄 Syncing with Upstream Updates
To keep your fork up-to-date with new features and bug fixes from the upstream MokoCassiopeia repository:
1. Fetch Upstream Changes
# Ensure upstream remote is configured
git remote -v
# If upstream is not listed, add it:
# git remote add upstream https://github.com/mokoconsulting-tech/MokoCassiopeia.git
# Fetch latest changes
git fetch upstream
2. Review Changes
# See what changed in upstream
git log HEAD..upstream/main --oneline
# Review the diff
git diff HEAD..upstream/main
3. Merge Upstream Changes
# Switch to your main branch
git checkout main
# Merge upstream changes
git merge upstream/main
# Or rebase (preserves cleaner history):
# git rebase upstream/main
4. Resolve Conflicts
If conflicts occur (typically in custom files):
-
Check conflict status:
git status -
Resolve conflicts manually in your editor:
- Look for conflict markers:
<<<<<<<,=======,>>>>>>> - Keep your custom changes
- Remove conflict markers
- Look for conflict markers:
-
Complete the merge:
git add . git commit -m "Merge upstream updates and resolve conflicts"
5. Test After Merging
- Clear Joomla cache
- Test critical functionality:
- Homepage loads correctly
- Custom colors are preserved
- Dark mode toggle works
- Navigation functions properly
- Custom code still executes
Protected Files
The following files contain your customizations and should be carefully reviewed during merges:
src/media/css/colors/light/colors_custom.css(custom light mode colors)src/media/css/colors/dark/colors_custom.css(custom dark mode colors)src/templates/custom.php(custom PHP code)- Template configuration (stored in Joomla database, not in files)
📦 Building & Deployment
Creating a Template Package
To create an installable ZIP package of your customized template:
-
Prepare the package:
cd src zip -r ../mokocassiopeia-[CLIENT-NAME]-[VERSION].zip . -x "*.git*" "*.DS_Store" -
Install via Joomla:
- Upload the ZIP file via System → Install → Extensions
- Or manually copy files to the Joomla installation
Deployment to Production
Recommended Deployment Methods:
-
Via Joomla Extension Manager (Easiest):
- Create a ZIP package as described above
- Upload via Joomla admin interface
- The template will automatically overwrite the existing installation
-
Via FTP/SFTP:
- Upload changed files directly to the server
- Clear Joomla cache after deployment
-
Via Git (Advanced):
- Push changes to a deployment branch
- Use Git hooks or CI/CD to deploy to production
- Ensure proper file permissions
Post-Deployment Checklist:
- Clear Joomla cache (System → Clear Cache)
- Test homepage
- Test navigation and menus
- Verify custom colors appear correctly
- Test dark mode toggle
- Check mobile responsiveness
- Verify analytics tracking (if enabled)
🛠 Local Development Setup
Setting Up a Local Joomla Environment
-
Install a local server stack:
- MAMP (Mac/Windows): https://www.mamp.info/
- XAMPP (Cross-platform): https://www.apachefriends.org/
- Docker: https://github.com/joomla-docker/docker-joomla
-
Install Joomla:
- Download Joomla from https://downloads.joomla.org/
- Extract to your local server's web directory
- Follow the Joomla installation wizard
-
Install this template:
- Copy files from this repository to your Joomla installation
- Or upload the ZIP package via Joomla's Extension Manager
-
Enable development mode:
- Edit
configuration.php:public $debug = '1'; public $error_reporting = 'maximum';
- Edit
Development Workflow
- Make changes to template files in your local Joomla installation
- Test changes in your browser
- Copy changes back to this repository:
# From Joomla installation cp [joomla]/templates/mokocassiopeia/* [repo]/src/templates/ cp [joomla]/media/templates/site/mokocassiopeia/css/* [repo]/src/media/css/ - Commit and push to your fork
- Deploy to staging/production when ready
Quick Testing Commands
# Clear Joomla cache from command line
rm -rf [joomla]/cache/*
rm -rf [joomla]/administrator/cache/*
# Watch for CSS changes (if using a build tool)
# npm run watch
📝 Customization Checklist
Use this checklist when setting up or modifying your custom fork:
Initial Setup
- Fork the MokoCassiopeia repository
- Update this README with client name and details
- Configure custom brand colors
- Test light and dark modes
- Add custom code if needed
- Configure template settings in Joomla
- Set up analytics tracking (if required)
- Test on multiple devices and browsers
Ongoing Maintenance
- Sync with upstream periodically (monthly recommended)
- Review upstream changelog for breaking changes
- Test thoroughly after merging upstream updates
- Keep this README updated with customization notes
- Document any client-specific configurations
- Maintain backup before major updates
📚 Documentation Resources
MokoCassiopeia Documentation
- Main README - Features and overview
- CSS Variables Reference - Complete CSS customization guide
- Development Guide - Development and testing
- Quick Start - Quick setup guide
- Changelog - Version history
Joomla Resources
- Joomla Documentation - Official Joomla docs
- Joomla Templates - Template development guide
- Cassiopeia Documentation - Parent template docs
🔒 Security & Best Practices
Security Considerations
- Keep Joomla Updated: Always run the latest stable Joomla version
- Update Dependencies: Regularly sync with upstream MokoCassiopeia for security patches
- Secure Custom Code: Review all custom code for security vulnerabilities
- Use HTTPS: Always serve production sites over HTTPS
- Regular Backups: Maintain regular backups of both files and database
Best Practices
- Version Control: Commit changes frequently with clear messages
- Testing: Always test changes locally before deploying to production
- Documentation: Document all customizations in this README
- Code Review: Have changes reviewed before deploying to production
- Staging Environment: Use a staging site to test updates before production
📞 Support & Contact
Client-Specific Support
Client Contact: [CLIENT CONTACT INFO]
Developer Contact: [DEVELOPER CONTACT INFO]
Hosting Provider: [HOSTING INFO]
Upstream MokoCassiopeia Support
- Repository: https://github.com/mokoconsulting-tech/MokoCassiopeia
- Issues: https://github.com/mokoconsulting-tech/MokoCassiopeia/issues
- Documentation: https://github.com/mokoconsulting-tech/MokoCassiopeia/blob/main/README.md
- Moko Consulting: https://mokoconsulting.tech
📄 License
This fork maintains the original GPL-3.0-or-later license from MokoCassiopeia.
- MokoCassiopeia: GPL-3.0-or-later
- Client Customizations: GPL-3.0-or-later (or as specified by client agreement)
- Third-Party Libraries: See Included Libraries
📊 Fork Information
- Upstream Repository: https://github.com/mokoconsulting-tech/MokoCassiopeia
- Fork Repository: [YOUR-FORK-URL]
- Client: [CLIENT NAME]
- Created: [DATE]
- Last Synced with Upstream: [DATE]
- Current Version: 03.06.03
🔄 Revision History
| Date | Version | Change Summary | Author |
|---|---|---|---|
| [DATE] | 03.06.03 | Initial fork setup with custom colors and branding | [YOUR NAME] |
Maintained by [CLIENT NAME] / [DEVELOPER NAME]