闪亮Flexdboard R中的Bootswatch主题

2022-02-21 00:00:00 r shiny r-markdown css flexdashboard
我从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")`

相关文章