Flexdashboard - 更改标题栏颜色

15

我想要更改flexdashboard的标题栏颜色。

我找到了一个移除它的示例 - 在这里,但是由于我不懂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

结果: 输入图片说明

1个回答

21

您可以像这样在<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文件中。

这里输入图片描述


是的,它可以工作。但它不会改变按钮背景/文本的颜色。 - Prometheus
@Prometheus 嗯,我不知道,请编辑您的原始帖子并添加一个最小的示例以进行复制粘贴运行,就像我所做的那样。 - lukeA
你好,感谢你的帮助。我刚刚更新了原始帖子。 - Prometheus
@Prometheus 谢谢,您能在您的帖子中包含按钮,这样我就可以测试它吗? - lukeA
@Prometheus 再次感谢。我尝试了.navbar,[data-toggle=tab],.navbar-brand {background-color:crimson!important;border-color:black;color:black!important;},看起来可以工作。 - lukeA
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接