2026-06-18 15:35:28 +00:00
7 changed files with 353 additions and 4 deletions
@@ -113,7 +113,7 @@ releases/
 build/
 dist/
 out/
-site/
+/site/
 *.map
 *.css.map
 *.js.map
@@ -0,0 +1,91 @@
+<?php
+/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
+
+ This file is part of a Moko Consulting project.
+
+ SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Language\Text;
+
+/**
+ * Social icons layout — rendered by index.php in topbar and/or footer.
+ *
+ * Expected $displayData keys:
+ *   'params'   => Joomla\Registry\Registry  (template params)
+ *   'position' => string                    ('topbar' | 'footer')
+ */
+
+$params   = $displayData['params'];
+$position = $displayData['position'] ?? 'footer';
+
+// Platform definitions: key => [FA icon class, language key for aria-label]
+$platforms = [
+    'facebook'   => ['fa-brands fa-facebook-f',   'TPL_MOKOONYX_SOCIAL_FACEBOOK'],
+    'twitter'    => ['fa-brands fa-x-twitter',     'TPL_MOKOONYX_SOCIAL_TWITTER'],
+    'instagram'  => ['fa-brands fa-instagram',     'TPL_MOKOONYX_SOCIAL_INSTAGRAM'],
+    'linkedin'   => ['fa-brands fa-linkedin-in',   'TPL_MOKOONYX_SOCIAL_LINKEDIN'],
+    'youtube'    => ['fa-brands fa-youtube',        'TPL_MOKOONYX_SOCIAL_YOUTUBE'],
+    'github'     => ['fa-brands fa-github',         'TPL_MOKOONYX_SOCIAL_GITHUB'],
+    'bluesky'    => ['fa-brands fa-bluesky',        'TPL_MOKOONYX_SOCIAL_BLUESKY'],
+    'threads'    => ['fa-brands fa-threads',        'TPL_MOKOONYX_SOCIAL_THREADS'],
+    'discord'    => ['fa-brands fa-discord',        'TPL_MOKOONYX_SOCIAL_DISCORD'],
+    'tiktok'     => ['fa-brands fa-tiktok',         'TPL_MOKOONYX_SOCIAL_TIKTOK'],
+    'reddit'     => ['fa-brands fa-reddit-alien',   'TPL_MOKOONYX_SOCIAL_REDDIT'],
+    'pinterest'  => ['fa-brands fa-pinterest-p',    'TPL_MOKOONYX_SOCIAL_PINTEREST'],
+    'snapchat'   => ['fa-brands fa-snapchat',       'TPL_MOKOONYX_SOCIAL_SNAPCHAT'],
+    'telegram'   => ['fa-brands fa-telegram',       'TPL_MOKOONYX_SOCIAL_TELEGRAM'],
+    'whatsapp'   => ['fa-brands fa-whatsapp',       'TPL_MOKOONYX_SOCIAL_WHATSAPP'],
+    'tumblr'     => ['fa-brands fa-tumblr',         'TPL_MOKOONYX_SOCIAL_TUMBLR'],
+    'twitch'     => ['fa-brands fa-twitch',         'TPL_MOKOONYX_SOCIAL_TWITCH'],
+    'spotify'    => ['fa-brands fa-spotify',        'TPL_MOKOONYX_SOCIAL_SPOTIFY'],
+    'soundcloud' => ['fa-brands fa-soundcloud',     'TPL_MOKOONYX_SOCIAL_SOUNDCLOUD'],
+    'flickr'     => ['fa-brands fa-flickr',         'TPL_MOKOONYX_SOCIAL_FLICKR'],
+    'vimeo'      => ['fa-brands fa-vimeo-v',        'TPL_MOKOONYX_SOCIAL_VIMEO'],
+    'linktree'   => ['fa-solid fa-link',            'TPL_MOKOONYX_SOCIAL_LINKTREE'],
+    'mail'       => ['fa-solid fa-envelope',        'TPL_MOKOONYX_SOCIAL_MAIL'],
+];
+
+// Collect enabled platforms (those with a non-empty URL)
+$active = [];
+foreach ($platforms as $key => [$iconClass, $langKey]) {
+    $url = trim((string) $params->get('social_' . $key . '_url', ''));
+    if ($url !== '' && preg_match('#^(https?://|mailto:|/)#i', $url)) {
+        $active[] = [
+            'url'       => $url,
+            'iconClass' => $iconClass,
+            'label'     => Text::_($langKey),
+        ];
+    }
+}
+
+if (empty($active)) {
+    return;
+}
+
+$style = in_array($params->get('social_icon_style'), ['plain', 'circle', 'rounded'], true)
+    ? $params->get('social_icon_style') : 'plain';
+$size  = in_array($params->get('social_icon_size'), ['sm', 'md', 'lg'], true)
+    ? $params->get('social_icon_size') : 'md';
+
+$listClass  = 'moko-social-icons';
+$listClass .= ' moko-social-icons--' . htmlspecialchars($style, ENT_QUOTES, 'UTF-8');
+$listClass .= ' moko-social-icons--' . htmlspecialchars($size, ENT_QUOTES, 'UTF-8');
+$listClass .= ' moko-social-icons--' . htmlspecialchars($position, ENT_QUOTES, 'UTF-8');
+?>
+<nav class="<?php echo $listClass; ?>" aria-label="<?php echo Text::_('TPL_MOKOONYX_SOCIAL_NAV_LABEL'); ?>">
+    <ul>
+        <?php foreach ($active as $item) : ?>
+        <li>
+            <a href="<?php echo htmlspecialchars($item['url'], ENT_QUOTES, 'UTF-8'); ?>"
+               target="_blank"
+               rel="noopener noreferrer"
+               aria-label="<?php echo htmlspecialchars($item['label'], ENT_QUOTES, 'UTF-8'); ?>">
+                <span class="<?php echo htmlspecialchars($item['iconClass'], ENT_QUOTES, 'UTF-8'); ?>" aria-hidden="true"></span>
+            </a>
+        </li>
+        <?php endforeach; ?>
+    </ul>
+</nav>
@@ -436,9 +436,12 @@ $wa->useScript('user.js');         // js/user.js
 <?php if (!$hideHeaderHome) : ?>
 <header id="top" class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>" role="banner">

-	<?php if ($this->countModules('topbar')) : ?>
+	<?php if ($this->countModules('topbar') || $this->params->get('social_topbar')) : ?>
 		<div class="container-topbar">
 			<jdoc:include type="modules" name="topbar" style="none" />
+			<?php if ($this->params->get('social_topbar')) :
+				echo \Joomla\CMS\Layout\LayoutHelper::render('mokoonyx.social-icons', ['params' => $this->params, 'position' => 'topbar']);
+			endif; ?>
 		</div>
 	<?php endif; ?>

@@ -590,6 +593,11 @@ $wa->useScript('user.js');         // js/user.js
 </div>

 <footer class="container-footer footer full-width">
+	<?php if ($this->params->get('social_footer')) : ?>
+		<div class="grid-child footer-social">
+			<?php echo \Joomla\CMS\Layout\LayoutHelper::render('mokoonyx.social-icons', ['params' => $this->params, 'position' => 'footer']); ?>
+		</div>
+	<?php endif; ?>
 	<?php if ($this->countModules('footer-menu', true)) : ?>
 		<div class="grid-child footer-menu">
 			<jdoc:include type="modules" name="footer-menu" />
@@ -262,6 +262,54 @@ TPL_MOKOONYX_CSS_VARS_GABLE_DESC="Colour tokens used by the Gable extension.<br>
 TPL_MOKOONYX_CSS_VARS_FOOTER_LABEL="Footer"
 TPL_MOKOONYX_CSS_VARS_FOOTER_DESC="<strong>Spacing</strong><br><code>--footer-padding-top</code> — Top padding (default: <code>1rem</code>)<br><code>--footer-padding-bottom</code> — Bottom padding (default: <code>80px</code>)<br><code>--footer-grid-padding-y</code> — Grid vertical padding (default: <code>2.5rem</code>)<br><code>--footer-grid-padding-x</code> — Grid horizontal padding (default: <code>0.5em</code>)"

+; ===== Social Icons =====
+TPL_MOKOONYX_SOCIAL_FIELDSET_LABEL="Social Icons"
+TPL_MOKOONYX_SOCIAL_NOTE="<p>Add your social media profile URLs below. Only platforms with a URL will be displayed. Icons use Font Awesome 7 and inherit your template's theme colours.</p>"
+TPL_MOKOONYX_SOCIAL_TOPBAR_LABEL="Show in Topbar"
+TPL_MOKOONYX_SOCIAL_TOPBAR_DESC="Display social icons in the topbar area (right-aligned on desktop, centred on mobile)."
+TPL_MOKOONYX_SOCIAL_FOOTER_LABEL="Show in Footer"
+TPL_MOKOONYX_SOCIAL_FOOTER_DESC="Display social icons centred above the footer content."
+TPL_MOKOONYX_SOCIAL_STYLE_LABEL="Icon Style"
+TPL_MOKOONYX_SOCIAL_STYLE_DESC="Choose the visual style for social icons."
+TPL_MOKOONYX_SOCIAL_STYLE_PLAIN="Plain (no background)"
+TPL_MOKOONYX_SOCIAL_STYLE_CIRCLE="Circle background"
+TPL_MOKOONYX_SOCIAL_STYLE_ROUNDED="Rounded background"
+TPL_MOKOONYX_SOCIAL_SIZE_LABEL="Icon Size"
+TPL_MOKOONYX_SOCIAL_SIZE_DESC="Choose the size of social icons."
+TPL_MOKOONYX_SOCIAL_SIZE_SM="Small"
+TPL_MOKOONYX_SOCIAL_SIZE_MD="Medium"
+TPL_MOKOONYX_SOCIAL_SIZE_LG="Large"
+TPL_MOKOONYX_SOCIAL_URLS_NOTE="<p>Enter the full URL for each platform. Leave blank to hide that icon.</p>"
+TPL_MOKOONYX_SOCIAL_MAIL_DESC="Use a mailto: link (e.g. mailto:hello@example.com) or a contact page URL."
+TPL_MOKOONYX_SOCIAL_NAV_LABEL="Social media links"
+TPL_MOKOONYX_SOCIAL_FACEBOOK="Follow us on Facebook"
+TPL_MOKOONYX_SOCIAL_TWITTER="Follow us on X"
+TPL_MOKOONYX_SOCIAL_INSTAGRAM="Follow us on Instagram"
+TPL_MOKOONYX_SOCIAL_LINKEDIN="Follow us on LinkedIn"
+TPL_MOKOONYX_SOCIAL_YOUTUBE="Subscribe on YouTube"
+TPL_MOKOONYX_SOCIAL_GITHUB="Follow us on GitHub"
+TPL_MOKOONYX_SOCIAL_BLUESKY="Follow us on Bluesky"
+TPL_MOKOONYX_SOCIAL_THREADS="Follow us on Threads"
+TPL_MOKOONYX_SOCIAL_DISCORD="Join us on Discord"
+TPL_MOKOONYX_SOCIAL_TIKTOK="Follow us on TikTok"
+TPL_MOKOONYX_SOCIAL_REDDIT="Join us on Reddit"
+TPL_MOKOONYX_SOCIAL_PINTEREST="Follow us on Pinterest"
+TPL_MOKOONYX_SOCIAL_SNAPCHAT="Follow us on Snapchat"
+TPL_MOKOONYX_SOCIAL_TELEGRAM="Join us on Telegram"
+TPL_MOKOONYX_SOCIAL_WHATSAPP="Chat on WhatsApp"
+TPL_MOKOONYX_SOCIAL_TUMBLR="Follow us on Tumblr"
+TPL_MOKOONYX_SOCIAL_TWITCH="Follow us on Twitch"
+TPL_MOKOONYX_SOCIAL_SPOTIFY="Listen on Spotify"
+TPL_MOKOONYX_SOCIAL_SOUNDCLOUD="Listen on SoundCloud"
+TPL_MOKOONYX_SOCIAL_FLICKR="Follow us on Flickr"
+TPL_MOKOONYX_SOCIAL_VIMEO="Follow us on Vimeo"
+TPL_MOKOONYX_SOCIAL_LINKTREE="Visit our Linktree"
+TPL_MOKOONYX_SOCIAL_MAIL="Email us"
+
+; ===== CSS Variables tab (social) =====
+TPL_MOKOONYX_CSS_VARS_SOCIAL_LABEL="Social Icons"
+TPL_MOKOONYX_CSS_VARS_SOCIAL_DESC="<code>--social-icon-size</code> — Icon font size (overrides size preset)<br><code>--social-icon-gap</code> — Gap between icons (default: <code>0.5rem</code>)<br><code>--social-icon-color</code> — Icon colour (default: <code>currentColor</code>)<br><code>--social-icon-hover-color</code> — Hover colour (default: <code>var(--accent-color-primary)</code>)<br><code>--social-icon-bg</code> — Background for circle/rounded styles<br><code>--social-icon-hover-bg</code> — Hover background<br><code>--social-icon-radius</code> — Border radius for rounded style (default: <code>0.375rem</code>)"
+
 ; ===== Misc =====
 MOD_BREADCRUMBS_HERE="YOU ARE HERE:"

@@ -262,6 +262,54 @@ TPL_MOKOONYX_CSS_VARS_GABLE_DESC="Color tokens used by the Gable extension.<br><
 TPL_MOKOONYX_CSS_VARS_FOOTER_LABEL="Footer"
 TPL_MOKOONYX_CSS_VARS_FOOTER_DESC="<strong>Spacing</strong><br><code>--footer-padding-top</code> — Top padding (default: <code>1rem</code>)<br><code>--footer-padding-bottom</code> — Bottom padding (default: <code>80px</code>)<br><code>--footer-grid-padding-y</code> — Grid vertical padding (default: <code>2.5rem</code>)<br><code>--footer-grid-padding-x</code> — Grid horizontal padding (default: <code>0.5em</code>)"

+; ===== Social Icons =====
+TPL_MOKOONYX_SOCIAL_FIELDSET_LABEL="Social Icons"
+TPL_MOKOONYX_SOCIAL_NOTE="<p>Add your social media profile URLs below. Only platforms with a URL will be displayed. Icons use Font Awesome 7 and inherit your template's theme colors.</p>"
+TPL_MOKOONYX_SOCIAL_TOPBAR_LABEL="Show in Topbar"
+TPL_MOKOONYX_SOCIAL_TOPBAR_DESC="Display social icons in the topbar area (right-aligned on desktop, centered on mobile)."
+TPL_MOKOONYX_SOCIAL_FOOTER_LABEL="Show in Footer"
+TPL_MOKOONYX_SOCIAL_FOOTER_DESC="Display social icons centered above the footer content."
+TPL_MOKOONYX_SOCIAL_STYLE_LABEL="Icon Style"
+TPL_MOKOONYX_SOCIAL_STYLE_DESC="Choose the visual style for social icons."
+TPL_MOKOONYX_SOCIAL_STYLE_PLAIN="Plain (no background)"
+TPL_MOKOONYX_SOCIAL_STYLE_CIRCLE="Circle background"
+TPL_MOKOONYX_SOCIAL_STYLE_ROUNDED="Rounded background"
+TPL_MOKOONYX_SOCIAL_SIZE_LABEL="Icon Size"
+TPL_MOKOONYX_SOCIAL_SIZE_DESC="Choose the size of social icons."
+TPL_MOKOONYX_SOCIAL_SIZE_SM="Small"
+TPL_MOKOONYX_SOCIAL_SIZE_MD="Medium"
+TPL_MOKOONYX_SOCIAL_SIZE_LG="Large"
+TPL_MOKOONYX_SOCIAL_URLS_NOTE="<p>Enter the full URL for each platform. Leave blank to hide that icon.</p>"
+TPL_MOKOONYX_SOCIAL_MAIL_DESC="Use a mailto: link (e.g. mailto:hello@example.com) or a contact page URL."
+TPL_MOKOONYX_SOCIAL_NAV_LABEL="Social media links"
+TPL_MOKOONYX_SOCIAL_FACEBOOK="Follow us on Facebook"
+TPL_MOKOONYX_SOCIAL_TWITTER="Follow us on X"
+TPL_MOKOONYX_SOCIAL_INSTAGRAM="Follow us on Instagram"
+TPL_MOKOONYX_SOCIAL_LINKEDIN="Follow us on LinkedIn"
+TPL_MOKOONYX_SOCIAL_YOUTUBE="Subscribe on YouTube"
+TPL_MOKOONYX_SOCIAL_GITHUB="Follow us on GitHub"
+TPL_MOKOONYX_SOCIAL_BLUESKY="Follow us on Bluesky"
+TPL_MOKOONYX_SOCIAL_THREADS="Follow us on Threads"
+TPL_MOKOONYX_SOCIAL_DISCORD="Join us on Discord"
+TPL_MOKOONYX_SOCIAL_TIKTOK="Follow us on TikTok"
+TPL_MOKOONYX_SOCIAL_REDDIT="Join us on Reddit"
+TPL_MOKOONYX_SOCIAL_PINTEREST="Follow us on Pinterest"
+TPL_MOKOONYX_SOCIAL_SNAPCHAT="Follow us on Snapchat"
+TPL_MOKOONYX_SOCIAL_TELEGRAM="Join us on Telegram"
+TPL_MOKOONYX_SOCIAL_WHATSAPP="Chat on WhatsApp"
+TPL_MOKOONYX_SOCIAL_TUMBLR="Follow us on Tumblr"
+TPL_MOKOONYX_SOCIAL_TWITCH="Follow us on Twitch"
+TPL_MOKOONYX_SOCIAL_SPOTIFY="Listen on Spotify"
+TPL_MOKOONYX_SOCIAL_SOUNDCLOUD="Listen on SoundCloud"
+TPL_MOKOONYX_SOCIAL_FLICKR="Follow us on Flickr"
+TPL_MOKOONYX_SOCIAL_VIMEO="Follow us on Vimeo"
+TPL_MOKOONYX_SOCIAL_LINKTREE="Visit our Linktree"
+TPL_MOKOONYX_SOCIAL_MAIL="Email us"
+
+; ===== CSS Variables tab (social) =====
+TPL_MOKOONYX_CSS_VARS_SOCIAL_LABEL="Social Icons"
+TPL_MOKOONYX_CSS_VARS_SOCIAL_DESC="<code>--social-icon-size</code> — Icon font size (overrides size preset)<br><code>--social-icon-gap</code> — Gap between icons (default: <code>0.5rem</code>)<br><code>--social-icon-color</code> — Icon color (default: <code>currentColor</code>)<br><code>--social-icon-hover-color</code> — Hover color (default: <code>var(--accent-color-primary)</code>)<br><code>--social-icon-bg</code> — Background for circle/rounded styles<br><code>--social-icon-hover-bg</code> — Hover background<br><code>--social-icon-radius</code> — Border radius for rounded style (default: <code>0.375rem</code>)"
+
 ; ===== Misc =====
 MOD_BREADCRUMBS_HERE="YOU ARE HERE:"

@@ -38,7 +38,7 @@
 	nav,
 	.container-topbar,
 	.container-nav,
-	#rssocial-133,
+	.moko-social-icons,
 	.container-sidebar-right,
 	.container-sidebar-left,
 	.container-bottom-a,
@@ -23528,4 +23528,95 @@ font-size: 0.8125rem;
 .fa-brands {
 	margin-right: 0.25rem;
 }
-/* patch release test */
+
+/* ===== Social Icons ===== */
+.moko-social-icons ul {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	gap: var(--social-icon-gap, 0.5rem);
+}
+
+.moko-social-icons a {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--social-icon-color, currentColor);
+	text-decoration: none;
+	transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+}
+
+.moko-social-icons a:hover,
+.moko-social-icons a:focus-visible {
+	color: var(--social-icon-hover-color, var(--accent-color-primary, #3f8ff0));
+	transform: scale(1.15);
+}
+
+.moko-social-icons a .fa-brands,
+.moko-social-icons a .fa-solid {
+	margin-right: 0;
+}
+
+/* Size variants */
+.moko-social-icons--sm a { font-size: var(--social-icon-size, 1rem); }
+.moko-social-icons--md a { font-size: var(--social-icon-size, 1.25rem); }
+.moko-social-icons--lg a { font-size: var(--social-icon-size, 1.75rem); }
+
+/* Style: plain (default) — no background */
+.moko-social-icons--plain a {
+	width: auto;
+	height: auto;
+	padding: 0.25em;
+}
+
+/* Style: circle — round background */
+.moko-social-icons--circle a {
+	width: 2.2em;
+	height: 2.2em;
+	border-radius: 50%;
+	background-color: var(--social-icon-bg, rgba(255, 255, 255, 0.15));
+}
+
+.moko-social-icons--circle a:hover,
+.moko-social-icons--circle a:focus-visible {
+	background-color: var(--social-icon-hover-bg, rgba(255, 255, 255, 0.3));
+}
+
+/* Style: rounded — rounded-rect background */
+.moko-social-icons--rounded a {
+	width: 2.2em;
+	height: 2.2em;
+	border-radius: var(--social-icon-radius, 0.375rem);
+	background-color: var(--social-icon-bg, rgba(255, 255, 255, 0.15));
+}
+
+.moko-social-icons--rounded a:hover,
+.moko-social-icons--rounded a:focus-visible {
+	background-color: var(--social-icon-hover-bg, rgba(255, 255, 255, 0.3));
+}
+
+/* Position: topbar — align right */
+.moko-social-icons--topbar {
+	display: flex;
+	justify-content: flex-end;
+}
+
+/* Position: footer — centered */
+.moko-social-icons--footer {
+	display: flex;
+	justify-content: center;
+	padding: 1rem 0;
+}
+
+.footer-social {
+	align-items: center;
+}
+
+@media (max-width: 767.98px) {
+	.moko-social-icons--topbar {
+		justify-content: center;
+	}
+}
+/* ===== End Social Icons ===== */
@@ -324,6 +324,68 @@
 				</field>
 			</fieldset>

+			<!-- Social icons tab -->
+			<fieldset name="social" label="TPL_MOKOONYX_SOCIAL_FIELDSET_LABEL">
+				<field name="social_note" type="note" description="TPL_MOKOONYX_SOCIAL_NOTE" />
+
+				<!-- Display toggles -->
+				<field name="social_sep_display" type="spacer" label="Display" hr="false" class="text fw-bold" />
+				<field name="social_topbar" type="radio" default="0"
+							 label="TPL_MOKOONYX_SOCIAL_TOPBAR_LABEL" description="TPL_MOKOONYX_SOCIAL_TOPBAR_DESC"
+							 layout="joomla.form.field.radio.switcher" filter="boolean">
+					<option value="0">JNO</option>
+					<option value="1">JYES</option>
+				</field>
+				<field name="social_footer" type="radio" default="0"
+							 label="TPL_MOKOONYX_SOCIAL_FOOTER_LABEL" description="TPL_MOKOONYX_SOCIAL_FOOTER_DESC"
+							 layout="joomla.form.field.radio.switcher" filter="boolean">
+					<option value="0">JNO</option>
+					<option value="1">JYES</option>
+				</field>
+
+				<!-- Style options -->
+				<field name="social_sep_style" type="spacer" label="Style" hr="false" class="text fw-bold" />
+				<field name="social_icon_style" type="list" default="plain"
+							 label="TPL_MOKOONYX_SOCIAL_STYLE_LABEL" description="TPL_MOKOONYX_SOCIAL_STYLE_DESC">
+					<option value="plain">TPL_MOKOONYX_SOCIAL_STYLE_PLAIN</option>
+					<option value="circle">TPL_MOKOONYX_SOCIAL_STYLE_CIRCLE</option>
+					<option value="rounded">TPL_MOKOONYX_SOCIAL_STYLE_ROUNDED</option>
+				</field>
+				<field name="social_icon_size" type="list" default="md"
+							 label="TPL_MOKOONYX_SOCIAL_SIZE_LABEL" description="TPL_MOKOONYX_SOCIAL_SIZE_DESC">
+					<option value="sm">TPL_MOKOONYX_SOCIAL_SIZE_SM</option>
+					<option value="md">TPL_MOKOONYX_SOCIAL_SIZE_MD</option>
+					<option value="lg">TPL_MOKOONYX_SOCIAL_SIZE_LG</option>
+				</field>
+
+				<!-- Platform URLs -->
+				<field name="social_sep_urls" type="spacer" label="Platform URLs" hr="false" class="text fw-bold" />
+				<field name="social_urls_note" type="note" description="TPL_MOKOONYX_SOCIAL_URLS_NOTE" />
+				<field name="social_facebook_url" type="url" default="" label="Facebook" filter="url" />
+				<field name="social_twitter_url" type="url" default="" label="X / Twitter" filter="url" />
+				<field name="social_instagram_url" type="url" default="" label="Instagram" filter="url" />
+				<field name="social_linkedin_url" type="url" default="" label="LinkedIn" filter="url" />
+				<field name="social_youtube_url" type="url" default="" label="YouTube" filter="url" />
+				<field name="social_github_url" type="url" default="" label="GitHub" filter="url" />
+				<field name="social_bluesky_url" type="url" default="" label="Bluesky" filter="url" />
+				<field name="social_threads_url" type="url" default="" label="Threads" filter="url" />
+				<field name="social_discord_url" type="url" default="" label="Discord" filter="url" />
+				<field name="social_tiktok_url" type="url" default="" label="TikTok" filter="url" />
+				<field name="social_reddit_url" type="url" default="" label="Reddit" filter="url" />
+				<field name="social_pinterest_url" type="url" default="" label="Pinterest" filter="url" />
+				<field name="social_snapchat_url" type="url" default="" label="Snapchat" filter="url" />
+				<field name="social_telegram_url" type="url" default="" label="Telegram" filter="url" />
+				<field name="social_whatsapp_url" type="url" default="" label="WhatsApp" filter="url" />
+				<field name="social_tumblr_url" type="url" default="" label="Tumblr" filter="url" />
+				<field name="social_twitch_url" type="url" default="" label="Twitch" filter="url" />
+				<field name="social_spotify_url" type="url" default="" label="Spotify" filter="url" />
+				<field name="social_soundcloud_url" type="url" default="" label="SoundCloud" filter="url" />
+				<field name="social_flickr_url" type="url" default="" label="Flickr" filter="url" />
+				<field name="social_vimeo_url" type="url" default="" label="Vimeo" filter="url" />
+				<field name="social_linktree_url" type="url" default="" label="Linktree" filter="url" />
+				<field name="social_mail_url" type="url" default="" label="Email" description="TPL_MOKOONYX_SOCIAL_MAIL_DESC" filter="string" />
+			</fieldset>
+
 			<!-- CSS Variables reference tab -->
 			<fieldset name="css_variables" label="TPL_MOKOONYX_CSS_VARS_FIELDSET_LABEL">
 				<field name="css_vars_intro" type="note" description="TPL_MOKOONYX_CSS_VARS_INTRO" />
@@ -369,6 +431,7 @@
 				<field name="css_vars_virtuemart" type="note" label="TPL_MOKOONYX_CSS_VARS_VM_LABEL" description="TPL_MOKOONYX_CSS_VARS_VM_DESC" class="alert alert-light" />
 				<field name="css_vars_gable" type="note" label="TPL_MOKOONYX_CSS_VARS_GABLE_LABEL" description="TPL_MOKOONYX_CSS_VARS_GABLE_DESC" class="alert alert-light" />
 				<field name="css_vars_footer" type="note" label="TPL_MOKOONYX_CSS_VARS_FOOTER_LABEL" description="TPL_MOKOONYX_CSS_VARS_FOOTER_DESC" class="alert alert-light" />
+				<field name="css_vars_social" type="note" label="TPL_MOKOONYX_CSS_VARS_SOCIAL_LABEL" description="TPL_MOKOONYX_CSS_VARS_SOCIAL_DESC" class="alert alert-info" />
 			</fieldset>
 		</fields>
 	</config>