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 --*/

shafee · Accepted Answer · 2023-04-14T11:11:06.947

6

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.

edited Apr 14 '23 at 11:11

answered Sep 01 '22 at 20:53

shafee

15,566
3
19
47

1

Thanks for your time answering this I’ll try it out in the morning. What documentation can I read that would have told me about .title or .author and is there documentation that tells me what css I can apply to them? I need to work out how to move them on the page. – Dee1983 Sep 01 '22 at 22:00
1

There's no such quarto specific css documentation, AFAIK, but there's tons of css documentation and example in general in the internet. Search for those, go through some exmples for a quick refresher (Knowing css would be very helpful in the long run, if you wish to continue making html documents/slides with quarto) and apply the rules you want to apply in the above css chunk. I have just tried to point to a direction, hopefully you can sort out how to change the position too. – shafee Sep 02 '22 at 05:43
I do not get the red, blue and green colors. Copy and pasted the code into rstudio. Is this still valid? or is my rstudio version giving problems? – murpholinox Apr 11 '23 at 18:14
1

@murpholinox, check the updated answer. This should work now! (The problem was actually lying inside the answer where I was being lazy and used the css code in the qmd file along with the `include=FALSE` option, for which the css code was not being used) – shafee Apr 14 '23 at 11:14

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

1 Answers1