flexdashboard - change title bar color

Question

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

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