闪亮Flexdboard R中的Bootswatch主题
我从bootswatch(https://bootswatch.com)下载了一个CSS,并将文件(bootstrap.css)保存在我的Flexdashboard文件所在的位置。因此,我尝试使用以下代码加载CSS:
例如:theme-bootstrap.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。
我的第一个观察结果是:root
CSS未采用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")`
相关文章