怎么修改用 flexdashboard 做出来的面板最上面的蓝颜色？

yuanfan · 2023年2月16日

本楼主最近在尝试用 flexdashboard 做一些可视化面板，由于前些天刚了解了一些配色的包，这次就用了起来，然而等调完颜色突然觉得面板最上面的“蓝颜色条”和整体很不协调，所以想改这颜色。根据以前坛友们教的方法，我把生成的 .html 文件用谷歌浏览器打开，进入开发者模式，查看那个“蓝颜色条”下面是撒设定，可是看到了俺也不会改。

试了下在文档里加上下面的 css 设定，但是不管用。路过的坛友们如果不知道答案，但是刚好注册了 chatGPT 的话，也请帮俺问问。

```{css}
div.navbar-header {
   color: red;
}

Jiena · 2023年2月16日

yuanfan
如下：

```{css}
.navbar-header {
   background: red;
}

yuanfan · 2023年2月17日

Jiena
原来是该设置 backgroud 啊，受教了，谢谢您。

需要再多说一点的是 .navbar-header 的本意是导航栏标题，如果只改这一点的话，我发现.html 打开后整个导航栏的颜色还是蓝色，只有“页面”这个导航栏标题下面的背景颜色变了。而打开开发者模式，用类似手机屏幕的比例查看，就是整个导航栏的颜色都变了。我又翻了翻，发现如果需要把整条导航栏颜色都改变的话，应该设定.container-fluid。

```{css}
.container-fluid {
   background: #58A449FF;
}
```