timercountdownquartoreveal.js

How to change colors of countdown timers in a Quarto Revealjs presentation?

How do you change colors for other timers subsequent to the first timer using the countdown package in Quarto revealjs presentations? The user manual for the countdown package indicates that it's possible to change colors of the timer elements. See documentation here:

https://cran.r-project.org/web/packages/countdown/countdown.pdf

For the first timer, I successfully modified the color of several elements as follows:

```{r}
countdown(
  minutes = 12, seconds = 30,
  font_size = "6em",
  warn_when = 120,
  color_text = "#CD853F",
  color_running_background = "#002b36",
  color_finished_background = "oldlace",
  color_warning_background = "dodgerblue",
  right = "10%",
  bottom = "15%"
  )
```

However, when trying to modify the colors of the same elements for subsequent timers, each new timer uses the same colors specified in the code chunk of the first timer regardless of the colors specified within the new timer. These new timers appear to be inheriting the first defined colors. How do you override this?

When running individual chunks, the each timer is modified and displayed against a white background. However, when rendering the presentation to slides, the color is not changed.

There is a slide presentation that states you can customize the css for different timers, but it doesn't state where in the Quarto document to do this. Is it customized in a chunk, separate file, etc. The documentation is on slide 28 of the following countdown slide show.

https://pkg.garrickadenbuie.com/countdown/#28

I have never modified css code before, and the slide show instructions aren't clear. Also, the countdown pdf manual doesn't specify how to make this change to subsequent timers after the first.

How do you change the colors of subsequent timers after the first using the countdown package within a revealjs slide presentation in Quarto?

Using: Quarto version 1.6.39

Version information:
platform x86_64-w64-mingw32
arch x86_64
os mingw32
crt ucrt
system x86_64, mingw32
status
major 4
minor 4.2
year 2024
month 10
day 31
svn rev 87279
language R
version.string R version 4.4.2 (2024-10-31 ucrt) nickname Pile of Leaves

Minimal Reproducible Example for Quarto revealjs presentation:

---
title: "Countdown Timer Test"
subtitle: "Countdown Timer Color Issues"
date: today
date-format: long
format: 
  revealjs:
    footer: Sample Footer
    theme: moon
    transition: fade
    transition-speed: slow
    code-block-height: 650px
editor_options: 
  chunk_output_type: console
---

```{r}
#| echo: false
#| include: false

pacman::p_load(
  countdown
)
```

## Slide 1 with timer  

```{r}
#| label: Timer 1

countdown(
  minutes = 2,
  font_size = "2em",
  color_text = "#AAB53F",
  color_running_border = "#002b36",
  color_running_background = "#002b36",
  color_finished_background = "oldlace",
  color_warning_background = "dodgerblue"
  )
```

- Some text on Slide 1  
- Small timer bottom right
- All chunk settings work correctly

## Slide 2 with timer  

```{r}
#| label: Timer 2

countdown(
  minutes = 12, seconds = 30,
  font_size = "2em",
  warn_when = 120,
  color_text = "#1D327B",
  color_running_background = "#002b36",
  color_finished_background = "oldlace",
  color_warning_background = "dodgerblue"
  )
```

- Text color inherited from chunk Timer 1  
- `countdown` argument `color_text` should change color of timer to navy blue when not yet activated. Instead, text color is same as color set in Timer 1  

## Slide 3 with timer  

```{r}
countdown(
  minutes = 12, seconds = 30,
  font_size = "2em",
  warn_when = 120,
  color_text = "darkred",
  color_running_background = "#002b36",
  color_finished_background = "oldlace",
  color_warning_background = "dodgerblue"
  )

```

- Text color inherited from chunk Timer 1  
- `countdown` argument `color_text` should change color of timer to dark red when not yet activated. Instead, text color is same as color set in Timer 1
Solution

  • The style arguments, e.g. color_text, of the first timer are indeed used on document-level, such that the other timers inherit them. Here you need a css approach as described in the linked documentation.

    enter image description here

    document.qmd

    ---
title: "Countdown Timer Test"
subtitle: "Countdown Timer Color Issues"
date: today
date-format: long
format: 
  revealjs:
    footer: Sample Footer
    theme: moon
    transition: fade
    transition-speed: slow
    code-block-height: 650px
    css: styles.css
editor_options: 
  chunk_output_type: console
---

```{r}
#| echo: false
#| include: false

pacman::p_load(
  countdown
)
```

## Slide 1 with timer  

```{r}
#| label: Timer 1

countdown(
  id = "timer1",
  minutes = 2,
  font_size = "2em"
)
```

- Some text on Slide 1  
- Small timer bottom right
- Time: yellow, when running: pink background

## Slide 2 with timer  

```{r}
#| label: Timer 2

countdown(
  id = "timer2",
  minutes = 12, seconds = 30,
  font_size = "2em",
  warn_when = 120
  )
```

- Text color inherited from chunk Timer 1  
- color of timer is navy blue when not yet activated
- yellow background when running

## Slide 3 with timer  

```{r}
countdown(
  id = "timer3",
  minutes = 12, seconds = 30,
  font_size = "2em",
  warn_when = 120
  )

```

- similar

    styles.css

    #timer1 > .countdown-time {
    color: yellow;
}
#timer1.running {
    border-color: red;
    background-color: pink;
}
#timer1.finished {
    background-color: oldlace;
}
#timer1.running.warning {
    background-color: dodgerblue;
}
#timer2 > .countdown-time {
    color: #1D327B;
}
#timer2.running {
    background-color: yellow;
}
#timer2.finished {
    background-color: oldlace;
}
#timer2.running.warning {
    background-color: dodgerblue;
}
#timer3 > .countdown-time {
    color: darkred;
}
#timer3.running {
    background-color: #002b36;
}
#timer3.finished {
    background-color: oldlace;
}
#timer3.running.warning {
    background-color: dodgerblue;
}