MokoConsulting/MokoOnyx
1
0
Fork 0
Code Issues 10 Pull Requests Releases 5 Wiki Activity
Files
45de3fcaf869e8337449e21494de72192eab5af9
MokoOnyx/wiki/configuration.md
T
Jonathan Miller 1387fd0edb chore: merge main into dev, keep 02.09.00 [skip ci]
2026-05-29 04:13:43 -05:00

147 lines
6.8 KiB
Markdown
Raw Blame History

[← 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 `<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](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 [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/MokoStandards-API) -- Moko Consulting*
---
*Repo: [MokoOnyx](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx) · [MokoStandards](https://git.mokoconsulting.tech/MokoConsulting/moko-platform/wiki/Home)*
| Revision | Date | Author | Description |
|---|---|---|---|
| 1.0 | 2026-05-09 | Moko Consulting | Initial version |
Reference in New Issue View Git Blame Copy Permalink