css - Shiny Flexdashboard R 中的 Bootswatch 主题

Question

我从 bootswatch ( https://bootswatch.com ) 下载了一个 css，并将文件 (bootstrap.css) 保存在我的 flexdashboard 文件所在的位置。所以我尝试用这段代码加载css：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    css: bootstrap.css
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}

```

但是css没有加载。我想使用 Bootswatch 的“Mint”主题。请问，你知道这个问题的解决方案吗？提供的任何帮助将不胜感激。

标签： cssrshinyr-markdownflexdashboard

Answer 1

我从 Bootswatch下载了Minty 主题。

我的第一个观察结果是:rootcss 不是 RStudio/flexdashboard 识别的格式：missing R_BRACE 由于本:root节主要定义颜色名称，因此我将其删除，因为颜色在其#HEX 代码直接定义的其他部分中。在此之后，css 文件似乎有效，只有警告。

然后我将此css文件与默认的 flexdashboard css 文件进行了比较。
例如：主题-bootstrap.css

我看到的主要区别是flexdashboard使用了您在 中找不到的自定义标签，bootstrap.css因为它针对的是 HTML 格式，而不是专门针对flexdashboard格式。

flexdashboard特定标签的示例：
- .section.sidebar
- .value-box
- .chart-title
-...

这就是您看不到任何更改的原因：css文件已正确加载，但不幸的是，它的大多数 HTML 标记不适用于flexdashboard.

正如 css styles中所解释的，flexdashboard 的导航栏为它的navbar-inverse每个主题都使用了这个类，所以如果你想创建自己的主题，你必须修改它。

要检查这一点，请创建一个非常简单的style.css：

.navbar-inverse {
  background-color: #fd7e14;
  border-color: #1967be;
}

.chart-title {
    font-size: 50px;
    color: #fd7e14;
}

现在您可以在以下 Markdown文件中使用此自定义 css：

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    css: style.css
---

Column {data-width=650}
-----------------------------------------------------------------------

### My Gauge

`r flexdashboard::gauge(15, min = 0, max = 50, href="#details")`