Is there a reason why CSS is not working with ioslides when the runtime is set to "Shiny"?

Question

I'm trying to include an external css sheet including, in particular, an image for the title slide background for an ioslides presentation using some shiny features on some slides, but it seems like no css is being implemented. When I remove runtime: shiny, the css is then implemented into the presentation.

I've seen this issue raised in other places, but most of the time it was said to have been resolved with a package update. Ex: this StackOverflow question. In that particular question, I tried the two solutions offered by the other answerer as well, with no luck.

Code is below. Apologies if this has been resolved already...

Thank you!

Rmarkdown file (no css styling)

---
title: "Untitled"
author: ""
date: "`r Sys.Date()`"
runtime: shiny
output: 
  ioslides_presentation:
    widescreen: true
    self_contained: false
    css: styles.css
---

## R Markdown 
test text

## Slide with Bullets

- Bullet 1
- Bullet 2
- Bullet 3

CSS Sheet

slides > slide.title-slide {
  background-image: url("background.jpg");
  background-size: 100% 100%;
  text-align: center;
  
}

h1, h2, h3 {
  text-align: center;
}

RMarkdown File (with css styling, no runtime: shiny)

---
title: "Untitled"
author: ""
date: "`r Sys.Date()`"
output: 
  ioslides_presentation:
    widescreen: true
    self_contained: false
    css: styles.css
---

## R Markdown 
test text

## Slide with Bullets

- Bullet 1
- Bullet 2
- Bullet 3

A link to ex. the change to the title via. CSS: https://github.com/rstudio/rmarkdown/assets/83145308/ef4e893c-e663-45ac-95a7-488f9a56b054

R Session Info

R version 4.2.2 (2022-10-31 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19044), RStudio 2023.3.1.446

Locale:
  LC_COLLATE=English_United States.utf8  LC_CTYPE=English_United States.utf8   
  LC_MONETARY=English_United States.utf8 LC_NUMERIC=C                          
  LC_TIME=English_United States.utf8    

Package version:
  askpass_1.1       base64enc_0.1.3   bslib_0.4.2       cachem_1.0.8      cli_3.6.1        
  compiler_4.2.2    curl_5.0.0        digest_0.6.31     ellipsis_0.3.2    evaluate_0.21    
  fastmap_1.1.1     fontawesome_0.5.1 fs_1.6.2          glue_1.6.2        graphics_4.2.2   
  grDevices_4.2.2   highr_0.10        htmltools_0.5.5   jquerylib_0.1.4   jsonlite_1.8.5   
  knitr_1.43        lifecycle_1.0.3   magrittr_2.0.3    memoise_2.0.1     methods_4.2.2    
  mime_0.12         openssl_2.0.6     packrat_0.9.1     R6_2.5.1          rappdirs_0.3.3   
  rlang_1.1.1       rmarkdown_2.22    rsconnect_0.8.29  rstudioapi_0.14   sass_0.4.6       
  stats_4.2.2       stringi_1.7.12    stringr_1.5.0     sys_3.4.2         tinytex_0.45     
  tools_4.2.2       utils_4.2.2       vctrs_0.6.2       xfun_0.39         yaml_2.3.7       

Answer 1

You need to make sure that your picture is in a directory which is added to Shiny's web server as resource. To do so, you need to use addResourcePath and adapt the paths in your RMarkdown and css files.

N.B. I used the folder www as this is the standard folder with Shiny apps. But while this is hosted by default for normal Shiny apps it does not get hosted for RMarkdown documents. I also placed the css file there.

Folder Structure

<root>
├─ io.Rmd
├─ io.Rproj
└─ www
   ├─ styles.css
   └─ background.jpg

io.Rmd

---
title: "Untitled"
author: ""
date: "`r Sys.Date()`"
runtime: shiny
output: 
  ioslides_presentation:
    widescreen: true
    self_contained: false
    css: www/styles.css
---

```{r resource, echo = FALSE}
shiny::addResourcePath(prefix = "www", directoryPath = here::here("www"))
```

## R Markdown 
test text

## Slide with Bullets

- Bullet 1
- Bullet 2
- Bullet 3

styles.css

slides > slide.title-slide {
  background-image: url("/www/background.jpg");
  background-size: 100% 100%;
  text-align: center;
  color: white;
}

h1, h2, h3 {
  text-align: center;
}

---

N.B. I used here::here for specifying the path to the www folder. This works nicely if you have an associated .Rproj file, i.e. when you used an RStudio R project.