MokoOnyx Template

MokoOnyx is a modern Joomla site template with dark mode support, custom page layouts, responsive design, and deep MokoSuite integration for white-label branding. Successor to MokoCassiopeia.

Read more →

Troubleshooting MokoOnyx

  • Applicable Software: MokoOnyx (Template)
  • Applicable Version: v1.0.0

Common Issues

Styles not loading after update

MokoOnyx cleans stale minified files during install/update. If styles still appear broken:

  1. Clear your browser cache (Ctrl+Shift+R).
  2. In Joomla admin, go to System > Clear Cache and purge all caches.
  3. If using a CDN (Cloudflare, etc.), purge the CDN cache.

Custom theme not appearing

Ensure your custom CSS file exists at the correct path:

  • Light: media/templates/site/mokoonyx/css/theme/light.custom.css
  • Dark: media/templates/site/mokoonyx/css/theme/dark.custom.css

Also verify you selected Custom in the Theme tab of template settings.

Migration did not run

The automatic migration from MokoCassiopeia runs only once. To re-trigger:

  1. Delete the file templates/mokoonyx/.migrated
  2. Reload any frontend page.
  3. Check administrator/logs/mokoonyx_migrate.log.php for results.

Font Awesome icons not showing

  • Check if a FA Kit code is entered in settings but invalid.
  • Clear the Kit field to fall back to local FA7 Free.
  • Verify the font files exist at media/templates/site/mokoonyx/vendor/fa7free/webfonts/

user.css or user.js not taking effect

  • Ensure the files exist at media/templates/site/mokoonyx/css/user.css and media/templates/site/mokoonyx/js/user.js.
  • Delete any .min.css / .min.js counterparts to force regeneration.
  • Enable Development Mode to bypass minification temporarily.

Getting Help

If you encounter issues not covered here, please file an issue on our issue tracker.

Automatic Table of Contents

  • Applicable Software: MokoOnyx (Template)
  • Applicable Version: v1.0.0

How It Works

MokoOnyx automatically generates a sticky Table of Contents (TOC) for articles that use the toc-left or toc-right article layout. The TOC is built from heading elements (h2, h3, h4) in your article content.

Enabling TOC

  1. Edit your article in Joomla.
  2. Under Options > Layout, select either toc-left or toc-right.
  3. The TOC will appear as a sticky sidebar on desktop and collapse on mobile.

Layout Options

  • toc-left - TOC sidebar on the left, article content on the right
  • toc-right - TOC sidebar on the right, article content on the left

Behaviour

  • The TOC uses Bootstrap ScrollSpy to highlight the active section as the user scrolls.
  • On mobile (below 992px), the TOC collapses above the article content.
  • Headings without text content are automatically excluded.

Article Metadata Footer

When an article has Joomla custom fields assigned, a metadata footer is automatically rendered below the content. Fields are grouped by their field group and displayed in a responsive grid layout.

Font Awesome 7 Icons

  • Applicable Software: MokoOnyx (Template)
  • Applicable Version: v1.0.0

Overview

MokoOnyx ships with Font Awesome 7 Free, providing thousands of icons out of the box. You can use either the bundled local copy or a Font Awesome Kit for Pro icons.

Using Local FA7 Free

By default, MokoOnyx loads the local minified FA7 Free CSS. No configuration needed. Use icons in your content with standard FA classes:

<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-envelope"></i>
<i class="fa-brands fa-github"></i>

Using a Font Awesome Kit (Pro)

If you have a FA Pro subscription:

  1. Go to template settings, Advanced tab.
  2. Enter your Kit code in the Font Awesome Kit field.
  3. The local FA7 files will be replaced by your Kit script, giving access to Pro icons, custom sets, and versioned updates.

Drawer Icons

The left and right offcanvas drawer toggle icons are configurable in the Drawers tab. Enter any FA class string (e.g., fa-solid fa-chevron-right).

Google Analytics and Tag Manager Integration

  • Applicable Software: MokoOnyx (Template)
  • Applicable Version: v1.0.0

Supported Integrations

MokoOnyx supports both Google Tag Manager (GTM) and standalone Google Analytics (GA4) integration, configured directly in the template settings.

Google Tag Manager

  1. Go to System > Site Templates > MokoOnyx > Analytics tab.
  2. Enter your GTM Container ID (format: GTM-XXXXXXX).
  3. Save. The GTM snippet is automatically injected into the page head and body.

Google Analytics (GA4)

  1. In the Analytics tab, enter your GA4 Measurement ID (format: G-XXXXXXXXXX).
  2. The gtag.js script loads automatically with anonymize_ip: true for privacy compliance.

Smart Visitor Detection

When GTM or GA4 is active, MokoOnyx automatically pushes anonymised visitor properties to the dataLayer:

  • Login status (guest/registered)
  • User group
  • Page type (article, category, component, etc.)

These are set as GA4 user_properties for persistent session-scoped dimensions. No personally identifiable information (PII) is sent.

Print View Tracking

The component/print view automatically sends content_group: print_view to GA4, allowing you to track print and modal usage separately in your analytics.

Custom CSS and JavaScript Overrides

  • Applicable Software: MokoOnyx (Template)
  • Applicable Version: v1.0.0

Overview

MokoOnyx provides two files for site-specific customisations that survive template updates:

  • media/templates/site/mokoonyx/css/user.css
  • media/templates/site/mokoonyx/js/user.js

How They Load

Both files are loaded last via the Joomla Web Asset Manager, after all theme stylesheets and template scripts. This ensures your overrides take precedence without needing !important.

Auto-Minification

MokoOnyx automatically minifies user.css and user.js on first page load when not in development mode. The minified versions are served to visitors for better performance.

Development Mode

Enable Development Mode in the Advanced tab to load unminified source files for easier debugging, skip the minification cache, and see verbose error output.

Best Practices

  • Use user.css for layout tweaks, colour overrides, or component styling
  • Use user.js for analytics snippets, custom interactions, or third-party integrations
  • These files are excluded from version control and are site-specific

Custom Colour Themes

  • Applicable Software: MokoOnyx (Template)
  • Applicable Version: v1.0.0

How Theming Works

MokoOnyx uses CSS custom properties (variables) for all colours. Two built-in palettes are provided: Light Standard and Dark Standard. You can create fully custom palettes by overriding these variables.

Creating a Custom Light Theme

  1. Copy templates/mokoonyx/templates/light.custom.css to:
    media/templates/site/mokoonyx/css/theme/light.custom.css
  2. Edit the CSS variables in the file to match your brand colours.
  3. In the Joomla admin, go to System → Site Templates → MokoOnyx.
  4. Under the Theme tab, select Custom for the Light palette.

Creating a Custom Dark Theme

Follow the same steps using dark.custom.css instead. Both custom files contain all variables from their standard counterparts.

Theme Switcher

MokoOnyx includes a floating theme switcher button (FAB) that lets visitors toggle between light and dark mode. Configure it under the Theme tab in template settings.

Variables Reference

The template uses over 1300 CSS variables. Key ones include:

  • --body-bg / --body-color — Page background and text colour
  • --color-primary — Primary brand colour
  • --color-link / --color-hover — Link colours
  • --card-bg / --card-color — Card component colours
  • --nav-bg-color / --nav-item-color — Navigation colours

Installing MokoOnyx Template

  • Applicable Software: MokoOnyx (Template)
  • Applicable Version: v1.0.0

Installing MokoOnyx Template

MokoOnyx is the custom Joomla template built by Moko Consulting. Follow these steps to install and configure it on your site.

Installation

  1. Download the latest MokoOnyx template package from your Moko Consulting account or the provided link
  2. Log in to your Joomla Administrator panel
  3. Go to System → Install → Extensions
  4. Upload the template package file and click Upload & Install
  5. After installation, go to System → Site Template Styles
  6. Click the star icon next to MokoOnyx to set it as the default template

Initial Configuration

Click on the MokoOnyx template style to access its settings:

  • Colour Theme — Choose from preset colour themes or define custom colours
  • Logo — Upload your site logo
  • Fonts — Select from available font families
  • Layout — Configure sidebar positions and widths

Next Steps

After installation, see the other MokoOnyx articles for customising colours, adding Font Awesome icons, integrating Google Analytics, and applying custom CSS overrides.