CSS and Joomla 6 fixes: dropdown icons, footer, drawers, horizontal menu

- Replace CSS border-triangle dropdown toggles with FontAwesome chevron icon - Fix footer: use --nav-bg-color background, --mainmenu-nav-link-color links, add display:flex to grid-child - Dynamic footer padding-right when theme control is active - Drawer close buttons: align left in left drawer, right in right drawer - Fix .menu-horizontal selector (was .metismenu.menu-horizontal, actual output is .mod-menu.menu-horizontal) - Add horizontal padding to .mod-list li - Joomla 6 compat: replace legacy JHtml with namespaced HTMLHelper in mod_kunenalogin Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 16:48:12 -05:00
parent dd19e226f4
commit 044d8277f8
3 changed files with 42 additions and 32 deletions
--- a/src/html/mod_kunenalogin/mobile.php
+++ b/src/html/mod_kunenalogin/mobile.php
@@ -11,6 +11,7 @@

 defined('_JEXEC') or die;

+use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Router\Route;

@@ -88,7 +89,7 @@ $wrapperClass = 'mod-kunena-login mod-kunena-login-responsive ' . $moduleclass_s
 				<input type="hidden" name="option" value="com_users" />
 				<input type="hidden" name="task" value="user.logout" />
 				<input type="hidden" name="return" value="<?php echo $return; ?>" />
-				<?php echo JHtml::_('form.token'); ?>
+				<?php echo HTMLHelper::_('form.token'); ?>
 			</form>
 		</div>
 	<?php else : ?>
@@ -181,7 +182,7 @@ $wrapperClass = 'mod-kunena-login mod-kunena-login-responsive ' . $moduleclass_s
 			<input type="hidden" name="option" value="com_users" />
 			<input type="hidden" name="task" value="user.login" />
 			<input type="hidden" name="return" value="<?php echo $return; ?>" />
-			<?php echo JHtml::_('form.token'); ?>
+			<?php echo HTMLHelper::_('form.token'); ?>
 		</form>
 	<?php endif; ?>
 </div>
--- a/src/index.php
+++ b/src/index.php
@@ -60,6 +60,7 @@ $params_developmentmode = $this->params->get('developmentmode', false);

 // Theme params
 $params_theme_enabled      = $this->params->get('theme_enabled', 1);
+$params_theme_control_type = (string) $this->params->get('theme_control_type', 'radios');
 $params_theme_fab_enabled  = $this->params->get('theme_fab_enabled', 1);
 $params_theme_fab_pos      = $this->params->get('theme_fab_pos', 'br');

@@ -286,6 +287,10 @@ $wa->useScript('user.js');         // js/user.js
 	  });
 	</script>

+	<?php if ($params_theme_control_type !== 'none') : ?>
+	<style>.footer { padding-right: 300px; }</style>
+	<?php endif; ?>
+
 	<?php if (trim($params_custom_head_end)) : ?><?php echo $params_custom_head_end; ?><?php endif; ?>
 </head>
 <body data-bs-spy="scroll" data-bs-target="#toc" 
@@ -509,7 +514,7 @@ $wa->useScript('user.js');         // js/user.js
 <?php if ($this->countModules('drawer-left', true)) : ?>
 <!-- Left Offcanvas Drawer -->
 <aside class="offcanvas offcanvas-start" tabindex="-1" id="drawer-left">
-  <div class="offcanvas-header">
+  <div class="offcanvas-header justify-content-start">
 	<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="<?php echo Text::_('JLIB_HTML_BEHAVIOR_CLOSE'); ?>"><span class="fa fa-close"></span></button>
  </div>
  <div class="offcanvas-body">
@@ -521,7 +526,7 @@ $wa->useScript('user.js');         // js/user.js
 <?php if ($this->countModules('drawer-right', true)) : ?>
 <!-- Right Offcanvas Drawer -->
 <aside class="offcanvas offcanvas-end" tabindex="-1" id="drawer-right">
-  <div class="offcanvas-header">
+  <div class="offcanvas-header justify-content-end">
 	<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="<?php echo Text::_('JLIB_HTML_BEHAVIOR_CLOSE'); ?>"><span class="fa fa-close"></span></button>
  </div>
  <div class="offcanvas-body">
--- a/src/media/css/template.css
+++ b/src/media/css/template.css
@@ -13966,10 +13966,13 @@ meter {
 .footer {
 	margin-top: 1em;
 	color: var(--body-color);
-	background: var(--color-primary);
+	background-color: var(--nav-bg-color);
 }

 .footer .grid-child {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
 	-webkit-box-align: center;
 	-ms-flex-align: center;
 	align-items: center;
@@ -13980,7 +13983,7 @@ meter {
 }

 .footer a {
-	color: currentColor;
+	color: var(--mainmenu-nav-link-color);
 }

 .footer .mod-menu {
@@ -15203,7 +15206,7 @@ ul.tags {
 }

 .mod-list li {
-	padding: 0.25em 0;
+	padding: 0.25em 0.5rem;
 }

 .mod-list li a {
@@ -16171,7 +16174,16 @@ body:not(.has-sidebar-right) .site-grid .container-component {
 	display: table-cell;
 }

-.metismenu.menu-horizontal {
+.menu-horizontal {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: row;
+	flex-direction: row;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap;
 	-webkit-box-flex: 1;
 	-ms-flex: 1 0 100%;
 	flex: 1 0 100%;
@@ -16181,28 +16193,19 @@ body:not(.has-sidebar-right) .site-grid .container-component {
 }

@media (min-width: 992px) {
-	.metismenu.menu-horizontal {
-		display: -webkit-box;
-		display: -ms-flexbox;
-		display: flex;
+	.menu-horizontal {
+		-ms-flex-wrap: nowrap;
+		flex-wrap: nowrap;
 		-webkit-box-flex: 1;
 		-ms-flex: 1 1 0%;
 		flex: 1 1 0%;
-		-webkit-box-orient: horizontal;
-		-webkit-box-direction: normal;
-		-ms-flex-direction: row;
-		flex-direction: row;
 	}
 }

-.metismenu.menu-horizontal>li {
+.menu-horizontal>li {
 	position: relative;
 }

-.metismenu.menu-horizontal .level-1>ul {
-	min-width: 12rem;
-}
-
 .metismenu.mod-menu {
 	margin: 0;
 }
@@ -16620,12 +16623,13 @@ body:not(.has-sidebar-right) .site-grid .container-component {
 }

 .dropdown-toggle::after {
-	content: "";
+	font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
+	font-weight: 900;
+	content: "\f078";
+	display: inline-block;
 	border: none;
-	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
-	background-repeat: no-repeat;
-	width: 10px;
-	height: 10px
+	font-size: 0.65em;
+	vertical-align: middle;
 }

 .btn {
@@ -19355,18 +19359,18 @@ nav[data-toggle=toc] .nav-link.active+ul{
 	padding: 0;
 }

-/* Dropdown toggle arrow */
+/* Dropdown toggle arrow — uses FontAwesome instead of CSS borders */
 .mod-menu-main__link.dropdown-toggle::after,
 .mod-menu-main__heading.dropdown-toggle::after {
-	content: "";
+	font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
+	font-weight: 900;
+	content: "\f078";
 	display: inline-block;
 	margin-left: auto;
 	padding-left: 0.5rem;
 	vertical-align: middle;
-	border-top: 0.3em solid;
-	border-right: 0.3em solid transparent;
-	border-bottom: 0;
-	border-left: 0.3em solid transparent;
+	font-size: 0.65em;
+	border: none;
 }

 /* Desktop styles (≥768px) */