闪亮Flexdboard R中的Bootswatch主题 [英] Bootswatch theme in Shiny Flexdashboard R

问题描述

我从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中的薄荷主题。请问您知道这个问题的解决方案吗？我们将非常感谢您提供的任何帮助。

推荐答案

我下载了Minty theme from Bootswatch。

我的第一个观察结果是:rootCSS未采用RStudio/Flexdashboard：missing R_BRACE可识别的格式 因为这个:root节主要定义颜色名称，所以我删除了它，因为颜色在其他节中直接由他们的#祸不单行代码定义。此后，CSS文件似乎有效，只有警告。

然后我将此css文件与default flexdashboard css files进行了比较。
例如：theme-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")`

这篇关于闪亮Flexdboard R中的Bootswatch主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！