[英]Bootswatch theme in Shiny Flexdashboard R
I downloaded a css from bootswatch ( https://bootswatch.com ) and I saved the file (bootstrap.css) where my flexdashboard file is.我从 bootswatch ( https://bootswatch.com ) 下载了 css 并保存了文件 (bootstrap.css) 我的 flexdashboard 是So I tried to load the css with this code:
所以我尝试使用以下代码加载 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}
```
But the css doesn't load.但是 css 没有加载。 I would like to use "Mint" theme from Bootswatch.
我想使用 Bootswatch 中的“Mint”主题。 Please, do you know a solution for this issue?
请问,你知道这个问题的解决方案吗? Any help provided will be greatly appreciated.
提供的任何帮助将不胜感激。
I downloaded the Minty theme from Bootswatch .我从 Bootswatch 下载了 Minty 主题。
My first observation is that the :root
css isn't in a format recognized by RStudio/flexdashboard: missing R_BRACE
我的第一个观察是
:root
css 不是 RStudio/flexdashboard 识别的格式: missing R_BRACE
As this
:root
section mainly defines color names, I removed it because colors are in further sections defined directly by their #HEX code.由于此
:root
部分主要定义颜色名称,因此我将其删除,因为 colors 位于由其#HEX 代码直接定义的其他部分中。 After this, the css file seems valid, with only warnings.在此之后,css 文件似乎有效,只有警告。
Then I compared this css
file with the default flexdashboard css files .然后我将这个
css
文件与默认的 flexdashboard css 文件进行了比较。
For example: theme-bootstrap.css例如: 主题-bootstrap.css
The main difference I saw is that flexdashboard
uses custom tags which you don't find in the bootstrap.css
because it's aimed at HTML formatting, and not specifically at flexdashboard
formatting.我看到的主要区别是
flexdashboard
使用了您在bootstrap.css
8CBA22E28EB17B5F5C6AE2A266AZ 中找不到的自定义标签,因为它针对的是 HTML 格式,而不是专门针对flexdashboard
格式。
Examples of flexdashboard
specific tags: flexdashboard
特定标签的示例:
- .section.sidebar
-
.section.sidebar
- .value-box
-
.value-box
- .chart-title
-
.chart-title
-... -...
This is the reason why you don't see any change: the css
file is loaded correctly, but unfortunately most of its HTML tags don't apply to flexdashboard
.这就是您看不到任何变化的原因:
css
文件已正确加载,但不幸的是,它的大多数 HTML 标签不适用于flexdashboard
。
As explained in css styles , the navigation bar for flexdashboard uses the navbar-inverse
class for each of its themes, so if you want to create your own Theme, you'll have to modify this.正如css styles中解释的那样,flexdashboard 的导航栏使用
navbar-inverse
class 为其每个主题,所以如果你想修改这个,你有自己的主题
To check this, create a very simple style.css
:要检查这一点,请创建一个非常简单的样式。
style.css
:
.navbar-inverse {
background-color: #fd7e14;
border-color: #1967be;
}
.chart-title {
font-size: 50px;
color: #fd7e14;
}
Now you can use this custom css in the following Markdown
file:现在您可以在以下
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")`
In the mean time, you can use the theme:
yaml header or other similar flexdashboard themes like yeti
, journal
, spacelab
同时,您可以使用
theme:
yaml header 或其他类似的 flexdashboard 主题,如yeti
、 journal
、 spacelab
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
theme: lumen
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
```
Which give you a few preset themes, and then you can fine tune the.css.其中给你一些预设的主题,然后你可以微调.css。 but I had the same issue you did, I had the.css in the same directory, but no style was added, we must be doing something wrong, but the themes will atleast give you the ability to use a handful of different colors in the mean time.
但是我遇到了同样的问题,我在同一目录中有.css,但是没有添加样式,我们一定做错了,但是主题至少可以让您在与此同时。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.