MokoConsulting/MokoOnyx
1
0
Fork 0
Code Issues 10 Pull Requests 1 Releases 5 Wiki Activity
Files
ae4fb4d80c43a25420239dcafe133e7d4d56a3b2
MokoOnyx/wiki/guides/configuration.md
T
jmiller 82e04b1818
Universal: PR Check / Branch Policy (pull_request) Successful in 2s
Details
Universal: PR Check / Require Docs Update (pull_request) Has been skipped
Details
Universal: PR Check / Wiki Update Reminder (pull_request) Has been skipped
Details
Universal: PR Check / Secret Scan (pull_request) Successful in 6s
Details
Generic: Project CI / Tests (pull_request) Failing after 9s
Details
Generic: Project CI / Lint & Validate (pull_request) Successful in 12s
Details
Universal: Pre-Release / Build Pre-Release (${{ inputs.stability || github.ref_name }}) (push) Successful in 14s
Details
Joomla: Metadata Validation / Validate Joomla Metadata (pull_request) Failing after 9s
Details
Universal: PR Check / Validate PR (pull_request) Failing after 15s
Details
Universal: PR Check / Build RC Package (pull_request) Has been cancelled
Details
Universal: PR Check / Report Issues (pull_request) Has been cancelled
Details
chore: sync main into dev (resolve infra/doc divergence) 
# Conflicts:
#	.mokogitea/workflows/issue-branch.yml
#	CHANGELOG.md
#	SECURITY.md
#	source/html/layouts/joomla/module/card.php
#	source/html/layouts/mokoonyx/article-metadata.php
#	source/media/css/a11y-high-contrast.css
#	source/templateDetails.xml
2026-07-12 19:22:08 -05:00

185 lines
8.9 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). |
---
## Social Icons Tab
Configure social media icon links displayed in the topbar, footer, and/or as a floating sidebar.
### Display Positions
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `social_topbar` | Toggle | Off | Show social icons in the topbar. |
| `social_footer` | Toggle | Off | Show social icons in the footer. |
| `social_floating` | Toggle | Off | Show social icons as a fixed floating sidebar (hidden on mobile). |
| `social_floating_pos` | List | Left | Which side of the screen the floating bar appears on. Shown when floating is enabled. |
The floating sidebar includes a **collapsible toggle** — visitors can click the chevron to collapse/expand the bar. The collapsed state is remembered across page loads via localStorage.
### Style Options
Shown when at least one display position is enabled.
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `social_icon_style` | List | Plain | Icon shape: **Plain**, **Square**, **Circle**, or **Rounded**. |
| `social_icon_size` | List | Medium | Icon size: **Small**, **Medium**, or **Large**. |
| `social_icon_color` | List | Theme | Colour scheme: **Theme** (CSS variables), **Brand** (platform colours), **Black**, or **White**. |
### Platform URLs
All URL fields use Joomla's `type="url"` with server-side `validate="url"` validation. Invalid URLs are silently skipped at render time and logged via `Joomla\CMS\Log\Log` for debugging.
Supported platforms: Facebook, X/Twitter, Instagram, LinkedIn, YouTube, GitHub, Bluesky, Threads, Discord, TikTok, Reddit, Pinterest, Snapchat, Telegram, WhatsApp, Tumblr, Twitch, Spotify, SoundCloud, Flickr, Vimeo, Linktree, and Email (`mailto:` or contact page URL).
### Tooltips
All social icon links display a **Bootstrap tooltip** on hover showing the platform name (e.g. "Follow us on GitHub"). Tooltip placement is context-aware — floating-left bars show tooltips on the right, floating-right on the left, and topbar/footer icons show tooltips above.
---
## 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 |
| 1.1 | 2026-06-20 | Moko Consulting | Added Social Icons tab documentation |
Reference in New Issue View Git Blame Copy Permalink