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