MokoJoomHero

A Joomla 5 site template developed following MokoStandards.

Overview

MokoJoomHero is a modern, accessible Joomla 5 template by Moko Consulting. It features a prominent hero section, flexible module positions, sticky header, customisable brand colour, and responsive layout — all built on Joomla's Web Asset Manager.

Features

Hero Section: Dedicated hero module position with gradient styling
Flexible Layout: 11 module positions including sidebars, topbar, banner, and footer
Sticky Header: Optional sticky navigation with smooth scroll
Brand Customisation: Configurable brand colour, logo, and tagline via Template Manager
Responsive: Mobile-first layout with CSS custom properties
Accessibility: Semantic HTML5, ARIA landmarks, skip-to-content support
Web Asset Manager: Modern asset loading via joomla.asset.json
Error & Offline Pages: Custom styled error and offline templates

Prerequisites

PHP: 8.1 or higher
Joomla: 5.x (also compatible with 6.x)
Make: GNU Make for build automation

Installation

Build the template package:
```
make build
```
Upload the generated tpl_mokojoomhero-1.0.0.zip via Joomla's Extension Manager
Set as default template in System → Site Template Styles

Usage

# Display available commands
make help

# Validate code
make validate

# Build template package
make build

Module Positions

Position	Purpose
`topbar`	Slim bar above the header (contact info, social links)
`banner`	Full-width banner below the header
`menu`	Main navigation inside the header
`hero`	Hero section with gradient background
`breadcrumbs`	Breadcrumb trail
`sidebar-left`	Left sidebar
`sidebar-right`	Right sidebar
`main-top`	Above the main content area
`main-bottom`	Below the main content area
`footer`	Footer area
`debug`	Debug output (hidden from users)

Template Parameters

Configure via System → Site Template Styles → MokoJoomHero:

Logo — Upload a site logo image
Site Description — Tagline displayed next to the logo
Brand Colour — Primary accent colour (default: #1a73e8)
Fluid Container — Toggle full-width vs fixed-width layout
Sticky Header — Keep the header visible on scroll
Back to Top — Floating scroll-to-top button

Project Structure

.
├── docs/                          # Documentation files
├── scripts/                       # Build and deployment scripts
├── src/                           # Template source code
│   ├── css/template.css           # Main stylesheet
│   ├── js/template.js             # Main JavaScript
│   ├── images/                    # Template images
│   ├── html/                      # Template overrides
│   ├── language/en-GB/            # Language files
│   ├── templateDetails.xml        # Joomla manifest
│   ├── joomla.asset.json          # Web Asset Manager config
│   ├── index.php                  # Main template
│   ├── error.php                  # Error page
│   ├── offline.php                # Offline page
│   └── component.php              # Component-only output
├── Makefile                       # Build automation
└── README.md                      # This file

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Versioning

This project uses Semantic Versioning.

See CHANGELOG.md for version history.

License

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.

SPDX-License-Identifier: GPL-3.0-or-later

Support

Documentation: See the docs/ directory
Contact: hello@mokoconsulting.tech
Website: mokoconsulting.tech

4.6 KiB Raw Permalink Blame History