在 Flexdashboard 中更改激活页面的颜色答案

【问题标题】：Change color of activated page in Flexdashboard在 Flexdashboard 中更改激活页面的颜色
【发布时间】：2020-01-23 15:50:53
【问题描述】：

我的 flexdashboard 有问题。我想将具有多个页面的仪表板的导航栏颜色更改为灰色（我成功了），并将活动/选定页面或我悬停在黄色上的页面的颜色更改为黄色（我不能这样做）。这是我使用的代码。我不确定如何找到可以更改的导航栏元素的名称，以便更改导航栏。

---
title: "Example"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
---
<style>                     
.navbar {
  background-color:grey;
  hover-color:yellow;
}

</style>

背景是灰色的（就像我想要的那样），但我将鼠标悬停在选定的页面或页面上保持蓝色。有谁知道如何处理这个问题？非常感谢！

【问题讨论】：

标签： css r r-markdown flexdashboard

【解决方案1】：

这会很棘手，因为您必须覆盖所有控制悬停颜色的 css 元素。一个简单的解决方法是更改主题：

---
title: "Example"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
    theme: <enter theme name>
---

主题可以在flexdashboard site找到。

我也需要做类似的事情，我想我发现了大部分需要更改的元素：

<style>
.navbar {
  background-color:grey;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background-color: yellow;
    color: white;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: white;
  background-color: yellow;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: yellow;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: yellow;
}
</style>

您可以在此处找到需要更改的导航栏元素：https://github.com/thomaspark/bootswatch/blob/v3.3.5/cosmo/bootstrap.css#L4643-L4744

【讨论】：