flexdashboard - 更改标题栏颜色
flexdashboard - change title bar color
我想更改 flexdashboard 的标题栏颜色。
我找到了删除它的示例 - SE ,但鉴于我不知道任何 CSS/JQuery,我不得不问。
我想将条形颜色更改为红色,将文本更改为黑色。
有人吗?
编辑(下例):
---
title: "DB: Contact information"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
<style>
.navbar {
background-color:crimson;
border-color:black;
}
.navbar-brand {
color:black!important;
}
</style>
Dashboard
=====================================
Test. Test. Test.
Column {data-width=650}
-----------------------------------------------------------------------
### Clustered Data
结果:
您可以像这样在 <style>...</style>
块中自定义样式表:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
<style>
.navbar {
background-color:red;
border-color:black;
}
.navbar-brand {
color:black!important;
}
</style>
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
plot(0)
```
Column {data-width=350}
-----------------------------------------------------------------------
### Chart B
```{r}
plot(0)
```
### Chart C
```{r}
plot(0)
```
或使用
output:
flexdashboard::flex_dashboard:
css: styles.css
将您的自定义样式放在单独的 styles.css
文件中。
我想更改 flexdashboard 的标题栏颜色。
我找到了删除它的示例 - SE
我想将条形颜色更改为红色,将文本更改为黑色。
有人吗?
编辑(下例):
---
title: "DB: Contact information"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
<style>
.navbar {
background-color:crimson;
border-color:black;
}
.navbar-brand {
color:black!important;
}
</style>
Dashboard
=====================================
Test. Test. Test.
Column {data-width=650}
-----------------------------------------------------------------------
### Clustered Data
结果:
您可以像这样在 <style>...</style>
块中自定义样式表:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
<style>
.navbar {
background-color:red;
border-color:black;
}
.navbar-brand {
color:black!important;
}
</style>
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
plot(0)
```
Column {data-width=350}
-----------------------------------------------------------------------
### Chart B
```{r}
plot(0)
```
### Chart C
```{r}
plot(0)
```
或使用
output:
flexdashboard::flex_dashboard:
css: styles.css
将您的自定义样式放在单独的 styles.css
文件中。