如何修改phpMyAdmin左侧导航栏背景色-phpMyAdmin-PHP中文网

左侧导航栏背景色由 .navigation 和 #serverinfo 两个 CSS 类共同控制，新版默认主题中 .navigation 为主容器类，但 #serverinfo 权重更高，需一并覆盖；修改需通过新建自定义主题并添加 !important 声明方可生效。

左侧导航栏背景色由哪个 CSS 类控制？

phpmyadmin 左侧导航栏（即数据库/表树状结构所在区域）的背景色，实际由主题 css 中 .navigation 和 #serverinfo 两个选择器共同影响。新版（5.2+）默认主题 pmahomme 使用 .navigation 作为主容器类，而部分布局下 #serverinfo 的 background 会透出或叠加。直接改 body 或 .container 没用——它们不包裹左侧栏。

为什么改了 common.css 还是没变？

常见失效原因不是代码写错，而是路径和加载机制问题：

你改的是 themes/pmahomme/css/common.css，但 phpMyAdmin 实际加载的是压缩合并后的 js/dist/theme.min.css，手动改源文件不会自动重编译
浏览器缓存了旧 CSS，即使清了普通缓存，js/dist/ 下的压缩文件仍被 Apache 或 Nginx 缓存
某些 XAMPP 版本启用了 Twig 编译缓存，路径在 tmp/，需手动删空
你改的是 .navigation，但真正生效的是 .navigation, #serverinfo 组合规则，后者权重更高，必须一并覆盖

安全且一次生效的修改方式

唯一抗升级、不被覆盖的做法：新建自定义主题，只改关键 CSS 规则。

步骤如下：

在 XAMPP\phpMyAdmin\themes\ 下新建目录：custom\leftnav
把 pmahomme 整个目录复制进去（保持 css/、img/、templates/ 结构）
编辑 custom/leftnav/css/common.css，末尾追加：

.navigation, #serverinfo {
  background-color: #2c3e50 !important;
}
.navigation .item {
  color: #ecf0f1 !important;
}

注意：!important 必须加，否则被内联样式或 JS 动态 class 覆盖

btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

在 config.inc.php 末尾添加：

$cfg['ThemePath'] = './themes';
$cfg['ThemeDefault'] = 'leftnav';

重启 Apache，用隐身窗口访问——避免旧主题缓存干扰

移动端适配容易被忽略的点

如果用户在手机或小屏设备上访问，左侧栏可能折叠为汉堡菜单，此时背景色由 .mobile-navbar 控制，而非 .navigation。若需统一风格，得额外补一条：

@media (max-width: 768px) {
  .mobile-navbar {
    background-color: #2c3e50 !important;
  }
}

这个媒体查询必须放在自定义主题的 CSS 文件里，不能靠外部注入——因为移动端加载的是独立模板和样式流。

php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！