Flexdashboard - Change Title Bar Color

flexdashboard - change title bar color

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.

R flexdashboard remove title bar

You can just add CSS styling directly to your markdown document (no JQuery required):

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---
<style>

body {
  padding-top:0px
}

.navbar{
  visibility: hidden
}

</style>

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}
hist(iris$Sepal.Length)

```

Column {data-width=350}
-----------------------------------------------------------------------

### Chart B

```{r}
hist(iris$Sepal.Width)
```

### Chart C

```{r}
hist(iris$Petal.Length)
```

Results in:

R flexdashboard tabset styles

Try this:

<style>
  .nav-tabs-custom > .nav-tabs > li.active {border-top-color: green}
</style>

How can I choose colors for labels of flex dashboard tabs in RSTudio?

This can be achieved like so:

---
title: "A Template of Dashboard with Pages and Tabs"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    social: [ "twitter", "facebook", "menu" ]
---

```{css}
/* Set font color of inactive tab to green */
.nav-tabs-custom .nav-tabs > li > a {
  color: green;
} 

/* Set font color of active tab to red */
.nav-tabs-custom .nav-tabs > li.active > a {
  color: red;
} 

/* To set color on hover */
.nav-tabs-custom .nav-tabs > li.active > a:hover {
  color: purple;
}
```

## Column {data-width=120}

## Column {data-width=880 .tabset}

### Tab 1

### Tab 2

---

Related Topics