[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][ENH][UI] Look & Feel: improve site header look for most themes in general

luci pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
df20ae0b by luci at 2026-06-13T01:14:26+00:00
[FIX][ENH][UI] Look & Feel: improve site header look for most themes in general
---
* [FIX][ENH][UI] Look & Feel: improve site header look for most themes in general

See merge request tikiwiki/tiki!10507

- - - - -


7 changed files:

- templates/footer.tpl
- templates/layouts/classic/layout_view.tpl
- templates/layouts/social/layout_view.tpl
- themes/base_files/css/feature/adminui.scss
- themes/base_files/scss/_tiki-modules.scss
- themes/darkshine/scss/_css-variables.scss
- themes/tikicorp/scss/_tiki-selectors.scss


Changes:

=====================================
templates/footer.tpl
=====================================
@@ -31,7 +31,7 @@
     {assign var=module_pref_errors value=$modlib->pref_errors}
 {/if}
 {if $module_pref_errors|default:null}
-    <div class="container{if isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y'}-fluid{/if} modules">
+    <div class="container{if isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y'}-fluid{/if} container-std modules">
         {remarksbox type="warning" title="{tr}Module errors{/tr}"}
             {tr}The following modules could not be loaded{/tr}
             <form method="post" action="tiki-admin.php">
@@ -50,7 +50,7 @@
 {if (! isset($display) or $display eq '')}
     {if $phpErrors}
         {if ($prefs.error_reporting_adminonly eq 'y' and $tiki_p_admin eq 'y') or $prefs.error_reporting_adminonly eq 'n'}
-    <div class="container{if isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y'}-fluid{/if} errors-wrapper my-3">
+    <div class="container{if isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y'}-fluid{/if} container-std errors-wrapper my-3">
         {button _ajax="n" _id="show-errors-button" _onclick="flip('errors');return false;" _text="{tr}Show PHP error messages{/tr}"}
         <div id="errors" class="alert alert-warning" style="display: {if (isset($smarty.session.tiki_cookie_jar.show_errors) and $smarty.session.tiki_cookie_jar.show_errors eq 'y')}block{else}none{/if};">
             &nbsp;{listfilter selectors='#errors>div.rbox-data'}


=====================================
templates/layouts/classic/layout_view.tpl
=====================================
@@ -21,18 +21,17 @@
         {/if}
         {******************************************************************* SITE HEADER STRUCTURE Same pattern as social layout for consistency ******************************************************************}
         <header class="site-header" id="site-header" role="banner">
-
-            <nav class="{block name=navClasses}navbar navbar-expand-md navbar-{$navbar_color_variant} bg-{$navbar_color_variant} tiki-main-navbar{/block}"
+            {* Main navigation - uses block for theme customization *}
+            <nav class="{block name=navClasses}navbar navbar-expand-md navbar-{$navbar_color_variant} tiki-top-nav-{$navbar_color_variant} bg-{$navbar_color_variant}-parent tiki-main-navbar{/block}"
                  id="main-navbar"
                  role="navigation"
                  aria-label="{tr}Main navigation{/tr}">
 
-                <div class="container-fluid container-std">
-                    {modulelist zone=top class="top_modules w-100 bg-{$navbar_color_variant}-parent tiki-top-nav-{$navbar_color_variant} container-fluid" heading_text='{tr}Site identity, navigation, etc.{/tr}' role=banner}
+                <div class="container{if $prefs.feature_fixed_width neq 'y' || ($prefs.feature_fixed_width eq 'y' and $prefs.layout_fixed_width_header neq 'y')}-fluid{/if}">
+                    {modulelist zone=top class="top_modules w-100 container-fluid" heading_text='{tr}Site identity, navigation, etc.{/tr}' role=banner}
                 </div>
 
             </nav>
-
         </header>
         {if $prefs.feature_layoutshadows eq 'y'}{eval var=$prefs.header_shadow_end}</div>{/if}
     {/if}


=====================================
templates/layouts/social/layout_view.tpl
=====================================
@@ -16,13 +16,13 @@
         {if $prefs.theme_unified_admin_backend neq 'y' or $smarty.server.SCRIPT_NAME|strpos:'tiki-admin.php' === false}
              <header class="page-header w-100 sticky-top my-0" id="page-header" role=banner>
                 {* Main navigation - uses block for theme customization *}
-                <nav class="{block name=navClasses}navbar navbar-expand-md navbar-{$navbar_color_variant} bg-{$navbar_color_variant} tiki-main-navbar{/block}"
+                <nav class="{block name=navClasses}navbar navbar-expand-md navbar-{$navbar_color_variant} tiki-top-nav-{$navbar_color_variant} bg-{$navbar_color_variant}-parent tiki-main-navbar{/block}"
                      id="main-navbar"
                      role="navigation"
                      aria-label="{tr}Main navigation{/tr}">
 
-                    <div class="container{if $prefs.feature_fixed_width eq 'y' and $prefs.layout_fixed_width_header neq 'y'}-fluid{/if}">
-                        {modulelist zone=top class="top_modules w-100 d-flex flex-wrap tiki-top-nav-{$navbar_color_variant} bg-{$navbar_color_variant}-parent" heading_text='{tr}Site identity, navigation, etc.{/tr}' role=banner}
+                    <div class="container{if $prefs.feature_fixed_width neq 'y' || ($prefs.feature_fixed_width eq 'y' and $prefs.layout_fixed_width_header neq 'y')}-fluid{/if}">
+                        {modulelist zone=top class="top_modules w-100 d-flex flex-wrap" heading_text='{tr}Site identity, navigation, etc.{/tr}' role=banner}
                     </div>
                 </nav>
             </header>
@@ -36,13 +36,13 @@
             {/if}
         {/if}
         <div class="topbar-wrapper navbar-{$navbar_color_variant}-parent bg-{$navbar_color_variant}-parent tiki-topbar-nav-{$navbar_color_variant}">
-            <div class="topbar container{if isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y'}-fluid{/if} container-std navbar-{$navbar_color_variant} bg-{$navbar_color_variant} tiki-topbar-nav-{$navbar_color_variant}" id="topbar">
+            <div class="topbar container{if $prefs.feature_fixed_width neq 'y' || (isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y')}-fluid{/if} container-std navbar-{$navbar_color_variant} bg-{$navbar_color_variant}" id="topbar">
                 {modulelist zone=topbar class='topbar_modules w-100' heading_text='{tr}Navigation and related functionality and content{/tr}'}
             </div>
         </div>
         <div class="middle-wrapper">
             <div class="page-content-top-margin"  style="height: var(--tiki-page-content-top-margin)"></div>
-        <div class="container{if isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y'}-fluid{/if} container-std middle" id="middle">
+        <div class="container{if $prefs.feature_fixed_width neq 'y' || (isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y')}-fluid{/if} container-std middle" id="middle">
             <div class="row row-middle" id="row-middle">
                 {if (zone_is_empty('left') or $prefs.feature_left_column eq 'n') and (zone_is_empty('right') or $prefs.feature_right_column eq 'n')}
                     <div class="col col1 col-md-12 pb-4" id="col1">


=====================================
themes/base_files/css/feature/adminui.scss
=====================================
@@ -789,14 +789,14 @@ body.sidebar_collapsed .admin-menu-collapser .expand-text {
     }
 }
 
-body.tiki-admin .container.container-std {
+body.tiki-admin .container-std {
     overflow: visible !important;
 }
 
 // Fix: Properly position container to account for fixed sidebar
 // When sidebar is expanded, shift the container to center content in the remaining space
 @media (min-width: 993px) {
-    body.tiki-admin.uab:not(.sidebar_collapsed) .container.container-std {
+    body.tiki-admin.uab:not(.sidebar_collapsed) .container-std {
         margin-left: var(--tiki-admin-offcanvas-width, 300px);
         max-width: calc(100% - var(--tiki-admin-offcanvas-width, 300px));
         padding-left: 2rem;


=====================================
themes/base_files/scss/_tiki-modules.scss
=====================================
@@ -12,6 +12,10 @@ header.container,
     margin-bottom: 0;
 }
 
+// add no padding on main navbar (top modules arera) to render the navbar with no gaps on sides
+#main-navbar > .container-fluid {
+    padding: 0;
+}
 
 .tiki.layout_classic .header_container .container.container-std {
     max-width: 100% !important;
@@ -55,10 +59,22 @@ header.container,
 // No JavaScript needed!
 //==================================================
 
+// Site Header (and any menu module inside)
+#site-header,
+#top_modules > .module.no-box.box-menu {
+    padding: 0;
+    > div > nav {
+        padding: 0 calc(var(--bs-gutter-x) * 0.5);
+    }
+}
+
 // Main navbar
+#page-header > .top_modules, // This is on e.g. tiki-wizard_admin.php
+#main-navbar .top_modules, // ... and this is in Classic Tiki layout only (TODO: try to unify the templates)
 #main-navbar {
     padding-top: 0;
     padding-bottom: 0;
+    flex-wrap: wrap;
 
     // Logo sizing
     .sitelogo-img {
@@ -117,7 +133,7 @@ header.container,
             content: "";
             display: block;
             /**
-            @luciash Rightly pointed out on matrix that we shouldn't rely on such a magic string.
+            @luciash Rightly pointed out on Matrix chat that we shouldn't rely on such a magic string.
             This is however well documented and proves that @sandy-12 thought about corner cases (in this case incoming links with an # anchor in the url).
             I initially thought he didn't know about:
             https://css-tricks.com/almanac/properties/s/scroll-margin/


=====================================
themes/darkshine/scss/_css-variables.scss
=====================================
@@ -34,7 +34,7 @@
 }
 
 @mixin top-nav-light {
-    --tiki-top-bg: null;
+    --tiki-top-bg: var(--tiki-darkshine-diagonals-bg);
     --tiki-top-color: #FEA239;
     --tiki-top-hover-color: #fabe7a;
     --tiki-top-text-color: #fabe7a;


=====================================
themes/tikicorp/scss/_tiki-selectors.scss
=====================================
@@ -218,7 +218,6 @@ h1.pagetitle a {
 }
 
 .header_outer,
-.top_modules,
 .topbar_modules,
 .layout_basic .page-header {
     border-radius: 20px;



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/df20ae0b2beabfa857413e753a26820fcc7adb72

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/df20ae0b2beabfa857413e753a26820fcc7adb72
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs