Restricting position of custom logos/images on quarto revealjs slides to be on the slides

Question

I'm trying to set up a template for lecture slides using revealjs in quarto. Specifically, I want a watermark on the lower right and a university logo on the top left. Since I'm using two logos I cannot only use the logos: argument in the YAML-header.

I've managed to include both logos by creating a separate html-file which I include in the yaml-header with include-in-header: [test.html] and then I specify the positions in the associated .scss file.

test.html looks like this:

  <img class="bottom-logo" src="lower_logo.png"/>
  <img class="top-logo" src="upper_logo.png"/>

and the associated .scss file like this:

.bottom-logo {
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 400px;
  width: 400px;
  opacity: 0.2;
}

.top-logo {
    position: absolute; 
    top: 0px;
    left: 30px;
    height: 125px;
}

This code successfully includes the logos at the lower right and top left positions, but the logos are outside the revealjs slides, so when I try to export the slides to PDF the logos are not included. I've tried adding .reveal and .reveal .slides as suggested in the quarto documentation, but this does not seem to work. Any suggestions on how to restrict the logos to be within the revealjs slides?

Answer 1

what about combining logo from reveal-header (places logo on top left) extension and footer? Example:

---
title: Example slide
format: 
  revealjs:
    footer: Content under {{< fa brands creative-commons >}}
    header-logo: https://upload.wikimedia.org/wikipedia/commons/d/d0/RStudio_logo_flat.svg
filters:
  - reveal-header
---

<style>
.reveal .footer {
    display: block;
    position: fixed;
    bottom: 18px;
    width: 100%;
    margin: 0px -20px;
    text-align: right;
    font-size: 18px;
    z-index: 2;
}
</style>

---

Edit: Larger Logo

---
title: Example slide
format: 
  revealjs:
    footer: Content under {{< fa brands creative-commons >}}
    logo: https://upload.wikimedia.org/wikipedia/commons/d/d0/RStudio_logo_flat.svg

---

<style>
.reveal .footer {
    display: block;
    position: fixed;
    bottom: 18px;
    width: 100%;
    margin: 0px -20px;
    text-align: right;
    font-size: 18px;
    z-index: 2;
}
.reveal .slide-logo {
    z-index: 2;
    right: unset !important;
    height: unset !important;
    bottom: unset !important;
    width: 400px !important;
    max-width: unset !important;
    max-height: unset !important;
}
</style>