Search code examples
reveal.jsquarto

How to increase size logo in quarto reveal.js presentation

In my quarto reveal.js presentation, I added a logo bottom left in the slide template by placing this in the yaml:

format: 
  revealjs:
    logo: mylogo.png

The logo is displayed very small. Anyone a suggestion on how to increase the size? Thanks!

Solution

  • logo image in the quarto revealjs has the class slide-logo. So to increase the size, you just need to apply the following CSS rules to this .slide-logo selector.

    ---
title: "Increasing Logo size"
format: 
  revealjs:
    logo: image.png
    css: logo.css
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations, see <https://quarto.org/docs/presentations/>.

    logo.css

    .reveal .slide-logo {
  height: 100px !important;
  width: 100px !important;
  max-width: unset !important;
  max-height: unset !important;
}

    a big logo on the bottom-left corner

    Change the value of CSS properties height and width as you need, and Do not forget the !important

    EDIT:

    • Depending on how max-height, height, and the size of the image file correspond, the logo moves upwards. To avoid this, try using max-height only.