← Back to Home
Configuration
MokoOnyx is configured through the Joomla template style editor at System → Site Templates → MokoOnyx. Parameters are organized into tabbed fieldsets.
Migration Tab
Informational notes about the MokoCassiopeia migration process. No editable parameters -- this tab provides guidance only.
Advanced Tab
| Parameter |
Type |
Default |
Description |
developmentmode |
Toggle |
Off |
Enables development mode. When on, .min files are deleted and unminified source files are served. When off, minified files are auto-generated. |
fluidContainer |
Toggle |
Static |
Controls whether the main layout uses a fixed-width (container) or full-width (container-fluid) wrapper. |
Favicon Tab
| Parameter |
Type |
Default |
Description |
favicon_source |
Media picker |
(none) |
Upload a PNG image. MokoOnyx auto-generates all required favicon sizes, apple-touch-icon.png, and site.webmanifest on the next page load. |
Google Tab
| Parameter |
Type |
Default |
Description |
googletagmanager |
Toggle |
Off |
Enable Google Tag Manager integration. |
googletagmanagerid |
Text |
(empty) |
Your GTM container ID (e.g., GTM-XXXXXXX). Shown when GTM is enabled. |
googleanalytics |
Toggle |
Off |
Enable Google Analytics (GA4) integration. |
googleanalyticsid |
Text |
(empty) |
Your GA4 measurement ID (e.g., G-XXXXXXXXXX). Shown when GA4 is enabled. |
googlesitekey |
Text |
(empty) |
Google site verification meta tag value. |
googlevisitordetection |
Toggle |
On |
When enabled, sends visitor context to GTM/GA4: login status, user group, and page type. Shown when GTM or GA4 is enabled. |
Custom Code Tab
| Parameter |
Type |
Default |
Description |
custom_head_start |
Textarea |
(empty) |
Raw HTML/JS injected at the start of <head>. Useful for consent managers or early scripts. |
custom_head_end |
Textarea |
(empty) |
Raw HTML/JS injected at the end of <head>, before </head>. |
Drawers Tab
| Parameter |
Type |
Default |
Description |
drawerLeftIcon |
Text |
fa-solid fa-chevron-right |
Font Awesome class for the left drawer toggle button icon. |
drawerRightIcon |
Text |
fa-solid fa-chevron-left |
Font Awesome class for the right drawer toggle button icon. |
Theme Tab
The Theme tab is the largest configuration area, organized into sub-sections.
General
| Parameter |
Type |
Default |
Description |
theme_enabled |
Toggle |
On |
Master switch for the theme system (light/dark mode). |
theme_control_type |
List |
Radios |
How the user switches themes: Switch (Light/Dark toggle), Radios (Light/Dark/System), or None (no visible control). |
theme_default_choice |
List |
System |
Default theme when no user preference is stored: System, Light, or Dark. |
theme_auto_dark |
Toggle |
Off |
Automatically switch to dark mode based on time of day. |
theme_meta_color_scheme |
Toggle |
On |
Output <meta name="color-scheme"> tag for browser chrome theming. |
theme_meta_theme_color |
Toggle |
On |
Output <meta name="theme-color"> tag for mobile browser address bar. |
theme_bridge_bs_aria |
Toggle |
On |
Bridge Bootstrap data-bs-theme attribute with ARIA attributes for screen readers. |
Variables and Palettes
| Parameter |
Type |
Default |
Description |
colorLightName |
List |
Standard |
Light theme palette: Standard (built-in) or Custom (loads light.custom.css). |
colorDarkName |
List |
Standard |
Dark theme palette: Standard (built-in) or Custom (loads dark.custom.css). |
See Custom Themes for how to create custom palettes.
Typography
| Parameter |
Type |
Default |
Description |
useFontScheme |
Grouped list |
Roboto (local) |
Font family. Options: None, Roboto (local), Noto Sans (local), Fira Sans (local). All local fonts are self-hosted for GDPR compliance. |
Branding and Icons
| Parameter |
Type |
Default |
Description |
brand |
Toggle |
On |
Show the brand/logo area in the header. |
logoFile |
Media picker |
(none) |
Logo image file. Shown when brand is enabled. |
siteTitle |
Text |
MokoOnyx |
Site title displayed next to the logo. |
siteDescription |
Text |
(empty) |
Tagline displayed below the site title. |
fA6KitCode |
Text |
(empty) |
Font Awesome 7 Pro Kit code. If empty, the bundled Font Awesome 7 Free is used (2,000+ icons). |
Header and Navigation
| Parameter |
Type |
Default |
Description |
stickyHeader |
Toggle |
Off |
Make the header stick to the top of the viewport on scroll. |
backTop |
Toggle |
Off |
Show a "Back to Top" button when the user scrolls down. |
Accessibility
| Parameter |
Type |
Default |
Description |
a11y_toolbar_enabled |
Toggle |
On |
Master switch for the accessibility toolbar. |
a11y_text_resize |
Toggle |
On |
Allow users to increase/decrease text size. |
a11y_color_inversion |
Toggle |
On |
Allow users to invert page colors. |
a11y_high_contrast |
Toggle |
On |
Allow users to enable high-contrast mode. |
a11y_highlight_links |
Toggle |
On |
Allow users to highlight all links on the page. |
a11y_readable_font |
Toggle |
On |
Allow users to switch to a more readable font. |
a11y_pause_animations |
Toggle |
On |
Allow users to pause CSS animations. |
a11y_toolbar_pos |
Hidden |
Bottom-right |
Toolbar position (fixed to bottom-right in code). |
Theme Toggle UI
| Parameter |
Type |
Default |
Description |
theme_fab_enabled |
Toggle |
On |
Show the floating action button (FAB) for theme switching. |
theme_fab_pos |
Hidden |
Bottom-right |
FAB position (fixed to bottom-right in code). |
CSS Variables Tab
A read-only reference tab displaying all available CSS custom properties organized by category. See the CSS Variables page for the full reference.
Built with MokoStandards -- Moko Consulting
Repo: MokoOnyx · MokoStandards
| Revision |
Date |
Author |
Description |
| 1.0 |
2026-05-09 |
Moko Consulting |
Initial version |