MokoJoomHero Module
- Details
The banner position renders a full-height hero. Two variants — Primary (65% overlay) and Secondary (80% overlay) — switchable via moduleclass_sfx with no CSS required.
Theme Switcher (Dark/Light)
- Details
MokoOnyx includes a fully implemented dark and light theme switcher built on Bootstrap 5’s data-bs-theme attribute system. Both themes are first-class — light theme in :root, dark theme overrides in :root[data-bs-theme='dark']. Switching is instant, no page reload, preference persisted across sessions.
Block Color System
- Details
Apply predefined colour schemes to modules in top-a, top-b, bottom-a, bottom-b via moduleclass_sfx — no CSS required.
Container Backgrounds
- Details
Every auto-grid and sidebar position has its own container background CSS variables for background images, colours, and gradients.
Off-Canvas Drawers
- Details
Two off-canvas positions — drawer-left and drawer-right — slide in as panels triggered by toggle buttons. Ideal for mobile navigation, login forms, and cart sidebars.
moduleclass_sfx Reference
- Details
Complete reference for moduleclass_sfx values recognised by MokoOnyx — apply variants and presets without editing CSS.
Table of Contents Sidebar
- Details
A sticky TOC sidebar auto-generated from article headings. Set via Alternative Layout — no plugin needed.
CSS Custom Property Reference
- Details
Over 200 CSS custom properties in two scopes: :root (light defaults) and :root[data-bs-theme='dark'] (dark overrides). Override any variable without editing core files.
Bootstrap Component Reference
- Details
Live Bootstrap 5 component reference. Every element renders using your active Cassiopeia child template styles. Use this page to verify colour tokens, spacing, and component overrides after any CSS change.
Brand + Bootstrap Showcase
- Details
Bootstrap 5 powers the responsive, mobile-first foundation of MokoOnyx, delivering a scalable grid system, standardized components, and utility classes. This implementation integrates Moko Consulting brand variables to ensure consistency, accessibility, and performance across all interfaces.
Icons and Font Awesome 7
- Details
Font Awesome is the web's most popular icon toolkit — scalable vector icons you control with CSS. Font Awesome 7.1.0 Free is the latest major release, delivering a refreshed icon set alongside a new recommended delivery method: Kits. This article covers both setup routes and everything you need to get FA 7 running in MokoOnyx.
Font Awesome 6 is now Long Term Support (LTS) — critical bug fixes only. All new icon work happens in FA 7.
MokoOnyx Template Position Reference
- Details
Every visible region of a MokoOnyx page is controlled by a named module position. This reference shows exactly where each position renders on desktop and mobile — so you always know which position to assign a module to.