flexdashboard - change title bar color
I want to change the color of the title bar of a flexible panel.
I found an example for removing it - SE here , but considering I don't know CSS / JQuery I had to ask.
I want to change the color of the panel 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: 
+7
source to share
1 answer
You can customize the style sheets in the block <style>...</style>
as follows:
---
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
put your custom styles in a separate file styles.css
.
+8
source to share