Search code examples
cssrrstudior-markdownreveal.js

Change Title Slide Color in reval.js R Markdown presentation

I am trying to change the color of the title slide of a reveal.js R Markdown presentation.

I am aware that I should use a custom CSS sheet with the css: styles.css option, but I couldn't find any references on how to change the title slide specifically. I am able to change the color of any other slides as explained here.

Here is a minimal example:

---
title: "Habits"
author: John Doe
date: March 22, 2005
output: revealjs::revealjs_presentation
---

# Change Background {data-background=#ff0000}
Solution

  • If you check the DOM of the presentation (the HTML structure) you realize, that the backgrounds for the slides are created as individual div elements. The first one of those defines the background for the title slide:

    enter image description here

    Therefore try

    <style>
.slide-background:first-child {
  background-color: #00FF00;
}
</style>

    This CSS selector picks the element with class .slide-background that is the first child of its parent (here the parent is the div element with class backgrounds).

    enter image description here

    (Notice that if you add the CSS in your RMD directly, an empty slide is produced. Therefore you should include them via the YAML header.)