Quarto Revealjs presentation change Title, Author & Date position, font, size and colour

Question

Hello people of Stack Overflow,

Apologies for asking silly questions, I am a beginner and not looked at html or css in a decade. I recently discovered Quarto and think once I learn Quarto it will largely be quicker than using PowerPoint at work.

I am really struggling at the first hurdle, and I am reading the Quarto Documents Pages but they are not detailed for this problem.

I have populated a title, author and date, which auto generates a Title Slide. After some googling I have worked out how to apply a background to this single Title Slide by adding the code below to my _quarto.yml file. How do I:

Title: Change its color, font and absolute position without impacting other headings used in the "normal" slides?
Author: Change its color, font and absolute position?
Date: Change its color, font and absolute position?

I hope I have made some sense and apologies for this basic question... Kind regards

Here is my contents of presentation.qmd:

---
title: "Work Presentation 1"
author: "PRESENTED BY: John Doe"
date: 09/01/2022
format:
  revealjs:
    theme: [white, custom.scss]
---

## Getting up

- Turn off alarm
- Get out of bed

## Going to sleep

- Get in bed
- Count sheep

Here is the contents of _quarto.yml:

title-slide-attributes:
    data-background-image: "/images/work/slidetitlebackground.png"
    data-background-size: contain
    data-background-opacity: "1"
date-format: "DD MMM YYYY"

My custom.scss file is currently blank:

/*-- scss:defaults --*/


/*-- scss:rules --*/

user_10858321 · Answer

Just modify the .title, .author, .date classes using css and you can define the CSS styling in the qmd file itself using css code chunk with echo=FALSE.

---
title: "Work Presentation 1"
author: "PRESENTED BY: John Doe"
date: 09/01/2022
format: revealjs
title-slide-attributes:
    data-background-image: "lights.jpg"
    data-background-size: contain
    data-background-opacity: "1"
date-format: "DD MMM YYYY"
engine: knitr
---

```{css, echo=FALSE}

.title {
  font-size: 120px !important;
  color: red !important;
}

.author {
  font-size: 100px;
  color: blue;
}

.date {
  font-size: 80px;
  color: green;
}

```


## Getting up

- Turn off alarm
- Get out of bed

## Going to sleep

- Get in bed
- Count sheep

Now change the css styles as you need.

Quarto Revealjs presentation change Title, Author & Date position, font, size and colour

1 Answers