[โ† Back to Home](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 ``. Useful for consent managers or early scripts. | | `custom_head_end` | Textarea | _(empty)_ | Raw HTML/JS injected at the **end** of ``, before ``. | --- ## 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 `` tag for browser chrome theming. | | `theme_meta_theme_color` | Toggle | On | Output `` 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](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](CSS-Variables) page for the full reference. --- *Built with [moko-platform](https://git.mokoconsulting.tech/MokoConsulting/moko-platform) -- Moko Consulting* --- *Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) ยท [moko-platform](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)* | Revision | Date | Author | Description | |---|---|---|---| | 1.0 | 2026-05-09 | Moko Consulting | Initial version |