Adding css to flexdashboard with runtime shiny

[vidaringa]

I want to add custom css styles to my flexdashboard. This should be easy according to this tutorial: https://rmarkdown.rstudio.com/flexdashboard/using.html

I've put the .css file into the www folder and css: styles.css in the YAML header

output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: readable
css: styles.css
runtime: shiny

However this does not work. I tried adding the css directly to the RMarkdown document and then everything works fine.

What am I doing wrong?

[radovan]

@vidaringa

I've put the .css file into the www folder...

Did you try css: www/styles.css or css: www/file_named_by_you.css?

---
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    theme: readable
    css: www/styles.css
runtime: shiny
---

[vidaringa]

I tried but it doesn't work.

Here is my YAML header

title: "Title"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    theme: readable
    css: www/styles.css
runtime: shiny

Small example of my styles.css code:

<style>

.chart-title {
    font-size: 48px;
}

</style>

This only works if I put this directly into the .Rmd file but nothing happens if I put it in the www folder. I haven't published the app, would I need to do so for the www/styles.css way to work?

[radovan]

Try to reproduce the .Rmd example below:

---
title: "Row Orientation"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    theme: readable
    css: www/styles.css
runtime: shiny
---

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

Row
-------------------------------------
    
### Chart 1
    
```{r}
gauge(15, min = 0, max = 50, href="#details")
```
   
Row
-------------------------------------
    
### Chart 2
    
```{r}
gauge(30, min = 0, max = 50, href="#details")
```

### Chart 3
    
```{r}
gauge(45, min = 0, max = 50, href="#details")
```

with www/styles.css:

.chart-title {
    font-size: 48px;
}

We only use the <style> tag to create an "internal style sheet" (as you did correctly).
Another way to use an "internal style sheet" in R Markdown is through "css chunk":

```{css my-content, echo = FALSE}
.chart-title {
    font-size: 48px;
}
```

Output:

You can find the default flexdashboard.css values here.

[vidaringa]

Thank you so much Radovan!

Removing <style> tag from the style.css file did the trick.