MetroG-Template User Guide

MetroG-Template: User Guide & Administrator Reference

MetroG-Template is an enterprise Joomla 6 & 5 template framework engineered by MixAgile.com. Built on strict MVC and SOLID OOP architecture, MetroG combines ultra-lightweight asset delivery (sub-30KB production bundles) with native, first-class harmony for Metro Page Builder, Adhrit LMS, and Rudra Pro School ERP. This guide explains every control studio, tab by tab and setting by setting, along with best-practice workflows for branding, navigation, search, and responsive performance.

Where everything lives in Joomla: Open your Joomla Administrator and go to System → Site Template Styles (or Extensions → Templates → Styles in Joomla 4), then click on tpl_metrog - Default. All settings are organized into 9 dedicated control studios along the top tabs.

1. Quick Start & Template Style Assignment

Joomla templates use Template Styles to govern page layout, brand logos, color themes, and navigation. You can have a single master style for your whole website, or create multiple styles (for example, one with a transparent header for your homepage, and another with a standard sticky white header for your blog or shop).

In the Administrator, navigate to System → Site Template Styles.
Click on tpl_metrog - Default to edit your primary website appearance.
To assign a custom look to specific menu items, click Save as Copy at the top, rename the copy (e.g. MetroG - Landing Pages), customize its options, and under the Menu Assignment tab, check the specific menu links where this style should apply.
Click Save & Close to publish your style changes immediately.

Tip: Standalone Interactive Preview: MetroG includes an offline test harness and visual design studio right inside your template folder. You can test preset colors, contrast modes, course checklists, and article ribbons anytime by opening /templates/metrog/preview.html directly in your web browser.

2. Architecture & Ecosystem Harmony

MetroG is engineered from the ground up for seamless compatibility with three major enterprise components:

Component	Integration Standard	Key Benefit
Metro Page Builder (MPB)	100% Token-Only Compliance: Zero direct CSS overrides on MPB selectors; 100% of palette, radius, and fonts flow through `--mpb-*` CSS tokens.	Full-bleed canvas takeover, zero build-time style conflicts, and automatic front-end live editor chrome step-back.
Adhrit LMS	Distraction-Free Player Shell: Scoped Bootstrap bridges, customizable curriculum sidebars, and refined chapter chip headers.	High-contrast active lesson badges, responsive video canvas, and unified checkout/purchases hub.
Rudra Pro School ERP	Enterprise Portal Shell: Scoped surface tokens re-declared on `.com-rudraerp .rudra-site`.	Seamless administration forms, responsive fee/admission tables, and single sign-on dashboard continuity.

Tab 0: Overview & Framework Details

The Overview & Framework Details tab provides quick diagnostics, author credentials, framework version verification, and a 1-click shortcut to launch the standalone interactive preview harness. It also features the Universal Restore Defaults utility to reset all template settings across all 8 Master Studios back to factory defaults.

Framework Highlights:

Native Joomla 6 & 5 Framework: Pure PHP 8.1+ object-oriented architecture utilizing PSR-4 autoloading and zero deprecated API calls.
Zero Component Overrides: Clean component delegation ensuring zero breakages when upgrading Joomla or extensions.
Pingdom Grade A (98+): Preloaded web fonts, clean HTTP headers, and sub-30KB production CSS and JavaScript footprint.

🔄 Universal Restore Defaults & user.css Reset Utility

Clicking Restore Factory Defaults opens an intelligent confirmation dialog providing two restoration pathways, with an optional user.css Reset Checkbox:

💾 Reset & Save Now: Restores all 176 template parameters (presets, colors, fonts, headers, layout, ecosystem switches, and performance settings) and immediately commits changes to the database in a single click.
🔍 Reset (Review First): Stages all default values in the active form controls so you can inspect each tab, and renders an in-page Save & Apply Now action banner to commit whenever you are ready.
☑ Also reset user.css to clean comments-only state: When checked (recommended), clears all custom CSS overrides inside templates/metrog/css/user.css so that custom color or styling overrides do not continue to apply over the factory default palette.
🧹 Reset user.css Only: A dedicated 1-click action button in Tab 0 that resets css/user.css on disk to comments only without altering any of your configured template style parameters.

Flexibility Guarantee: If you uncheck the user.css reset option, your custom CSS rules inside css/user.css on disk remain untouched.

Tab 1: Header, Navigation & Mobile

Controls every facet of the site's top header, primary navigation, logo branding, slogan placement, login buttons, search modal toggles, mobile drawer navigation, and menuitem visibility exclusions.

🏷️ Brand Identity & Logo

Logo Type [logo_type] – Choose one: Image Logo, Text Brand & Slogan. Default: Image Logo.
Select whether to display an image logo or stylized text.

Logo Image (Media Picker - Light Mode) [logo_image] – Media image selector. Default: Blank (empty).
Select the primary logo image securely from Joomla Media Manager. Conditional: active when logo_type:image.

Logo Image (Media Picker - Dark Mode) [logo_dark_image] – Media image selector. Default: Blank (empty).
Select an alternate logo image for dark mode from Joomla Media Manager (optional). Conditional: active when logo_type:image.

Mobile Logo Image (Media Picker) [logo_mobile_image] – Media image selector. Default: Blank (empty).
Select an alternate compact logo image for mobile screens from Joomla Media Manager (optional). Conditional: active when logo_type:image.

Logo Max Height (px) [logo_max_height] – Number. Default: 42.
Set the maximum height of the logo in pixels. Conditional: active when logo_type:image.

Brand Text [logo_text] – Text. Default: MetroG.
Enter the text to display if text logo is selected. Conditional: active when logo_type:text.

Brand Slogan [logo_slogan] – Text. Default: Blank (empty).
Enter an optional tagline or subtitle.

Slogan Position [logo_slogan_position] – Choose one: Under Logo (Default), Above Logo, Left of Logo, Right of Logo. Default: Under Logo (Default).
Select where the slogan appears relative to the logo or text logo (Under, Top, Left, or Right).

Site Favicon (Media Picker) [site_favicon] – Media image selector. Default: Blank (empty).
Select a secure site favicon image (.ico, .png, .svg) from Joomla Media Manager.

📌 Header Architecture & Sticky / Floating Mode

Show Site Header [show_header] – On or Off (No / Yes). Default: Yes.
Enable or disable the entire site header bar on pages using this template style.

Hide Header on Menu Items [hide_header_menuitems] – Text. Default: Blank (empty).
Comma-separated Menu Item IDs (e.g. 101, 105, 120) where the site header should be hidden. Conditional: active when show_header:1.

Show Navigation Menu [show_main_nav] – On or Off (No / Yes). Default: Yes.
Display the main desktop navigation menu and mobile menu toggle. When disabled, logo and header actions remain visible. Conditional: active when show_header:1.

Hide Navigation Menu on Menu Items [hide_nav_menuitems] – Text. Default: Blank (empty).
Comma-separated Menu Item IDs (e.g. 101, 105, 120) where the navigation menu should be hidden. Conditional: active when show_header:1[AND]show_main_nav:1.

Header Layout Style [header_style] – Choose one: Sticky Header with Elevation Shadow, Transparent over Hero, Minimal App Bar, Classic Header, Centered Brand & Split Menu. Default: Sticky Header with Elevation Shadow.
Choose the visual header layout style.

Sticky Header Mode [header_sticky_mode] – Choose one: Sticky (Fixed on Scroll with Elevation Shadow), Static (Scrolls Naturally with Page), Smart Scroll (Hides on Scroll Down, Reveals on Scroll Up). Default: Sticky (Fixed on Scroll with Elevation Shadow).
Choose whether the header remains anchored on scroll, scrolls naturally with the page, or uses smart reveal.

Header & Menu Z-Index [header_z_index] – Number. Default: 1000.
Stacking order elevation index for the main header and dropdown menus (Default: 1000).

Show Header Search Modal Button [show_header_search] – On or Off (No / Yes). Default: Yes.
Display instant popup search trigger in header.

Show Header Login Button [show_header_login] – On or Off (No / Yes). Default: Yes.
Display login button in header for guest visitors.

Login Redirection Page [login_redirect_menuitem] – Choose one: -- Automatic / Contextual --.
Select the menu item users should be redirected to after logging in. Leave unselected for contextual return to current page or ecosystem dashboard. Conditional: active when show_header_login:1.

Logout Redirection Page [logout_redirect_menuitem] – Choose one: -- Automatic / Contextual --.
Select the menu item users should be redirected to after logging out. Leave unselected to return to the site homepage. Conditional: active when show_header_login:1.

Back to Top Button [show_back_to_top] – On or Off (No / Yes). Default: Yes.
Display smooth scroll to top floating button.

🧭 Desktop Navigation & Submenus

Header Navigation Menu [menu_name] – Menu. Default: mainmenu.
Select which Joomla Menu to render automatically in the header navigation bar (e.g. Main Menu).

Dropdown Animation Effect [menu_animation] – Choose one: None (Instant), Fade Transition, Slide Up Transition, Zoom Scale Transition. Default: Fade Transition.
Transition animation for navigation submenu dropdowns.

Dropdown Width (px) [dropdown_width] – Number. Default: 240.
Width in pixels for navigation submenus.

📱 Mobile Off-Canvas Drawer & Navigation

Enable Mobile Hamburger & Drawer [show_mobile_menu] – On or Off (No / Yes). Default: Yes.
Display mobile navigation hamburger toggle button and slide-in off-canvas drawer on mobile and tablet devices.

Mobile Menu Source [mobile_menu_source] – Choose one: Inherit Desktop Menu (Same as Header Navigation), Dedicated Mobile Menu. Default: Inherit Desktop Menu (Same as Header Navigation).
Choose whether mobile drawer uses the same menu as desktop or a dedicated mobile menu. Conditional: active when show_mobile_menu:1.

Select Mobile Menu [mobile_menu_name] – Menu. Default: mainmenu.
Choose a specific Joomla Menu to render inside the mobile off-canvas drawer. Conditional: active when show_mobile_menu:1[AND]mobile_menu_source:custom.

Off-Canvas Drawer Side [offcanvas_position] – Choose one: Left Side, Right Side. Default: Right Side.
Slide-in direction for mobile navigation. Conditional: active when show_mobile_menu:1.

Mobile Drawer Width (px) [mobile_drawer_width] – Number. Default: 320.
Width in pixels for the mobile off-canvas drawer (Default: 320px). Conditional: active when show_mobile_menu:1.

Mobile Submenu Display Mode [mobile_menu_accordion] – Choose one: Accordion (Click to Expand / Collapse Submenus), Always Expanded (All Submenus Open). Default: Accordion (Click to Expand / Collapse Submenus).
Choose how nested submenu items are displayed inside the mobile drawer. Conditional: active when show_mobile_menu:1.

Show Search in Mobile Drawer [mobile_show_search] – On or Off (No / Yes). Default: Yes.
Display quick search bar inside the top of mobile drawer. Conditional: active when show_mobile_menu:1.

Show Social Icons in Mobile Drawer [mobile_show_social] – On or Off (No / Yes). Default: Yes.
Display social media icon links inside the mobile drawer. Conditional: active when show_mobile_menu:1.

Show Login Button in Mobile Drawer [mobile_show_login] – On or Off (No / Yes). Default: Yes.
Display login action button inside the mobile drawer footer for guest visitors. Conditional: active when show_mobile_menu:1.

Governs the optional utility top bar positioned above the main header. Configure contact telephone, email, physical office address, opening hours, social profile links, and module positions.

⚙️ Top Utility Strip Display

Enable Top Bar [enable_topbar] – On or Off (No / Yes). Default: Yes.
Enable the top utility strip above the main header.

Top Bar Elements Manager [topbar_items_order] – Choose one: Phone Number, Email Address, Operating Hours, Social Media Links.
Drag and drop items to reorder top bar elements, or click the eye icon to toggle element visibility. Conditional: active when enable_topbar:1.

📞 Campus & Organization Contacts

Contact Phone Number [contact_phone] – Text. Default: +1 (555) 019-2834.
Direct contact phone number. Conditional: active when enable_topbar:1.

Contact Email Address [contact_email] – Email. Default: This email address is being protected from spambots. You need JavaScript enabled to view it..
Primary admissions or support email. Conditional: active when enable_topbar:1.

Working Hours [contact_hours] – Text. Default: Mon - Fri: 8:00 AM - 5:00 PM.
Display office or campus hours. Conditional: active when enable_topbar:1.

🌐 Social Media Channels

Show Social Media Icons [enable_social_icons] – On or Off (No / Yes). Default: Yes.
Enable social media icons in the top bar. Conditional: active when enable_topbar:1.

Facebook URL [social_facebook] – Url.
Conditional: active when enable_topbar:1[AND]enable_social_icons:1.

X (Twitter) URL [social_twitter] – Url.
Conditional: active when enable_topbar:1[AND]enable_social_icons:1.

Instagram URL [social_instagram] – Url.
Conditional: active when enable_topbar:1[AND]enable_social_icons:1.

LinkedIn URL [social_linkedin] – Url.
Conditional: active when enable_topbar:1[AND]enable_social_icons:1.

YouTube URL [social_youtube] – Url.
Conditional: active when enable_topbar:1[AND]enable_social_icons:1.

WhatsApp Number / Link [social_whatsapp] – Text. Default: Blank (empty).
Conditional: active when enable_topbar:1[AND]enable_social_icons:1.

Tab 3: Presets & Colors

Select from 4 expertly curated color presets or build a bespoke corporate theme. Customize primary, secondary, and accent palettes, dark mode switching, adaptive contrast, surface colors, and container border radius.

Color Preset [color_preset] – Choose one: Campus (Academic Blue & Cyan), Academic (Navy & Crimson), Bootcamp (Dark Graphite & Vivid Emerald), Scholar (Oxford Blue & Parchment), Modern Slate (Slate & Indigo), Custom Hex Colors. Default: Campus (Academic Blue & Cyan).
Choose a curated color palette or configure custom hex values.

Enable Theme Switcher [enable_theme_toggle] – On or Off (No / Yes). Default: Yes.
Display the front-end dark/light theme toggle button in the header so visitors can toggle themes.

Default Theme Mode [default_theme] – Choose one: Light Mode, Dark Mode, System (Device Preference). Default: Light Mode.
Choose the default theme mode for visitors on first arrival (Light, Dark, or System device preference).

Border Radius [border_radius] – Choose one: Sharp (0px), Subtle (6px), Rounded (12px), Soft (20px), Pill (Full Round). Default: Rounded (12px).
Select global corner rounding across all cards, buttons, and inputs.

☀️ Light Mode Color & Table Studio

Primary Brand Color [color_primary] – Colour picker (HEX). Default: #1e40af.
Select the primary brand color.

Secondary Brand Color [color_secondary] – Colour picker (HEX). Default: #0ea5e9.
Select the secondary brand color.

Accent Color [color_accent] – Colour picker (HEX). Default: #f59e0b.
Select the highlight/accent color.

Body Background Color [color_body_bg] – Colour picker (HEX). Default: #f8fafc.
Page background color in light mode.

Body Font Color [color_body_text] – Colour picker (HEX). Default: #0f172a.
Main body font color in light mode (Default: #0f172a).

Headings Font Color [color_heading_text] – Colour picker (HEX). Default: #0f172a.
Font color for H1-H6 headings in light mode (Default: #0f172a).

Link Font Color [color_link] – Colour picker (HEX). Default: #1e40af.
Font color for hyperlinks in light mode (Default: #1e40af).

Link Hover Color [color_link_hover] – Colour picker (HEX). Default: #1d368e.
Text color when hovering over hyperlinked content.

Top Bar Background [color_topbar_bg] – Colour picker (HEX). Default: #f1f5f9.
Background color for top utility strip in light mode.

Header Background [color_header_bg] – Colour picker (HEX). Default: #ffffff.
Background color for main header in light mode.

Footer Background [color_footer_bg] – Colour picker (HEX). Default: #ffffff.
Background color for bottom footer in light mode.

Footer Text Color [color_footer_text] – Colour picker (HEX). Default: #64748b.
Foreground text color for footer copyright and disclaimer notes.

Footer Link Color [color_footer_link] – Colour picker (HEX). Default: #1e40af.
Link anchor color inside the footer bar.

Table Header Background (Light Mode) [table_light_header_bg] – Colour picker (HEX). Default: #f1f5f9.
Background color for table <th> headers in light mode (Default: #f1f5f9).

Table Header Text Color (Light Mode) [table_light_header_text] – Colour picker (HEX). Default: #0f172a.
Font color for table <th> headers in light mode (Default: #0f172a).

Table Border Color (Light) [table_light_border] – Colour picker (HEX). Default: #e2e8f0.
Gridlines and cell border divider color in light mode.

Table Zebra Striping BG (Light) [table_light_zebra_bg] – Colour picker (HEX). Default: #f8fafc.
Alternating row background tint for striped data tables.

Standout Row Highlight Tint (Light Mode) [table_light_highlight_bg] – Colour picker (HEX). Default: #fef3c7.
Row highlight color in light mode (Default: #fef3c7).

🌙 Dark Mode Color & Table Studio

Page Background (Dark Mode) [color_dark_bg] – Colour picker (HEX). Default: #090d16.
Base page background color when dark mode is active (Default: #090d16).

Card & Surface Background (Dark Mode) [color_dark_surface] – Colour picker (HEX). Default: #111827.
Background color for cards, panels, and tables in dark mode (Default: #111827).

Body Font Color (Dark Mode) [color_dark_text] – Colour picker (HEX). Default: #f8fafc.
Primary body font color in dark mode (Default: #f8fafc).

Headings Font Color (Dark Mode) [color_dark_heading_text] – Colour picker (HEX). Default: #ffffff.
Font color for H1-H6 headings in dark mode (Default: #ffffff).

Link Font Color (Dark Mode) [color_dark_link] – Colour picker (HEX). Default: #38bdf8.
Font color for hyperlinks in dark mode (Default: #38bdf8).

Dark Mode Link Hover Color [color_dark_link_hover] – Colour picker (HEX). Default: #7dd3fc.
Link hover text color in dark mode.

Header Background (Dark Mode) [color_dark_header_bg] – Colour picker (HEX). Default: #111827.
Background color for header in dark mode (Default: #111827).

Footer Background (Dark Mode) [color_dark_footer_bg] – Colour picker (HEX). Default: #111827.
Background color for footer in dark mode (Default: #111827).

Dark Mode Footer Text Color [color_dark_footer_text] – Colour picker (HEX). Default: #94a3b8.
Footer text color in dark mode.

Dark Mode Footer Link Color [color_dark_footer_link] – Colour picker (HEX). Default: #38bdf8.
Footer link anchor color in dark mode.

Table Header Background (Dark Mode) [table_dark_header_bg] – Colour picker (HEX). Default: #0f172a.
Background color for table <th> headers in dark mode (Default: #0f172a).

Table Header Text Color (Dark Mode) [table_dark_header_text] – Colour picker (HEX). Default: #f8fafc.
Font color for table <th> headers in dark mode (Default: #f8fafc).

Table Border Color (Dark) [table_dark_border] – Colour picker (HEX). Default: #1e293b.
Gridlines and cell border divider color in dark mode.

Table Zebra Striping BG (Dark) [table_dark_zebra_bg] – Colour picker (HEX). Default: #0b1120.
Alternating row background tint in dark mode.

Standout Row Highlight Tint (Dark Mode) [table_dark_highlight_bg] – Colour picker (HEX). Default: #2d2415.
Row highlight color in dark mode (Default: #2d2415).

📊 Global Table Behavior & Spacing

Table Header Style Preset [table_header_style] – Choose one: Muted Subtle Surface (Default Modern Clean), Dark Slate / Navy Header (Executive Standout), Primary Brand Color Tint, Transparent & Minimal, Custom Colors (Uses Light & Dark Header Controls Above). Default: Muted Subtle Surface (Default Modern Clean).
Select the background styling and theme preset for table headers across all pages and components.

Enable Row Hover Highlight [table_hover_effect] – On or Off (No / Yes). Default: Yes.
Enables subtle glow effect on table row hover.

Enable Alternating Row Zebra Stripes [table_striped] – On or Off (No / Yes). Default: No.
Enables subtle alternating background shading across even and odd table rows.

Table Row Spacing Density [table_density] – Choose one: Compact (Dense Data Tables), Comfortable (Balanced Modern), Spacious (Generous Executive Spacing). Default: Comfortable (Balanced Modern).
Choose vertical padding density for tables.

Tab 4: Typography Engine

Fine-tune website typography across 95 high-legibility Google Fonts and optimized system UI stacks. Configure base font sizes, heading scales (H1 through H3), navigation styling, table matrices, and code block styling.

Looking for Font & Text Colors?: All font colors for Body Text, Headings (H1-H6), Links, and Tables for both Light and Dark modes are customized under Tab 3: Presets & Colors.

🔤

Visual Section Typography Studio

Granular typography control across all site sections with zero-bloat on-demand Google Fonts preloading.

🔤 BODY TEXT

Editorial content

🧭 NAVIGATION

Header & menus

📰 HERO RIBBON

Article headlines

🏷️ HEADINGS

H1 to H6 scale

📊 DATA TABLES

Tabular matrices

🦶 FOOTER

Sub-footer widgets

🔤 Primary Font Families (50+ Curated Fonts)

Body Font Family [font_family] – Choose one: System UI (Ultra-fast Native), Open Sans (Modern Classic), Inter (Pixel-Perfect UI), Plus Jakarta Sans (SaaS & Modern), Outfit (Futuristic Minimalist) … (51 in all). Default: Open Sans (Modern Classic).
Primary typography font family.

Headings Font Family [heading_font_family] – Choose one: Same as Body Font, Open Sans, Inter, Plus Jakarta Sans, Outfit … (20 in all). Default: Same as Body Font.
Font family for H1-H6 headings.

📏 Font Scale & Transformation

Base Font Size [base_font_size] – Choose one: 14px (Compact), 15px (Subtle), 16px (Standard Default), 17px (Spacious), 18px (Large Accessible). Default: 16px (Standard Default).
Root body font size.

Body Line Height [body_line_height] – Choose one: 1.45 (Compact), 1.55 (Standard Modern Default), 1.65 (Relaxed Editorial), 1.75 (Spacious Book). Default: 1.55 (Standard Modern Default).
Vertical line spacing for paragraphs and body content.

Heading Text Transform [heading_transform] – Choose one: None (Natural Case), UPPERCASE, Capitalize. Default: None (Natural Case).
Letter casing for headings.

Navigation Menu Typography Studio

🧭 Navigation Font Family [nav_font_family] – Choose one: Same as Body Font, System UI (Ultra-fast Native), Open Sans (Modern Classic), Inter (Pixel-Perfect UI), Plus Jakarta Sans (SaaS & Modern) … (52 in all). Default: Same as Body Font.
Select a distinct font family for desktop and mobile navigation links.

Navigation Font Size [nav_font_size] – Choose one: 13px (Compact), 14px (Subtle), 15px (Standard Modern), 16px (Prominent), 17px (High-Legibility). Default: 15px (Standard Modern).
Font size for top-level desktop menu links.

Navigation Font Weight [nav_font_weight] – Choose one: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold), 800 (Extra Bold). Default: 600 (Semi-Bold).
Font weight (thickness) for main menu links.

Navigation Text Transform [nav_transform] – Choose one: None (Natural Case), UPPERCASE, Capitalize. Default: None (Natural Case).
Text capitalization style for navigation items.

Navigation Letter Spacing [nav_letter_spacing] – Choose one: Tight (-0.01em), Normal, Subtle (0.02em), Spacious (0.04em), Wide Caps (0.08em). Default: Normal.
Horizontal character tracking for navigation items.

📰 Article Hero Ribbon & Banner Typography

📰 Article Hero Font Family [hero_font_family] – Choose one: Same as Heading / Body Font, System UI (Ultra-fast Native), Open Sans (Modern Classic), Inter (Pixel-Perfect UI), Plus Jakarta Sans (SaaS & Modern) … (52 in all). Default: Same as Heading / Body Font.
Select a distinct display or editorial font family for hero ribbon headlines.

Headings Scale Studio (H1 - H3)

Heading 1 (H1) Size [h1_font_size] – Choose one: 1.85rem (Subtle), 2.00rem (Compact), 2.25rem (Standard Default), 2.50rem (Bold Headline), 2.85rem (Impactful Display), 3.25rem (Editorial Hero). Default: 2.25rem (Standard Default).
Primary page and article title font size.

Heading 2 (H2) Size [h2_font_size] – Choose one: 1.50rem (Compact), 1.75rem (Standard Default), 2.00rem (Prominent), 2.25rem (Bold). Default: 1.75rem (Standard Default).
Major section headline font size.

Heading 3 (H3) Size [h3_font_size] – Choose one: 1.20rem (Subtle), 1.375rem (Standard Default), 1.50rem (Prominent), 1.65rem (Bold). Default: 1.375rem (Standard Default).
Sub-section and card title font size.

Table Typography & Data Matrix Studio

Table Font Family [table_font_family] – Choose one: Same as Body Font, System Monospace, JetBrains Mono (Developer Data), Inter (UI Numbers), Roboto (Material Data), Plus Jakarta Sans. Default: Same as Body Font.
Font family used for tables, rosters, and data listings across template and page builder.

Table Header (TH) Font Size [table_th_font_size] – Choose one: 12px (Compact Dense), 13px (Subtle), 14px (Standard Default), 15px (Comfortable), 16px (Prominent). Default: 14px (Standard Default).
Font size for table header cells.

Table Header Text Transform [table_th_transform] – Choose one: UPPERCASE (Standard Modern), None (Natural Case), Capitalize. Default: UPPERCASE (Standard Modern).
Capitalization casing for table column headings.

Table Header Font Weight [table_th_weight] – Choose one: 600 (Semi-Bold), 700 (Bold Default), 800 (Extra Bold). Default: 700 (Bold Default).
Font weight for table column headings.

Table Body (TD) Font Size [table_td_font_size] – Choose one: 13px (Compact), 14px (Subtle), 15px (Standard Default), 16px (Spacious Large). Default: 15px (Standard Default).
Font size for table body data rows.

Footer Typography

🦶 Footer Font Family [footer_font_family] – Choose one: Same as Body Font, System UI (Ultra-fast Native), Open Sans (Modern Classic), Inter (Pixel-Perfect UI), Plus Jakarta Sans (SaaS & Modern) … (52 in all). Default: Same as Body Font.
Select a distinct font family for the footer section.

Footer Font Size [footer_font_size] – Choose one: 12px (Compact), 13px (Subtle), 14px (Standard Default), 15px (Spacious). Default: 14px (Standard Default).
Font size for footer copyright, disclaimers, and bottom links.

Footer Font Weight [footer_font_weight] – Choose one: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold). Default: 400 (Regular).
Font weight (thickness) for footer text.

Tab 5: Layout, Grid & Sidebars

Manage canvas structure (Fluid vs Boxed), container widths, section vertical padding, grid gutters, sticky sidebars, column dividers, breadcrumbs, and bottom module grid visibility.

📐 Canvas Structure & Fluidity

Layout Structure Mode [layout_mode] – Choose one: Full Width (Fluid Edge-to-Edge), Boxed (Centered Container with Frame Shadow), Framed (Framed Modern Canvas with Outer Padding). Default: Full Width (Fluid Edge-to-Edge).
Choose between modern 100% fluid edge-to-edge layout, centered boxed container, or framed canvas.

Container Max Width [container_max_width] – Choose one: 1140px (Standard Classic), 1280px (Modern Web Default), 1440px (Spacious Desktop), 1600px (Ultra-Wide Canvas), 100% (Fluid / Full Bleed). Default: 1280px (Modern Web Default).
Maximum width for standard page content containers.

Alternating Section Row Background [section_alt_bg] – Colour picker (HEX). Default: #f1f5f9.
Background color for alternating content bands and section containers.

Section Vertical Spacing [container_padding_y] – Choose one: Dense (2rem / 32px), Standard (3.5rem / 56px Default), Spacious (5rem / 80px). Default: Standard (3.5rem / 56px Default).
Top and bottom breathing room padding for full-width sections.

🏛️ Grid Gutter & Spacing

Grid Gutter / Column Gap [grid_gutter] – Choose one: None (0px Flush), Compact (16px), Standard (24px - Default), Spacious (32px), Wide (40px). Default: Standard (24px - Default).
Spacing gap between main body content and sidebar columns.

📑 Sidebar Studio (Sticky & Alignment)

Sidebar Column Width [sidebar_width] – Choose one: 260px (Compact), 300px (Balanced Default), 340px (Spacious), 380px (Wide Column). Default: 300px (Balanced Default).
Width allocated to left and right sidebar columns.

Sticky Sidebars on Scroll [sidebar_sticky] – On or Off (No / Yes). Default: Yes.
Allows sidebar modules to float smoothly into view during long articles, lessons, and portal tables.

Sidebar Vertical Column Divider [sidebar_divider] – On or Off (No / Yes). Default: No.
Draws an elegant 1px subtle divider line between sidebars and main content.

Sidebar Ordering Preset [sidebar_ordering] – Choose one: Standard Split (Sidebar Left + Content + Sidebar Right), Both Sidebars Left (Left 1 + Left 2 + Main Content), Both Sidebars Right (Main Content + Right 1 + Right 2). Default: Standard Split (Sidebar Left + Content + Sidebar Right).
Ordering alignment when multiple sidebars are published.

🍞 Breadcrumb Navigation

Show Breadcrumbs [show_breadcrumbs] – On or Off (No / Yes). Default: Yes.
Display breadcrumb path on standard pages.

Footer & Bottom Grid Architecture

Show Site Footer [show_footer] – On or Off (No / Yes). Default: Yes.
Enable or disable the entire site footer and copyright bar on pages using this template style.

Hide Footer on Menu Items [hide_footer_menuitems] – Text. Default: Blank (empty).
Comma-separated Menu Item IDs (e.g. 101, 105, 120) where the site footer should be hidden. Conditional: active when show_footer:1.

Show Bottom Modules Grid [show_bottom_modules] – On or Off (No / Yes). Default: Yes.
Show or hide the bottom-1 through bottom-4 module grid above the footer. Conditional: active when show_footer:1.

Tab 6: Content, Blog & Launchpad

Empowers your content experience with a high-impact Article Hero Ribbon, reading progress bar, estimated reading time, author bio cards, social share buttons, JetBrains Mono code highlighting, and the built-in Coming Soon / Launchpad engine.

🚀 Coming Soon & Launchpad Mode

Enable Coming Soon Mode [coming_soon_enable] – On or Off (No / Yes). Default: No.
Enable full-screen coming soon mode to display a countdown landing page to visitors.

Coming Soon Display Mode [coming_soon_mode] – Choose one: Built-in Live Countdown & Launchpad Hero, Custom Metro Page Builder Landing Page. Default: Built-in Live Countdown & Launchpad Hero.
Choose whether to display MetroG's built-in live countdown hero or use a custom Metro Page Builder page. Conditional: active when coming_soon_enable:1.

Select Metro Page Builder Page [coming_soon_mpb_page_id] – Metro Page Builder page selector.
Choose a published Metro Page Builder page to serve as the Coming Soon landing canvas. Conditional: active when coming_soon_enable:1[AND]coming_soon_mode:mpb_page.

Coming Soon Badge Text [coming_soon_badge] – Text. Default: Welcome Visitor!.
Text displayed in the badge pill above the title (e.g. Welcome Visitor!). Conditional: active when coming_soon_enable:1[AND]coming_soon_mode:preset.

Target Launch Date & Time [coming_soon_date] – Date and time picker. Default: 2026-12-31 00:00:00.
Set the target date for the live countdown timer. Conditional: active when coming_soon_enable:1[AND]coming_soon_mode:preset.

Coming Soon Title [coming_soon_title] – Text. Default: Something Extraordinary is in the Making.
Headline for the coming soon screen. Conditional: active when coming_soon_enable:1[AND]coming_soon_mode:preset.

Coming Soon Description [coming_soon_desc] – Multi-line text / Code. Default: Our new digital campus portal and online learning experience will launch shortly. Stay tuned!.
Subtitle / announcement text. Conditional: active when coming_soon_enable:1[AND]coming_soon_mode:preset.

Allow Administrator Bypass [coming_soon_allow_admin] – On or Off (No / Yes). Default: Yes.
Allows logged-in Super Users and Administrators to view and browse the full live site normally. Conditional: active when coming_soon_enable:1.

Article Header & Hero Ribbon Studio

Article Header Layout [article_header_style] – Choose one: Contained Hero Ribbon, Full-Width Cinematic Banner, Hero Split (Two-Column Hero with Media), Hero Minimal (Lightweight Compact), Standard Inline. Default: Contained Hero Ribbon.
Choose between standard inline title, a contained rounded hero ribbon, or a full-width cinematic header.

Ribbon Background Source [article_header_bg] – Choose one: Article Image (Intro or Fulltext), Animated Gradient Mesh, Gradient Sunset (Crimson Rose & Amber), Gradient Ocean (Emerald & Cyan), Gradient Aurora (Emerald & Deep Purple) … (7 in all). Default: Article Image (Intro or Fulltext).
Select whether to use the article's own intro/full image, an animated gradient mesh, or subtle preset surface. Conditional: active when article_header_style:hero_ribbon,hero_banner,hero_split.

🖼️ Background Fit & Stretch [article_header_bg_stretch] – Choose one: Cover & Fill Frame (Responsive Auto-Stretch), Contain Center (Aspect Ratio Preserved), Parallax Fixed (Fixed Viewport Scrolling). Default: Cover & Fill Frame (Responsive Auto-Stretch).
Controls how the hero background image or gradient adapts to wide screens. Conditional: active when article_header_style:hero_ribbon,hero_banner,hero_split.

Category Badge Position [article_category_position] – Choose one: Underneath Article Title, Above Article Title (Overline), Floating Badge (Top Left Corner), Floating Badge (Top Right Corner), Inline (Inside Metadata Row). Default: Underneath Article Title.
Display category badge neatly underneath or above the article title.

Background Overlay Tint [article_header_overlay] – Choose one: Medium Dark Tint (60%), Deep Cinematic Tint (80%), Glassmorphism Tint & Blur. Default: Medium Dark Tint (60%).
Overlay gradient ensures maximum text contrast over photos and meshes. Conditional: active when article_header_style:hero_ribbon,hero_banner,hero_split.

Article Header Alignment [article_header_align] – Choose one: Left Aligned, Center Aligned, Right-Aligned, Split Layout (Headline Left, Meta Right). Default: Left Aligned.
Align article header title, category badge, and metadata to left or center.

✨ Pure CSS Background & Visual FX [article_header_css_effect] – Choose one: Animated Shimmer Wave (Smooth Gradient Drift), Gentle Ambient Pulse (Subtle Scale Breath), Subtle Elevation Float, Frosted Glass Backdrop Filter, Cinematic Dark Radial Vignette, None (Clean Static Surface). Default: Animated Shimmer Wave (Smooth Gradient Drift).
Select zero-dependency CSS visual effects for the hero ribbon. Conditional: active when article_header_style:hero_ribbon,hero_banner,hero_split.

Hero Ribbon Title Size [hero_title_size] – Choose one: 1.75rem (Subtle Compact), 2.00rem (Medium), 2.25rem (Standard Headline), 2.50rem (Bold Display Default), 2.85rem (Impactful Hero), 3.25rem (Cinematic Magazine). Default: 2.50rem (Bold Display Default).
Font size for article hero ribbon titles. Conditional: active when article_header_style:hero_ribbon,hero_banner.

Hero Ribbon Title Weight [hero_title_weight] – Choose one: 600 (Semi-Bold), 700 (Bold), 800 (Extra Bold Default), 900 (Black Impact). Default: 800 (Extra Bold Default).
Font weight for article hero ribbon titles. Conditional: active when article_header_style:hero_ribbon,hero_banner.

Hero Ribbon Background Tint [hero_bg_color] – Colour picker (HEX). Default: #0f172a.
Custom background color for hero ribbon header. Conditional: active when article_header_style:hero_ribbon,hero_banner.

Hero Ribbon Text Color [hero_text_color] – Colour picker (HEX). Default: #ffffff.
Title and metadata text color inside the hero ribbon. Conditional: active when article_header_style:hero_ribbon,hero_banner.

📖 Article Reading Experience

Article Reading Progress Bar [show_reading_progress] – On or Off (No / Yes). Default: Yes.
Display an indicator line at top of screen tracking scroll progress through articles.

Show Reading Time Estimate [show_reading_time] – On or Off (No / Yes). Default: Yes.
Display calculated reading time in article metadata.

Code Highlighting & JetBrains Mono [code_highlight_enable] – On or Off (No / Yes). Default: Yes.
Enable JetBrains Mono typography, modern dark developer card styling, and 1-click clipboard copy for code blocks and [code] shortcodes.

Featured Image Aspect Ratio [featured_image_ratio] – Choose one: 16:9 Landscape (Standard), 4:3 Photo, 21:9 Cinematic, Auto / Natural Ratio. Default: 16:9 Landscape (Standard).
Aspect ratio for article featured images.

✍️ Author Profile & Social Sharing

Show Social Share Buttons [show_social_share] – On or Off (No / Yes). Default: Yes.
Display 1-click social sharing buttons on articles.

Social Share Bar Style [social_share_style] – Choose one: Icons & Labels, Icons Only (Compact Circle Buttons). Default: Icons & Labels.
Display social share buttons with both icons and network labels or icons only. Conditional: active when show_social_share:1.

📤 Social Share Bar Placement [social_share_position] – Choose one: Below Article Content (Standard), Directly Under Hero Ribbon (Prominent), Dual Placement (Both Top & Bottom). Default: Below Article Content (Standard).
Position the social sharing buttons relative to the article ribbon and editorial body. Conditional: active when show_social_share:1.

Show Author Bio Card [show_author_box] – On or Off (No / Yes). Default: Yes.
Display author profile box at the bottom of articles.

Author Box Card Layout [author_box_layout] – Choose one: Modern Card (Prominent Bio & Avatar Ring), Compact Card (Slim Horizontal Strip). Default: Modern Card (Prominent Bio & Avatar Ring).
Choose layout structure for author profile card. Conditional: active when show_author_box:1.

Author Box Alignment [author_box_align] – Choose one: Left Aligned, Center Aligned. Default: Left Aligned.
Align author card content to the left or center. Conditional: active when show_author_box:1.

Author X (Twitter) Profile URL [author_twitter] – Text. Default: Blank (empty).
Optional URL to author's X/Twitter profile. Conditional: active when show_author_box:1.

Author LinkedIn Profile URL [author_linkedin] – Text. Default: Blank (empty).
Optional URL to author's LinkedIn profile. Conditional: active when show_author_box:1.

Author Personal Website URL [author_website] – Text. Default: Blank (empty).
Optional URL to author's personal website or portfolio. Conditional: active when show_author_box:1.

Show Related Articles [show_related_articles] – On or Off (No / Yes). Default: Yes.
Display up to 3 relevant articles from the same category at the footer of the post.

Open Graph Social Meta [show_opengraph] – On or Off (No / Yes). Default: Yes.
Automatically generates rich social preview tags (og:title, og:image, twitter:card) for social networks.

Tab 7: Ecosystem Integration

Coordinates multi-extension harmony between MetroG, Metro Page Builder, Adhrit LMS, and Rudra Pro ERP. Configure full-bleed canvas takeover, distraction-free LMS video players, curriculum sidebar width/position, and design token synchronization.

📄 Metro Page Builder Integration

Metro Page Builder Full-Bleed Takeover [mpb_auto_takeover] – On or Off (No / Yes). Default: Yes.
Automatically removes boxed containers when viewing Metro Page Builder pages for 100vw canvas.

Metro Page Builder Header Handoff [mpb_header_handoff] – On or Off (No / Yes). Default: Yes.
Allows Metro Page Builder headers to take precedence over template header.

Template Header and Footer on Metro Pages [mpb_chrome] – Choose one: Show template header and footer, Hide template header, Hide template footer, Hide template header and footer. Default: Show template header and footer.
Some Metro Page Builder page families (Metro Adhrit LMS, Sports) include their own header and footer. Hide the template's on Metro Page Builder pages so a page does not show two. Has no effect on other pages, or on a site without Metro Page Builder.

🎓 Rudra Pro ERP & Adhrit LMS Portal Shells

Rudra Pro ERP Portal Shell [rudra_portal_shell] – On or Off (No / Yes). Default: Yes.
Enables role-aware portal styling and responsive data grid formatting for Rudra ERP.

Adhrit LMS Distraction-Free Player Mode [adhrit_player_mode] – On or Off (No / Yes). Default: Yes.
Enables dedicated focus mode for lessons, videos, and quizzes in Adhrit LMS.

Adhrit LMS Clean Canvas Full-Width [adhrit_fullwidth] – On or Off (No / Yes). Default: Yes.
When enabled, automatically suppresses left and right template sidebars and expands course details, lesson player, teacher profile, and curriculum views to a clean, full-width responsive canvas.

Full-Width Adhrit Views [adhrit_fullwidth_scope] – Choose one: All Adhrit LMS views, Learning views only. Default: All Adhrit LMS views.
Every Adhrit LMS view, or only the learning views (course, lessons, quizzes, SCORM player, training, cart and payment) so catalogue, events and teacher lists keep the template sidebars. Conditional: active when adhrit_fullwidth:1.

Lesson Sidebar Position [adhrit_lesson_sidebar_pos] – On or Off (Right (Recommended) / Left). Default: Right (Recommended).
Choose whether the course curriculum sidebar in the Adhrit LMS lesson player appears on the right or left side.

Lesson Sidebar Width [adhrit_lesson_sidebar_width] – Choose one: Standard (25% / 3 Columns), Comfortable (33% / 4 Columns). Default: Standard (25% / 3 Columns).
Choose the column width of the curriculum sidebar on desktop screens (col-md-3 = 25% width, col-md-4 = 33% width).

🔄 Cross-Component Design Token Sync

Synchronize Design Tokens [sync_design_tokens] – On or Off (No / Yes). Default: Yes.
Maps MetroG CSS variables directly to --mpb-*, --adhritlms-*, and --rudra-* tokens.

Adaptive Section Contrast Engine [adaptive_contrast] – On or Off (No / Yes). Default: Yes.
Detects dark or light section backgrounds in articles, modules and component views and supplies high-contrast text where none was chosen, preventing dark-on-dark or white-on-white text. Metro Page Builder pages, and any colour an author set, are left exactly as designed.

Tab 8: Performance, Code & Analytics

Enterprise performance tuning and custom script injection. Manage CSS/JS minification, cookie stripping, aggressive browser caching, image lazy loading, font preloading, Google Analytics 4, and custom CSS/JS snippets.

⚡ Optimization & Asset Preloading

Enable Asset Optimization [enable_css_minify] – On or Off (No / Yes). Default: Yes.
Enables native Web Asset manager caching and preloading.

Strip Static Asset Cookies (Pingdom F40) [strip_static_cookies] – On or Off (No / Yes). Default: Yes.
Automatically strips Set-Cookie and Cookie headers on static asset requests (CSS, JS, images, fonts) to emulate a cookie-free domain and prevent header bloat.

Aggressive Browser Caching & Expires (Pingdom F0) [aggressive_cache_headers] – On or Off (No / Yes). Default: Yes.
Injects Cache-Control: public and 1-hour to 1-year Expires headers for guest visitors directly at PHP level.

Enable Native Image Lazy Loading [enable_lazyload] – On or Off (No / Yes). Default: Yes.
Enables loading='lazy' across all article and category images.

Preload Critical Web Fonts [font_preload] – On or Off (No / Yes). Default: Yes.
Adds rel='preload' for critical fonts to eliminate layout shift (CLS).

⚡ Server-Level .htaccess Optimization (Grade A 95+): For 100% Grade A scores on Pingdom, ensure the rules in 'htaccess-performance.txt' (included in this template) are merged into your Joomla site root '.htaccess' file. This enables Brotli/Gzip (F12), 1-year Expires headers (F0), and server-level static cookie stripping (F40).

📊 Web Analytics (Google Analytics 4)

Google Analytics 4 ID [analytics_id] – Text. Default: Blank (empty).
Enter GA4 measurement ID (e.g. G-XXXXXXXXXX).

💻 Custom Code & Scripts Injection

Custom CSS [custom_css] – Multi-line text / Code. Default: Blank (empty).
Add custom CSS rules without modifying core template files.

Custom Header JavaScript / Meta [custom_header_js] – Multi-line text / Code. Default: Blank (empty).
Injected inside the <head> tag.

Custom Footer JavaScript / Analytics [custom_footer_js] – Multi-line text / Code. Default: Blank (empty).
Injected before the closing </body> tag.

3. Brand Architecture & 4-Way Slogan Placement

In MetroG, branding is completely decoupled and supports both image logos and text-based typography. The site slogan is fully customizable and defaults cleanly to an empty state so no placeholder text is rendered if unconfigured.

Configuring Slogan Placement (Tab 1: Header, Navigation & Mobile):

Slogan Text (logo_slogan): Enter your organization's motto or tagline (e.g. Empowering Lifelong Learners). If left blank, zero slogan markup is output to the DOM.
Slogan Position (logo_slogan_position): Choose where the slogan sits relative to your logo:
- under – Under Logo (Default): Renders cleanly stacked beneath the logo graphic or text mark.
- top – Above Logo: Positions the slogan as a subtle eyebrow header above the brand title.
- left – Left of Logo: Places the tagline to the left on desktop screens.
- right – Right of Logo: Places the tagline adjacent to the logo on the right side.

Mobile Responsive Behavior: On viewports smaller than 768px, horizontal placements (Left/Right) automatically wrap to a clean column layout to prevent navbar overcrowding.

4. Granular Chrome & Navigation Visibility Controls

You can suppress the Header, Navigation Menu, Footer, or Bottom Modules without writing custom code or template overrides. MetroG supports both Joomla Multi-Style Assignment and Direct Menu Item ID Exclusion.

Control Parameter	Location	Function & Usage
`show_header` & `hide_header_menuitems`	Tab 1 (Header & Nav)	Completely toggles the main header. Enter comma-separated menu item IDs (e.g. `101, 105, 120`) to hide the header on specific landing pages.
`show_main_nav` & `hide_nav_menuitems`	Tab 1 (Header & Nav)	Suppresses the desktop navigation menu and mobile hamburger toggle while keeping logo and action buttons intact.
`show_footer` & `hide_footer_menuitems`	Tab 5 (Layout & Grid)	Toggles the site footer and copyright bar. Supports ID exclusion for focused funnel pages.
`show_bottom_modules`	Tab 5 (Layout & Grid)	Enables or disables the bottom-1 through bottom-4 module grid across the entire style.

5. Professional Smart Search (com_finder) Suite

MetroG features a custom override suite for Joomla's native Smart Search (com_finder) providing modern UX, clean input groups, and sanitized front-end taxonomy labels.

Front-End Software Name Neutralization: Site visitors never see developer-facing software product names. In taxonomy dropdown filters, search result badges, and content categories, Metro Page Builder is automatically rendered as Pages (with document badge), and Adhrit LMS is rendered as Courses (with graduation cap badge).

Input-Group Search Bar: Perfectly centered text input with clean interior padding, primary submit button with magnifying glass SVG icon, and secondary outline toggle for Advanced Search.
Collapsible Advanced Search Drawer: Smoothly expands to reveal taxonomy filters (Content Type, Categories, Authors, Language) and search query guidance tips (explaining Boolean operators AND, OR, NOT, and quoted phrases).
1-Click Empty State Discovery: When a search returns no results, MetroG automatically displays a "Search in Courses Catalog" button directing learners to explore your educational offerings.

Standard Joomla login forms frequently redirect users to the generic profile page (index.php?option=com_users&view=profile). MetroG resolves this permanently with an automated 5-Tier Redirection Cascade that keeps users on their intended path:

Tier 1 (Explicit Request Return): If the user clicked a login button on a specific article, course, or checkout page, the base64-encoded return target returns them right back to that page upon successful authentication.
Tier 2 (Form/View State Target): Preserves specific redirects declared by component forms or plugins.
Tier 3 (Menu Item Setting): Respects the 'Login Redirect' parameter configured on the active Joomla Menu Item.
Tier 4 (Template Style Option): Under Tab 1 (login_redirect_menuitem), select a designated portal page (such as your Member Dashboard or Student Hub).
Tier 5 (Intelligent Ecosystem Default): Automatically routes users to Adhrit LMS My Purchases/Courses or Rudra ERP Dashboard when installed, with a clean root homepage fallback.

7. Mobile Header & Drawer Harmony

MetroG is rigorously optimized for mobile devices and handheld touch screens:

Circular Guest Action Button: On viewports under 768px, the login action automatically transforms into a 38x38px circular icon button matching header icon styling, preventing awkward text wrapping and navbar height jumps.
Truncated User Identity: Logged-in usernames on mobile display the first word or first 5 characters (e.g. Surya) with a tooltip, avoiding crowded headers while retaining full desktop display.
Bidirectional Drawer Closing: Opening MetroG's off-canvas drawer automatically dismisses any open component drawers, and tapping an external toggle smoothly closes MetroG's drawer.
Accessible Accordion Touch Targets: Submenu chevrons feature a minimum 44x44px hit target compliant with WCAG 2.1 touch criteria. Menu Headings and Separators act as interactive accordion headers.

8. Adhrit LMS Player & Curriculum Harmony

For e-learning websites using Adhrit LMS, MetroG delivers a dedicated learning theater shell:

Distraction-Free Player: Suppresses distracting sidebars on lesson player views to maximize focus on video lectures, text content, and quizzes.
Curriculum Sidebar Placement & Width: Configure the lesson navigation sidebar on the Right (default) or Left side, and choose between 25% (3 Columns) or 33% (4 Columns) width via Tab 7.
High-Contrast Active Lessons: Active lesson items feature a prominent accent border, tinted background, and bold text, eliminating washed-out white text defects.
Clean Chapter Chips: Curriculum modules are styled as sleek, foldable accordions with modern progress track bars.

9. Upgrade-Safe Custom CSS (user.css)

To add custom styling rules that are guaranteed never to be lost during template updates, use MetroG's built-in user.css facility:

Open templates/metrog/css/user.css via FTP, cPanel File Manager, or the Joomla Administrator under System → Site Templates → metrog Details and Files.
Add your custom CSS declarations at the bottom of the file.
Automated Upgrade Backup: MetroG's installer script (script.php) automatically snapshots your custom CSS in preflight before Joomla extracts an update, and safely restores your exact rules in postflight.
Zero Performance Penalty: If user.css contains only comments, MetroG avoids enqueuing the file entirely, saving an unnecessary HTTP request.

10. Pingdom Grade A Performance Tuning

MetroG ships with enterprise asset optimizations designed to score 95+ (Grade A) on Pingdom, GTmetrix, and Google PageSpeed Insights:

Single Production Bundle: All layout, token, and navigation rules are compiled into a single minified file (metrog-bundle.min.css).
Static Asset Cookie Stripping: Enable strip_static_cookies in Tab 8 to eliminate HTTP cookie headers on CSS, JS, and image assets, satisfying Pingdom Rule F40.
Aggressive Browser Caching: Enable aggressive_cache_headers in Tab 8 to set 1-year Cache-Control and Expires headers, satisfying Pingdom Rule F0.
Critical Font Preloading: Automatically injects rel="preload" tags for primary typography, preventing Flash of Unstyled Text (FOUT).

11. Theme Switcher & Default Mode Configuration

MetroG provides complete administrative control over how dark and light themes are presented to visitors:

Enable Theme Switcher (enable_theme_toggle): Under Tab 3: Presets & Colors, set this toggle to YES to render an accessible 38px circular toggle button in the header actions bar next to search and login. Visitors can click this button at any time to toggle between light and dark modes. When set to NO, the toggle button is completely suppressed from the front-end.
Default Theme Mode (default_theme): Sets the initial presentation theme for new visitors arriving at your site:
- Light Mode: Starts with crisp light surfaces and rich dark typography.
- Dark Mode: Starts with deep OLED dark surfaces (#090d16 / #111827) immediately upon arrival with zero paint flicker.
- System (Device Preference): Automatically respects the visitor's operating system and browser preferences (prefers-color-scheme: dark).
Zero-Shift Anti-FOUC Architecture: Theme preferences are enforced server-side via <html data-theme="..."> and synchronized synchronously in <head> before CSS rules execute, guaranteeing zero flash of unstyled theme on page load or refresh.

© 2026 MixAgile.com. MetroG-Template is released under the GNU General Public License v2 or later.
For technical support and commercial inquiries, contact This email address is being protected from spambots. You need JavaScript enabled to view it..