CODEWITHSUNDEEP
cssrrstudior-markdownreveal.js
Rafael Magalhães
Rafael Magalhães

Reputation: 65

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}

Upvotes: 2

Views: 2067

Answers (2)

Sharon
Sharon

Reputation: 331

For me, this resulted in the color being applied to all level 1 headers, e.g. #

Looking at the DOM I see no way of targeting just the title slide with CSS.

What worked for was adding the following CSS:

/* Set background for all headers 1 # slides */

.slide-background:first-child {
  background-color: orange;
  background-image: url(image.jpg);
}

/* Set background for all headers 1 # slides accept title slide, back to template default */

.slide-background > .present {
  background-color: white;
  background-image: none;
}

Though, the transition between header 1 # and 2 ## shows the image / background breefly.

Upvotes: 0

Martin Schmelzer
Martin Schmelzer

Reputation: 23919

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.)

Upvotes: 1

Related Questions