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:

1. Title: Change its color, font and absolute position without impacting other headings used in the "normal" slides?
2. Author: Change its color, font and absolute position?
3. 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 --*/

Answer 1

Just modify the .title, .quarto-title-author-name, .date classes using css and you can define the CSS styling in a separate style.css file.

---
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"
css: style.css
engine: knitr
---

## Getting up

- Turn off alarm
- Get out of bed

## Going to sleep

- Get in bed
- Count sheep

style.css

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

.quarto-title-author-name {
  font-size: 100px;
  color: blue !important;
}

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

---

---

Now change the css styles as you need.