Fix a few visual issues on the top bar and sidebar

rdwebdesign · rdwebdesign · commit d831524a56db · 2026-07-13T22:25:21.000-03:00
- add `data-bs-theme` to the body, accordingly to the current theme;
- add `data-bs-theme=dark` the the top bar, because we always use some
  background color with white text, on this element;
- change the default theme font-size to 15px. The previous theme used 14px
  (too small) and the original AdminLTE uses 16px (maybe too big);
- use `bg-body-secondary` class on the body to match the previous gray
  background color on the content area;
- use `bg-body-tertiary` class on the sidebar. It is still a dark color,
  but it will be changed according to the selected themes (when all themes
  are implemented);
- adjust the top bar text color and border color to match the previous
  theme look;
- adjust (or remove) the height on some elements on the top bar, to avoid
  breaking the layout;
- move the old "logo" element to the sidebar (`.sidebar-brand` element);
- use CSS to show a smaller "Pi-hole" text logo in the collapse sidebar;
- adjust the collapsed sidebar layout, adding `.nav-badge` class to the
  every badge on the sidebar;
- remove the outdated `pull-left` class;
- remove other outdated CSS rules;

Signed-off-by: RD WebDesign &lt;github@rdwebdesign.com.br&gt;
diff --git a/scripts/lua/header_authenticated.lp b/scripts/lua/header_authenticated.lp
@@ -27,7 +27,7 @@ mg.include('header.lp','r')
     <script src="<?=pihole.fileversion('vendor/waitMe-js/modernized-waitme-min.js')?>"></script>
     <script src="<?=pihole.fileversion('scripts/js/logout.js')?>"></script>
 </head>
-<body class="<?=theme.name?> hold-transition sidebar-mini sidebar-expand-lg <? if pihole.boxedlayout() then ?>layout-boxed<? end ?> logged-in page-<?=pihole.format_path(scriptname)?>" data-apiurl="<?=pihole.api_url()?>" data-webhome="<?=webhome?>">
+<body class="<?=theme.name?> hold-transition sidebar-mini sidebar-expand-lg bg-body-secondary <? if pihole.boxedlayout() then ?>layout-boxed<? end ?> logged-in page-<?=pihole.format_path(scriptname)?>" data-apiurl="<?=pihole.api_url()?>" data-webhome="<?=webhome?>" data-bs-theme="<?= bs_theme ?>">
 <noscript>
     <!-- JS Warning -->
     <div>
@@ -42,7 +42,7 @@ mg.include('header.lp','r')
 <!-- Send token to JS -->
 <div id="enableTimer" hidden></div>
 <div class="app-wrapper">
-    <nav class="app-header navbar navbar-expand">
+    <nav class="app-header navbar navbar-expand" data-bs-theme="dark">
         <div class="container-fluid">
             <!-- Sidebar toggle button + logo -->
             <ul class="navbar-nav">
@@ -52,14 +52,6 @@ mg.include('header.lp','r')
                         <span class="warning-count hidden" id="top-warning-count"></span>
                     </a>
                 </li>
-                <li class="nav-item">
-                    <a href="<?=webhome?>" class="nav-link logo">
-                        <!-- mini logo for sidebar mini 50x50 pixels -->
-                        <span class="logo-mini">P<strong>h</strong></span>
-                        <!-- logo for regular state and mobile devices -->
-                        <span class="logo-lg">Pi-<strong>hole</strong></span>
-                    </a>
-                </li>
             </ul>
             <!-- Right navbar links -->
             <ul class="navbar-nav ms-auto">
diff --git a/scripts/lua/sidebar.lp b/scripts/lua/sidebar.lp
@@ -7,14 +7,19 @@
 *    Please see LICENSE file for your rights under this license.
 */ ]]-- ?>
     <!-- Left side column. contains the logo and sidebar -->
-    <aside class="app-sidebar bg-dark shadow" data-bs-theme="dark">
+    <aside class="app-sidebar bg-body-tertiary shadow" data-bs-theme="dark">
+        <div class="sidebar-brand">
+          <a href="<?=webhome?>" class="brand-link">
+            <span class="brand-text fw-light">Pi-<strong>hole</strong></span>
+          </a>
+        </div>
         <div class="sidebar-wrapper">
             <!-- Sidebar user panel -->
             <div class="user-panel">
-                <div class="pull-left image">
+                <div class="image">
                     <img class="logo-img" src="<?=webhome?>img/logo.svg" alt="Pi-hole logo" width="60" height="87">
                 </div>
-                <div class="pull-left info">
+                <div class="info">
                     <p>Status</p>
                     <span id="status"></span><br>
                     <span id="query_frequency"></span><br>
@@ -45,33 +50,37 @@
                         <a href="<?=webhome?>groups" class="nav-link<? if scriptname == 'groups' then ?> active<? end ?>">
                             <i class="nav-icon fa fa-fw fa-user-friends"></i>
                             <p>Groups
-                                <span class="badge text-bg-primary float-end" id="num_groups" title="Number of enabled groups"></span>
+                                <span class="nav-badge badge text-bg-primary float-end" id="num_groups" title="Number of enabled groups"></span>
                             </p>
                         </a>
                     </li>
                     <li class="nav-item">
                         <a href="<?=webhome?>groups/clients" class="nav-link<? if scriptname == 'groups/clients' then ?> active<? end ?>">
                             <i class="nav-icon fa fa-fw fa-laptop"></i>
                             <p>Clients
-                                <span class="badge text-bg-primary float-end" id="num_clients" title="Number of defined clients"></span>
+                                <span class="nav-badge badge text-bg-primary float-end" id="num_clients" title="Number of defined clients"></span>
                             </p>
                         </a>
                     </li>
                     <li class="nav-item">
                         <a href="<?=webhome?>groups/domains" class="nav-link<? if scriptname == 'groups/domains' then ?> active<? end ?>">
                             <i class="nav-icon fa fa-fw fa-list"></i>
                             <p>Domains
-                                <span class="badge text-bg-danger float-end" id="num_denied" title="Number of enabled deny rules (domains and regex)"></span>
-                                <span class="badge text-bg-success float-end me-1" id="num_allowed" title="Number of enabled allow rules (domains and regex)"></span>
+                                <span class="nav-badge">
+                                    <span class="badge text-bg-danger float-end" id="num_denied" title="Number of enabled deny rules (domains and regex)"></span>
+                                    <span class="badge text-bg-success float-end me-1" id="num_allowed" title="Number of enabled allow rules (domains and regex)"></span>
+                                </span>
                             </p>
                         </a>
                     </li>
                     <li class="nav-item">
                         <a href="<?=webhome?>groups/lists" class="nav-link<? if scriptname == 'groups/lists' then ?> active<? end ?>">
                             <i class="nav-icon fa fa-fw fa-shield-alt"></i>
                             <p>Lists
-                                <span class="badge text-bg-primary float-end" id="num_lists" title="Number of subscribed and enabled lists"></span>
-                                <span class="badge text-bg-warning float-end me-1" id="num_gravity" title="Total number of domains subscribed by your Pi-hole"></span>
+                                <span class="nav-badge">
+                                    <span class="badge text-bg-primary float-end" id="num_lists" title="Number of subscribed and enabled lists"></span>
+                                    <span class="badge text-bg-warning float-end me-1" id="num_gravity" title="Total number of domains subscribed by your Pi-hole"></span>
+                                </span>
                             </p>
                         </a>
                     </li>
diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -17,6 +17,15 @@
   --blocked-color: #b00000;
   --cached-color: #9be;
   --other-color: #908878;
+
+  /* AdminLTE root variables */
+  --bs-body-font-size: 15px;
+}
+
+/* AdminLTE Color variables */
+.navbar[data-bs-theme=dark] {
+  --bs-navbar-color: rgb(255, 255, 255);
+  --bs-border-color: var(--bs-gray-300);
 }
 
 /* Dashboard graphic bars */
@@ -41,7 +50,7 @@
   margin: 0 auto;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
   position: relative;
-  background-color: var(--bs-body-bg);
+  background-color: var(--bs-secondary-bg);
 }
 
 /* Bootstrap 5 dropped the `.hidden` utility that Bootstrap 3 (and AdminLTE 2)
@@ -109,17 +118,31 @@
   color: var(--bs-secondary-color);
 }
 
-/* AdminLTE 4 no longer swaps the mini/full logo in the header when the sidebar
-  is collapsed, so the full "Pi-hole" wordmark stays and wraps in the narrow
-  header. Show the compact "Ph" mark while collapsed instead. */
-.logo-mini {
-  display: none;
+/* AdminLTE 4 moved the logo to the sidebar (.sidebar-brand class).
+  By default, AdminLTE expects an image and a text for the logo, but we only use
+  "Pi-hole" text as logo.
+  AdminLTE 4 automatically hides the text when the sidebar is collapsed, rsulting
+  in an empty brand.
+  To avoid this issue, we use ::before and ::after pseudo elements to show a
+  smaller text, so the full "Pi-hole" wordmark is always shown. */
+.sidebar-brand .brand-text {
+  margin: 0;
+  font-size: 1.35em;
 }
-.sidebar-collapse .app-header .logo-lg {
-  display: none;
+.sidebar-collapse .sidebar-brand .brand-link::before {
+  content: "Pi-";
+  color: var(--lte-sidebar-menu-active-color);
+  font-size: 15px;
 }
-.sidebar-collapse .app-header .logo-mini {
-  display: inline;
+.sidebar-collapse .sidebar-brand .brand-link::after {
+  content: "hole";
+  color: var(--lte-sidebar-menu-active-color);
+  font-size: 15px;
+  font-weight: bold;
+}
+.sidebar-collapse .app-sidebar:hover .brand-link::before,
+.sidebar-collapse .app-sidebar:hover .brand-link::after {
+  content: none;
 }
 
 @keyframes Pulse {
@@ -568,40 +591,6 @@ tfoot.add-new-item > tr > th {
   padding: 0.25em 0.6em 0.35em;
 }
 
-.sidebar-toggle-svg {
-  position: relative;
-  color: #fff;
-  float: left;
-  background-color: transparent;
-  border: none;
-  padding: 15px;
-  width: 50px;
-  text-align: center;
-}
-
-.sidebar-toggle-svg:hover {
-  color: #f6f6f6;
-  background: #367fa9;
-}
-
-/* AdminLTE 4 no longer ships a default mini/full logo swap for the header
-  (that concept now only exists for the sidebar-brand), so we provide it. */
-.app-header .logo-mini {
-  display: none;
-}
-
-/* Hide the "Ph" and move the toggle to the left */
-.sidebar-mini.sidebar-collapse .app-header .logo {
-  width: 0;
-  position: absolute;
-}
-.sidebar-mini.sidebar-collapse .app-header .logo-mini {
-  visibility: hidden;
-}
-.sidebar-mini.sidebar-collapse .app-header.navbar {
-  margin-left: 0;
-}
-
 .sidebar-menu > li.nav-header {
   color: transparent;
   padding: 5px;
@@ -1065,10 +1054,6 @@ li:not(.menu-open) .nav-treeview .warning-count {
   flex: 1 0 auto;
 }
 
-.navbar-nav {
-  height: 50px;
-}
-
 .navbar-nav > .user-menu {
   margin-left: 15px;
   width: 50px;
diff --git a/style/themes/lcars.css b/style/themes/lcars.css
@@ -1018,7 +1018,7 @@ p.login-box-msg,
   margin: 1px 0;
 }
 
-.user-panel .pull-left.image {
+.user-panel .image {
   margin-top: 20px;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1018,7 +1018,7 @@ p.login-box-msg,`
`1018`	`1018`	`margin: 1px 0;`
`1019`	`1019`	`}`
`1020`	`1020`
`1021`		`-.user-panel .pull-left.image {`
	`1021`	`+.user-panel .image {`
`1022`	`1022`	`margin-top: 20px;`
`1023`	`1023`	`}`
`1024`	`1024`