Struggling to customize the title-slide.html

[raphaelbetschart]

Description

I am trying to customize the title-slide.html for a RevealJS presentation from https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/revealjs/pandoc/title-fancy/title-slide.html.
I would like to add a picture on the top left and on the bottom right of the title slide; for this I added the two following lines in the title-slide.html:

# This entry right above <h1 class="title">$title$</h1>
<img src=img/top_right.png class="title_logo_top_right">
# This entry right above </section>
<img src=img/bottom_left.png class="title_logo_bottom_left">

Now in my custom.scss I created the two following entries:

.title_logo_top_right {
        position: relative;
        top: -5rem;
        left: -28rem;
        height: 150px !important;
        width: 468px !important;
        max-width: unset !important;
        max-height: unset !important;
}

.title_logo_bottom_left {
        position: relative;
        bottom: -12rem;
        right: -32rem;
        height: 64px !important;
        width: 307px !important;
        max-width: unset !important;
        max-height: unset !important;
}

Now I have the problem that depending on the type of output display these two logos are getting cut off and I have no clue how I would properly define the position of these two logos, as I am neither very familiar with css or HTML templates. Does it matter where I put these lines in the title-slide.html?

The Quarto file itself:

---
title: "Title Slide"
format: 
  revealjs:
    slide-number: c
    theme: "custom.scss"
    template-partials:
      - title-slide.html
    embed-resources: true
editor: visual
---

## 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/>.

[mcanouil]

Your issue is not a Quarto issue.
It's an HTML/CSS one.

For these type of issues, the only way is to investigate and understand the structure of the page you are making.
One way to do this is to use your favourite browser inspect/developer mode. It comes with several tools allowing you to change the display size, make live changes to the HTML and CSS.
Once you get the right HTML/CSS, you can put it back in your partial.

There is no other way, even for an HTML/CSS expert.

My wild guess: the issue is about position: relative; which should likely be fixed or absolute.

[raphaelbetschart]

I found a solution which works:

Create a logos.html file with the following content:

<div class="first-slide-only" style="display:none;">
        <img src="img/top_right.jpg" class="title_logo_top_right"/>
        <img src="img/bottom_left.jpg" class="title_logo_bottom_left"/>
</div>

In the Quarto file I then reference this file: include-before-body: logos.html.
Some ugly JavaScript code in include-after: takes care that these two logos are only displayed on the title slide, and the title slide numbers and the standard logo are hidden:

  <script type="text/javascript">
    Reveal.on('ready', event => {
  if (event.indexh === 0) {
    document.querySelector("div.has-logo > img.slide-logo").style.display = "none";
    const firstSlideContent = document.querySelector(".first-slide-only");
    if (firstSlideContent) firstSlideContent.style.display = "block"; 
  }
  });
  Reveal.addEventListener('slidechanged', event => {
    const firstSlideContent = document.querySelector(".first-slide-only");

    if (event.indexh === 0) {
      Reveal.configure({ slideNumber: null });
      document.querySelector("div.has-logo > img.slide-logo").style.display = "none";
      if (firstSlideContent) firstSlideContent.style.display = "block";
    }

    if (event.indexh === 1) { 
      Reveal.configure({ slideNumber: 'c' });
      document.querySelector("div.has-logo > img.slide-logo").style.display = null;
      if (firstSlideContent) firstSlideContent.style.display = "none";
    }
  });
  </script>