flexdashboard - change title bar color

问题

I want to change the title bar color of a flexdashboard.

I've found an example for removing it - SE here, but given that I don't know any CSS/JQuery, I had to ask.

I want to change the bar color to red, and the text to black.

Anyone?

Edit (example below):

---
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

Result:

回答1:

You could customize the style sheets in a <style>...</style> block like this:

---
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)
```

Or use

output: 
  flexdashboard::flex_dashboard:
    css: styles.css

to put your custom styles in a separate styles.css file.

来源：https://stackoverflow.com/questions/44305381/flexdashboard-change-title-bar-color

标签

flexdashboard