Customizing Your Quarto Presentation

The Basics.

👋 It’s been a while! Since my last post, I’ve been tinkering and learning a lot of new things that I want to share with you. All this learning led me to change the outlines for the next few posts on Quarto presentations, which is why you haven’t heard from me in a while.

And just for fun, I started a workflow to get, clean, and model football ⚽️ data. So the next few posts on Quarto presentations will include examples with ⚽️ data from the US (go Timbers! #RCTID).

---

My goal with this post is to teach you how to take a few basic steps. I want you to feel successful early, so that you don’t end up frustrated 5 minutes after opening a Quarto presentation template.

First, you’ll learn how to add a background image to the title slide. This is done in the YAML, so it’s an easy change that will have immediate impact on how you feel about Quarto.

Second, you’ll learn how to add background images to the rest of the deck. Quarto let’s you easily add background images by adding a URL or path to your image next to each slide title or divider. Again, this is an easy change that will make you feel like you have conquered all your Quarto-related fears.

Third, I’m going to take you a little bit further in the customization journey. You will learn how to change the font used in the body of the slides, the title of the deck, and the title of each slide. What’s hard about this step is that we will now use another file to style your presentation: the Sass file.

Before you go any further, close your eyes, take a deep breath 🧘, and get ready to start the Quarto customization journey.

The Title Slide

The title slide is controlled by the HTML template in the backend of your Quarto file. So the good folks at Posit gave us a few options to customize the title slide via YAML parameters. For example, to change the background, you can use the following code:

---
title: "RCTID"
title-slide-attributes: 
  data-background-image: "input/Engaging Slides theme.png"
  data-background-size: contain
format: 
  revealjs:
    theme: simple
---

In this example, the deck’s title is “RCTID”, which stands for Rose City ‘Til I Die. This acronym is used by fans of the Portland Timbers and Portland Thorns, the two major football ⚽️ clubs in Portland, Oregon (where I live ✌️).

Then, the data-background-image parameter allows me to add a custom background image. Rendering my presentation results in the following title slide:

All The Other Slides

To change the background of any other slide, you can simply use background-image inside curly braces next to the slide header or divider:

## Background {background-image="input/Engaging Slides theme.png"}

The Portland Timbers and Thorns are awesome.

I used the same background image here as in the title slide for simplicity. But you should explore using different images, for example, for slides that divide sections, slides with bullets, or slides with tables. Rendering my presentation results in slides with the following background:

Fonts, Fonts, and More Fonts

If you need to customize a Quarto presentation, I’m willing to bet that 9 out of 10 times you are going to want to use specific fonts. Changing fonts is a bit more complicated than adding background images because you will need to add a Sass file to your theme. Sass is an extension of CSS . If you don’t know what CSS is, you can learn the basics in my series on how to create awesome paged HTML documents.

First, open a text file in R and save it with a .scss extension in the same folder of your Quarto file. Then, you can add it to the theme declaration in the YAML:

---
title: "RCTID"
title-slide-attributes: 
  data-background-image: "input/Engaging Slides theme.png"
  data-background-size: contain
format: 
  revealjs:
    theme: [simple, custom.scss]
---

In this case, I saved the file as custom.scss and added it to the simple theme using square brackets.

Now you are ready to specify fonts. In my case, I wanted to use a different font for headings and body, so I used the following code in my Sass file:

/*-- scss:defaults --*/

//fonts
$font-family-sans-serif: "Omnes";

/*-- scss:rules --*/
.reveal .title {
  font-family: Space Mono;
  text-align: left;
  font-size: 80pt;
}

.reveal h2 {
  font-family: Space Mono;
}

As shown in this example, you first declare defaults and then rules. Defaults are based on a series of pre-specified variables, while rules are ways for you to style elements in the presentation however you want. Here, I use the Omnes font family for the body across slides and the Space Mono family for the title (.title) and slide headings (h2). I’m also specifying that I want the title to be left-aligned and 80pt in size.

Was this post useful? Let me know in the comments and share it with anyone who’s getting started with Quarto.

Coming up in this series: styling tables and plots, printing to PDF, and much more!