MokoOnyx

Details

Category: MokoOnyx

• Applicable Software: MokoOnyx
• Min Version Number: Development
• Max Version Number: Not Applicable

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

Last Updated: July 14, 2026

Hits: 61

• MokoOnyx
• Branding

Details

Category: MokoOnyx

• Applicable Software: MokoOnyx
• Min Version Number: Development
• Max Version Number: Not Applicable

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

Last Updated: July 14, 2026

Hits: 60

• MokoOnyx

Details

Category: MokoOnyx

• Applicable Software: MokoOnyx
• Min Version Number: Development
• Max Version Number: Not Applicable

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).

Last Updated: July 14, 2026

Hits: 55

• MokoOnyx

Details

Category: MokoOnyx

• Applicable Software: MokoOnyx
• Min Version Number: Development
• Max Version Number: Not Applicable

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.

Last Updated: July 14, 2026

Hits: 70

• MokoOnyx
• SEO