[← 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). | --- ## 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 |