Slide Backgrounds

To set a background for one slide

For this background on one slide, add {background-image="https://fordschool.umich.edu/themes/custom/ford/images/fallback-placeholder.png"} after the title

To set a theme for all slides

theme: [../michigan.scss, ford.scss]

To set a theme for all slides

theme: [../michigan.scss, ford2.scss]

To set a theme for all slides

theme: [../michigan.scss, weill.scss]

To make new themes

  1. Find an image URL or save an image in the slides folder

  2. Make a .scss styling file. This is what “ford.scss” looks like:

/*-- scss:rules --*/
.slide-background-content{
  background-image: url("https://fordschool.umich.edu/themes/custom/ford/images/og-image.png");
  background-size: 100% 100%;
  opacity: .1
}
  1. Add your new scss style to the theme: line
format:
 revealjs: 
   theme: [../michigan.scss, ford.scss]

(these slides also use the michigan.scss style sheet)

R code to make new slide theme files

(overkill, but it shows how one can execute code in .qmd files)

url <- "https://fordschool.umich.edu/themes/custom/ford/images/fallback-placeholder.png"
file <- "ford2.scss"

paste('/*-- scss:rules --*/
  .slide-background-content{
      background-image: url("',
      url,
      '");
  background-size: 100% 100%;
  opacity: .1
}') |>
  write(file)

list.files(pattern = "scss")
[1] "ford.scss"  "ford2.scss" "weill.scss"