Home > Software design >  Quarto Reveal slides: text color for a single slide
Quarto Reveal slides: text color for a single slide

Time:09-09

Below I paste a Quarto document which produces a reveal.js slide deck with 2 slides, using the default theme.

How do I change the color of the header and of the main text on a single slide, while keeping all other slides at the default theme? If possible, I would like the syntax to be relatively concise.

---
format: revealjs
---

## Slide 1: Black header (default)

Black text (default)

## Slide 2: Red header

Red text

CodePudding user response:

One option can be targeting that specific slide using id and then apply CSS rule for that id.

---
title: "Text Color for single Slide"
format: revealjs
engine: knitr
---


## Slide 1: Black header (default)

Black text (default)

## Slide 2: Red header{#color-slide}

```{css, echo=FALSE}
#color-slide, 
#color-slide h2 {
 color: red;
}

```

Red Text

## Slide 3: Black header (default)

Black text (default)


overview of slides - css applied using id


And using CSS class, instead of id, would be useful if we want to apply those same CSS rules on more than one slide.

---
title: "Text Color for single Slide"
format: revealjs
engine: knitr
---


## Slide 1: Black header (default)

Black text (default)

## Slide 2: Red header{.color-slide}

```{css, echo=FALSE}
.color-slide, 
.color-slide h2 {
 color: red;
}

```

Red Text

## Slide 3: Black header (default)

Black text (default)


## Slide 4: Red header{.color-slide}

Red Text

overview of slides - css applied using class


  • Related