时间戳

首页 > 解决方案 > 在 Flexdashboard 中更改激活页面的颜色

css - 在 Flexdashboard 中更改激活页面的颜色

问题描述

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

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

</style>

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

标签： cssrr-markdownflexdashboard

解决方案

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

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

可以在flexdashboard 站点上找到这些主题。

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

<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

推荐阅读