Reveal.js Presentation: Title slide without page number and logo

[mchlbckr]

Hi, I am building a revealjs presentation and have added a background image for my title slide:

---
title: "Slideshow"
author: "author"
format:
  revealjs:
    slide-number: c
    show-slide-number: all
    title-slide-attributes:
      data-background-image: img/title.png
      data-background-size: cover
logo: img/logo.png
---

## First slide

blabla

Now I would like to remove the page number and the logo from my title slide but keep both on all other slides. Any suggestions how to achieve that?

[cderv]

I think that would indeed be interesting to add an option for this - I can see why a cleaner title slide would be desired.

I have managed to done it using RevealJS hooks on events, adding this script at the end of the body. Not straightforward and could probably be simpler but this is a workaround. Pure JS could also be used probably.

include-after: |
  <script type="text/javascript">
    Reveal.on('ready', event => {
      if (event.indexh === 0) {
        document.querySelector("div.has-logo > img.slide-logo").style.display = "none";
      }
    });
    Reveal.addEventListener('slidechanged', (event) => {
      if (event.indexh === 0) {
        Reveal.configure({ slideNumber: null });
        document.querySelector("div.has-logo > img.slide-logo").style.display = "none";
      }
      if (event.indexh === 1) { 
        Reveal.configure({ slideNumber: 'c' });
        document.querySelector("div.has-logo > img.slide-logo").style.display = null;
      }
    });
  </script>

For slideNumber, a custom CSS could also work

.reveal .slide-number > a[href*='title-slide'] {
  display: none;
}

For slideNumber, having a way to use JS to customize the slideNumber could be another option (#530)

Anyway, just wanted to share this as reference for workarounds and thinking on what could be done to make it an option.

[mchlbckr]

Hi @cderv, I tried to remove the footer on the title page in a similar fashion but I was not lucky with that. Any hint how I can do that?

[cderv]

This would be the same strategy as with the logo but using the correct selector document.querySelector("div.footer")

[mchlbckr]

Thanks! In this case, the selector is div.footer-default.

[yaelAtMaple]

Hi, could you also more detail on where the script should be placed? You mention at the end of the body but unfortunately I'm a beginner user. Thanks!

[mcanouil]

@yaelAtMaple
See https://quarto.org/docs/reference/formats/html.html#includes

[mcanouil]

FYI:

• Opened issue:
  • [FR] Ability to hide footer on specific slides including title-slide #1445
• Related discussions:
  • Reveal.js Presentation: Title slide without page number and logo #557
  • revealjs presentation: hiding footer and slide menu control for a specific slide #825
  • Hide slide menu button when printing slides #4181
  • Way to remove slide-number for n^th slide in a revealjs presentation? #5566