Revealjs title slide: best practice for adaptions from xaringan-template?

[cathblatter]

A question I am looking for input:

I customized the title-page etc for xaringan slides based on two requirements:

• having a partly coloured background
• two logos: one on top-left and one on top-right

below is a screenshot and the css I was using for getting this layout (imitating the original layout):

I mimicked the partly coloured background with setting a background-color und a white border in a custom css like this:

.title-slide {
  background-image: url(anchor-solid.svg), url(anchor-solid.svg);
  background-size: 15%, 5%;
  background-position: 1% 1%, 99% 1%;
  border-width: 15px 15px 180px 0px;
  background-color: mediumorchid;
  border-style: solid;
  border-color: white;
}

I tried to 'translate' this to quarto/revealjs, but I failed so far in the adpation of this "background" trick.

What I tried so far:

• I am able to place both logos through title-slide-attributes in the YAML (and I can set the whole title-slide-background colour in there as well, see pic)

• I was able to write custom css as well for the title-slide but the logos are disregarded (changed the border to grey to highlight the area

#title-slide {
  background-image: url(anchor-solid.svg), url(anchor-solid.svg);
  background-size: 15%, 5%;
  background-position: 1% 1%, 99% 1%;
  border-width: 15px 15px 180px 0px;
  background-color: mediumorchid;
  border-style: solid;
  border-color: grey;
}

I realized that there are several 'levels' within reveal-slides, e.g.

• .reveal .backgrounds
• .reveal .slides

I also tried to modify .reveal .backgrounds #title-slide {} to no avail.

I'm satisfied with the title-slide-attributes - option for including the logos (and dropping the color), but I am curious: is my attempt with setting a white border (to 'fake' the partly coloured background) possible at all in revealjs? Or is there another css-trick that I am missing (I am not a css-pro, learning by doing..)? I also though about setting a rule e.g. .reveal .backgrounds[id="title-slide"] which is probably invalid code.

Any inputs welcome - here is a repo with two minimal reprexes for both quarto and xaringan : https://github.com/cathblatter/slides-demo - thanks!

[cderv]

With revealjs, you can create custom title slide by deactivating the default one instead of tweaking it. This is done by not providing a title in the YAML.

This way your first slide will be used as title slide and you can add a specific content to it to have it work like you want.
I believe @mcanouil may have an example of such customisation to share with you.

Regarding background, reveal.js uses a specific organization for background, and the customisation using CSS is harder. I would use the slide background attributes to tweak that (https://quarto.org/docs/presentations/revealjs/#slide-backgrounds).

Custom format developed as Extension (https://quarto.org/docs/extensions/formats.html) is something more advanced but closer to a custom R Markdown output format based on xaringan. You can include Lua filter in it (https://quarto.org/docs/extensions/lua.html) that would allow to tweak / set some defaults based on your format. (for example changing the background attributes for the title slide without a user having to set it).

Hope it helps, and I am sure @mcanouil has some additional advices to give 😉 right ?

[mcanouil]

Well currently my more advanced layout for slides is https://github.com/mcanouil/quarto-revealjs-storybook.
It uses a bunch of css to arrive to a similar layout of what I did for Xaringan.
(downside self-contained does not include the first background image because of an open issue in Reveal.js).

I have to admit that I don't fully get what's the desired layout (i.e., what was the Xaringan template), so hard to make more appropriate suggestion on the CSS.

Custom format developed as Extension (https://quarto.org/docs/extensions/formats.html) is something more advanced but closer to a custom R Markdown output format based on xaringan. You can include Lua filter in it (https://quarto.org/docs/extensions/lua.html) that would allow to tweak / set some defaults based on your format. (for example changing the background attributes for the title slide without a user having to set it).
Regarding this, you can take a look at the Lua filter (i.e., theme.lua) for an in-progress PR (nmfs-opensci/quarto_titlepages#9).
The filter take a yaml option stating the template as a string, then define a bunch of default yaml options as default value for the selected theme (can be override by users).

Also, when tweaking CSS not from scratch, using browser's developper mode and the "inspect" feature is a great way to preview and edit CSS and see the results. Then you can properly write the CSS (nested CSS, inherits classes, etc.).
If you are using VSCode, you can do all that directly in it using one extension: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server.

[cathblatter]

Thank you very much for your inputs @mcanouil

In quarto I played with several elements (see here colouring for #title-slide, .backgrounds, .slides) which gives me the idea of these different 'layers' (sorry for the ugly colors):

Based on this I think the issue is the way how the backgrounds are organized in revealjs does not work for how I implemented it in remark/xaringan (with help from garrick's xaringanthemer): this is a preview of the original template (rendered) and the css for the title/final page is here.

I appreciate your help very much - I've learnt a lot in this exchange and I'm happily dropping the background-color on the title slide just put the logos through YAMLtitle-slide-attributes!

[mcanouil]

I see.
Basically you want a banner-like title block on the title slide, am I correct?

[cathblatter]

I think so - with the restriction that the banner needs to span the title slide asymetrically (for which I used different border-widths in css)

edit:

• I also tried to just save the banner/logos as an .svg and put this 'whole thing' as my background-image, but this did not work nicely when the rendering-size changed to full-screen
• then I tried to only put the banner as background-image and add the logos through YAML, which did not place the logos inside the banner as needed

[mcanouil]

I'll play around a bit later this week. 😉

[mcanouil]

From quarto-dev/quarto-cli/src/resources/formats/revealjs/pandoc/template.revealjs, I added a div with a "banner" css class:

File template.revealjs

<!DOCTYPE html>
<html$if(lang)$ lang="$lang$"$endif$$if(dir)$ dir="$dir$"$endif$>
<head>
  <meta charset="utf-8">
$if(quarto-version)$
  <meta name="generator" content="quarto-$quarto-version$" />
$else$
  <meta name="generator" content="quarto" />
$endif$

$for(author-meta)$
  <meta name="author" content="$author-meta$">
$endfor$
$if(date-meta)$
  <meta name="dcterms.date" content="$date-meta$">
$endif$
$if(keywords)$
  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
$endif$
  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
  <link rel="stylesheet" href="$revealjs-url$/dist/reset.css">
  <link rel="stylesheet" href="$revealjs-url$/dist/reveal.css">
  <style>
    $styles.html()$
  </style>
$if(theme)$
  <link rel="stylesheet" href="$revealjs-url$/dist/theme/$theme$.css" id="theme">
$else$
  <link rel="stylesheet" href="$revealjs-url$/dist/theme/black.css" id="theme">
$endif$
$for(css)$
  <link rel="stylesheet" href="$css$"/>
$endfor$
$if(math)$
  $math$
$endif$
$for(header-includes)$
  $header-includes$
$endfor$
</head>
<body>
$for(include-before)$
$include-before$
$endfor$
  <div class="reveal">
    <div class="slides">

$if(title)$
+ <div class="banner">
<section id="$idprefix$title-slide"$for(title-slide-attributes/pairs)$ $it.key$="$it.value$"$endfor$>
  <h1 class="title">$title$</h1>
$if(subtitle)$
  <p class="subtitle">$subtitle$</p>
$endif$
$for(author)$
  <p class="author">$author$</p>
$endfor$
$for(institute)$
  <p class="institute">$institute$</p>
$endfor$
$if(date)$
  <p class="date">$date$</p>
$endif$
</section>
+ </div>
$endif$
$if(toc)$
<section id="$idprefix$TOC">
<nav role="doc-toc"> 
$if(toc-title)$
<h2 id="$idprefix$toc-title">$toc-title$</h2>
$endif$
$table-of-contents$
</nav>
</section>
$endif$

$body$
    </div>
  </div>

  <script>window.backupDefine = window.define; window.define = undefined;</script>
  <script src="$revealjs-url$/dist/reveal.js"></script>
  <!-- reveal.js plugins -->
  $for(reveal-jsscripts)$<script src="$reveal-jsscripts$"></script>
  $endfor$

  <script src="$revealjs-url$/plugin/notes/notes.js"></script>
  <script src="$revealjs-url$/plugin/search/search.js"></script>
  <script src="$revealjs-url$/plugin/zoom/zoom.js"></script>
$if(mathjax)$
  <script src="$revealjs-url$/plugin/math/math.js"></script>
$endif$
  <script>window.define = window.backupDefine; window.backupDefine = undefined;</script>

  <script>

      // Full list of configuration options available at:
      // https://revealjs.com/config/
      Reveal.initialize({ 
        // Display controls in the bottom right corner
        controls: $controls$,

        // Help the user learn the controls by providing hints, for example by
        // bouncing the down arrow when they first encounter a vertical slide
        controlsTutorial: $controlsTutorial$,

        // Determines where controls appear, "edges" or "bottom-right"
        controlsLayout: '$controlsLayout$',

        // Visibility rule for backwards navigation arrows; "faded", "hidden"
        // or "visible"
        controlsBackArrows: '$controlsBackArrows$',

        // Display a presentation progress bar
        progress: $progress$,

        // Display the page number of the current slide
        slideNumber: $slideNumber$,

        // 'all', 'print', or 'speaker'
        showSlideNumber: '$showSlideNumber$',

        // Add the current slide number to the URL hash so that reloading the
        // page/copying the URL will return you to the same slide
        hash: $hash$,

        // Start with 1 for the hash rather than 0
        hashOneBasedIndex: $hashOneBasedIndex$,

        // Flags if we should monitor the hash and change slides accordingly
        respondToHashChanges: $respondToHashChanges$,

        // Push each slide change to the browser history
        history: $history$,

        // Enable keyboard shortcuts for navigation
        keyboard: $keyboard$,

        // Enable the slide overview mode
        overview: $overview$,

        // Disables the default reveal.js slide layout (scaling and centering)
        // so that you can use custom CSS layout
        disableLayout: $disableLayout$,

        // Vertical centering of slides
        center: $center$,

        // Enables touch navigation on devices with touch input
        touch: $touch$,

        // Loop the presentation
        loop: $loop$,

        // Change the presentation direction to be RTL
        rtl: $rtl$,

        // see https://revealjs.com/vertical-slides/#navigation-mode
        navigationMode: '$navigationMode$',

        // Randomizes the order of slides each time the presentation loads
        shuffle: $shuffle$,

        // Turns fragments on and off globally
        fragments: $fragments$,

        // Flags whether to include the current fragment in the URL,
        // so that reloading brings you to the same fragment position
        fragmentInURL: $fragmentInURL$,

        // Flags if the presentation is running in an embedded mode,
        // i.e. contained within a limited portion of the screen
        embedded: $embedded$,

        // Flags if we should show a help overlay when the questionmark
        // key is pressed
        help: $help$,

        // Flags if it should be possible to pause the presentation (blackout)
        pause: $pause$,

        // Flags if speaker notes should be visible to all viewers
        showNotes: $showNotes$,

        // Global override for autoplaying embedded media (null/true/false)
        autoPlayMedia: $autoPlayMedia$,

        // Global override for preloading lazy-loaded iframes (null/true/false)
        preloadIframes: $preloadIframes$,

        // Number of milliseconds between automatically proceeding to the
        // next slide, disabled when set to 0, this value can be overwritten
        // by using a data-autoslide attribute on your slides
        autoSlide: $autoSlide$,

        // Stop auto-sliding after user input
        autoSlideStoppable: $autoSlideStoppable$,

        // Use this method for navigation when auto-sliding
        autoSlideMethod: $autoSlideMethod$,

        // Specify the average time in seconds that you think you will spend
        // presenting each slide. This is used to show a pacing timer in the
        // speaker view
        defaultTiming: $defaultTiming$,

        // Enable slide navigation via mouse wheel
        mouseWheel: $mouseWheel$,

        // The display mode that will be used to show slides
        display: '$display$',

        // Hide cursor if inactive
        hideInactiveCursor: $hideInactiveCursor$,

        // Time before the cursor is hidden (in ms)
        hideCursorTime: $hideCursorTime$,

        // Opens links in an iframe preview overlay
        previewLinks: $previewLinks$,

        // Transition style (none/fade/slide/convex/concave/zoom)
        transition: '$transition$',

        // Transition speed (default/fast/slow)
        transitionSpeed: '$transitionSpeed$',

        // Transition style for full page slide backgrounds
        // (none/fade/slide/convex/concave/zoom)
        backgroundTransition: '$backgroundTransition$',

        // Number of slides away from the current that are visible
        viewDistance: $viewDistance$,

        // Number of slides away from the current that are visible on mobile
        // devices. It is advisable to set this to a lower number than
        // viewDistance in order to save resources.
        mobileViewDistance: $mobileViewDistance$,
$if(parallaxBackgroundImage)$

        // Parallax background image
        parallaxBackgroundImage: '$parallaxBackgroundImage$', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
$else$
$if(background-image)$

       // Parallax background image
       parallaxBackgroundImage: '$background-image$', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
$endif$
$endif$
$if(parallaxBackgroundSize)$

        // Parallax background size
        parallaxBackgroundSize: '$parallaxBackgroundSize$', // CSS syntax, e.g. "2100px 900px"
$endif$
$if(parallaxBackgroundHorizontal)$

        // Amount to move parallax background (horizontal and vertical) on slide change
        // Number, e.g. 100
        parallaxBackgroundHorizontal: $parallaxBackgroundHorizontal$,
$endif$
$if(parallaxBackgroundVertical)$

        parallaxBackgroundVertical: $parallaxBackgroundVertical$,
$endif$
$if(width)$

        // The "normal" size of the presentation, aspect ratio will be preserved
        // when the presentation is scaled to fit different resolutions. Can be
        // specified using percentage units.
        width: $width$,
$endif$
$if(height)$

        height: $height$,
$endif$
$if(margin)$

        // Factor of the display size that should remain empty around the content
        margin: $margin$,
$endif$
$if(minScale)$

        // Bounds for smallest/largest possible scale to apply to content
        minScale: $minScale$,
$endif$
$if(maxScale)$

        maxScale: $maxScale$,
$endif$
$if(mathjax)$

        math: {
          mathjax: '$mathjaxurl$',
          config: 'TeX-AMS_HTML-full',
          tex2jax: {
            inlineMath: [['\\(','\\)']],
            displayMath: [['\\[','\\]']],
            balanceBraces: true,
            processEscapes: false,
            processRefs: true,
            processEnvironments: true,
            preview: 'TeX',
            skipTags: ['script','noscript','style','textarea','pre','code'],
            ignoreClass: 'tex2jax_ignore',
            processClass: 'tex2jax_process'
          },
        },
$endif$

        // reveal.js plugins
        plugins: [
$if(mathjax)$
          RevealMath,
$endif$
          RevealNotes,
          RevealSearch,
          RevealZoom
        ]
      });
    </script>
  $for(include-after)$
  $include-after$
  $endfor$
  </body>
</html>

A CSS file:

.banner {
  width: 95%;
  height: 65%;
  background: #A5D7D2;
  position: absolute;
  top: 5%;
  left: 0%;
}

.reveal .slides {
  border: 4px dotted #000000;
}

Finally, the Quarto document:

---
title: "Untitled"
format:
  revealjs:
    template: template.revealjs
    css: banner.css
---

## Something

The output:

Since for now, there is no partials for revealjs, you have to override the whole template (see related issue #2236).

[mcanouil]

@cderv Yes, bad modification when I used the diff block to highlight the changes (I fixed it in the original post). Also, if/when #2236 will be resolved, the title-slide partial will solve the issue about having to maintain the whole template.

@cathblatter This was simply an example of how it could be achieved. Now, some JavaScript or a more precise structure can solve the repeating thing.
Although, it's weird that this element is repeated while there is $if(title)$ to handle the title slide. 🤔

[cderv]

HTML structure is important for Reveal.js - <section> means slide separation. I wonder if adding the div around the tag is not messing up the processing. Probably adding inside the <section> (which means inside the first slide) is safer regarding Reveal.js processing.

Just sharing some thoughts for explanation. I did not tried.

[mcanouil]

Yes, this is likely the reason.
It was really a quick & dirty CSS example to get the expected result for the title slide. 😇

[cathblatter]

Wrapping the title-slide-section in another<section>gives me exactly what I wanted - awesome🙏!
thank you very much @mcanouil and @cderv !

and I'll look out for #2236 to switch to partials when possible ...

$if(title)$
<section> 
<div class="banner">
<section id="$idprefix$title-slide"$for(title-slide-attributes/pairs)$ $it.key$="$it.value$"$endfor$>
  <h1 class="title">$title$</h1>
$if(subtitle)$
  <p class="subtitle">$subtitle$</p>
$endif$
$for(author)$
  <p class="author">$author$</p>
$endfor$
$for(institute)$
  <p class="institute">$institute$</p>
$endfor$
$if(date)$
  <p class="date">$date$</p>
$endif$
</section>
</div>
</section>

edit: I did not get to mark two replies as answer, but wouldn't have been possible with both of you!

[cderv]

Take care about adding some section tag in the template: This means for revealjs "new slide".

The presentation markup hierarchy needs to be .reveal > .slides > section where the section element represents one slide and can be repeated indefinitely.

^{From: https://revealjs.com/markup/}

So by adding a section, it seems to work for you, but it may have some side effect with other feature as you added a slide basically, and the old section is a slide inside another one. This is for vertical slide usually

If you place multiple section elements inside of another section they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence.

This may not be seen as vertical slide maybe because of our default (everything horizontal).

Anyway, just sharing in case you run into issues in the future

[mcanouil]

@cathblatter The following block should work as intended without having to add an extra section

$if(title)$
<section id="$idprefix$title-slide"$for(title-slide-attributes/pairs)$ $it.key$="$it.value$"$endfor$>
+ <div class="banner">
  <h1 class="title">$title$</h1>
$if(subtitle)$
  <p class="subtitle">$subtitle$</p>
$endif$
$for(author)$
  <p class="author">$author$</p>
$endfor$
$for(institute)$
  <p class="institute">$institute$</p>
$endfor$
$if(date)$
  <p class="date">$date$</p>
$endif$
+ </div>
</section>
$endif$

And maybe the div tag is not even needed, i.e., adding the class to the section tag could work, depending on the CSS attributes associated with section in Reveal.js CSS.

PS: I can't test it now, but definitely will.

[mcanouil]

Here another related hack:

Screen.Recording.2022-09-05.at.23.02.56.mov

See template.revealjs content

<!DOCTYPE html>
<html$if(lang)$ lang="$lang$"$endif$$if(dir)$ dir="$dir$"$endif$>
<head>
  <meta charset="utf-8">
$if(quarto-version)$
  <meta name="generator" content="quarto-$quarto-version$" />
$else$
  <meta name="generator" content="quarto" />
$endif$

$for(author-meta)$
  <meta name="author" content="$author-meta$">
$endfor$
$if(date-meta)$
  <meta name="dcterms.date" content="$date-meta$">
$endif$
$if(keywords)$
  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
$endif$
  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
  <link rel="stylesheet" href="$revealjs-url$/dist/reset.css">
  <link rel="stylesheet" href="$revealjs-url$/dist/reveal.css">
  <style>
    $styles.html()$
  </style>
$if(theme)$
  <link rel="stylesheet" href="$revealjs-url$/dist/theme/$theme$.css" id="theme">
$else$
  <link rel="stylesheet" href="$revealjs-url$/dist/theme/black.css" id="theme">
$endif$
$for(css)$
  <link rel="stylesheet" href="$css$"/>
$endfor$
$if(math)$
  $math$
$endif$
$for(header-includes)$
  $header-includes$
$endfor$
</head>
<body>
$for(include-before)$
$include-before$
$endfor$
  <div class="reveal">
    <div class="slides">

$if(title)$
<section id="$idprefix$title-slide"$for(title-slide-attributes/pairs)$ $it.key$="$it.value$"$endfor$>
+ <span class="banner"></span>
  <h1 class="title">$title$</h1>
$if(subtitle)$
  <p class="subtitle">$subtitle$</p>
$endif$
$for(author)$
  <p class="author">$author$</p>
$endfor$
$for(institute)$
  <p class="institute">$institute$</p>
$endfor$
$if(date)$
  <p class="date">$date$</p>
$endif$
</section>
$endif$
$if(toc)$
<section id="$idprefix$TOC">
<nav role="doc-toc"> 
$if(toc-title)$
<h2 id="$idprefix$toc-title">$toc-title$</h2>
$endif$
$table-of-contents$
</nav>
</section>
$endif$

$body$
    </div>
  </div>

  <script>window.backupDefine = window.define; window.define = undefined;</script>
  <script src="$revealjs-url$/dist/reveal.js"></script>
  <!-- reveal.js plugins -->
  $for(reveal-jsscripts)$<script src="$reveal-jsscripts$"></script>
  $endfor$

  <script src="$revealjs-url$/plugin/notes/notes.js"></script>
  <script src="$revealjs-url$/plugin/search/search.js"></script>
  <script src="$revealjs-url$/plugin/zoom/zoom.js"></script>
$if(mathjax)$
  <script src="$revealjs-url$/plugin/math/math.js"></script>
$endif$
  <script>window.define = window.backupDefine; window.backupDefine = undefined;</script>

  <script>

      // Full list of configuration options available at:
      // https://revealjs.com/config/
      Reveal.initialize({ 
        // Display controls in the bottom right corner
        controls: $controls$,

        // Help the user learn the controls by providing hints, for example by
        // bouncing the down arrow when they first encounter a vertical slide
        controlsTutorial: $controlsTutorial$,

        // Determines where controls appear, "edges" or "bottom-right"
        controlsLayout: '$controlsLayout$',

        // Visibility rule for backwards navigation arrows; "faded", "hidden"
        // or "visible"
        controlsBackArrows: '$controlsBackArrows$',

        // Display a presentation progress bar
        progress: $progress$,

        // Display the page number of the current slide
        slideNumber: $slideNumber$,

        // 'all', 'print', or 'speaker'
        showSlideNumber: '$showSlideNumber$',

        // Add the current slide number to the URL hash so that reloading the
        // page/copying the URL will return you to the same slide
        hash: $hash$,

        // Start with 1 for the hash rather than 0
        hashOneBasedIndex: $hashOneBasedIndex$,

        // Flags if we should monitor the hash and change slides accordingly
        respondToHashChanges: $respondToHashChanges$,

        // Push each slide change to the browser history
        history: $history$,

        // Enable keyboard shortcuts for navigation
        keyboard: $keyboard$,

        // Enable the slide overview mode
        overview: $overview$,

        // Disables the default reveal.js slide layout (scaling and centering)
        // so that you can use custom CSS layout
        disableLayout: $disableLayout$,

        // Vertical centering of slides
        center: $center$,

        // Enables touch navigation on devices with touch input
        touch: $touch$,

        // Loop the presentation
        loop: $loop$,

        // Change the presentation direction to be RTL
        rtl: $rtl$,

        // see https://revealjs.com/vertical-slides/#navigation-mode
        navigationMode: '$navigationMode$',

        // Randomizes the order of slides each time the presentation loads
        shuffle: $shuffle$,

        // Turns fragments on and off globally
        fragments: $fragments$,

        // Flags whether to include the current fragment in the URL,
        // so that reloading brings you to the same fragment position
        fragmentInURL: $fragmentInURL$,

        // Flags if the presentation is running in an embedded mode,
        // i.e. contained within a limited portion of the screen
        embedded: $embedded$,

        // Flags if we should show a help overlay when the questionmark
        // key is pressed
        help: $help$,

        // Flags if it should be possible to pause the presentation (blackout)
        pause: $pause$,

        // Flags if speaker notes should be visible to all viewers
        showNotes: $showNotes$,

        // Global override for autoplaying embedded media (null/true/false)
        autoPlayMedia: $autoPlayMedia$,

        // Global override for preloading lazy-loaded iframes (null/true/false)
        preloadIframes: $preloadIframes$,

        // Number of milliseconds between automatically proceeding to the
        // next slide, disabled when set to 0, this value can be overwritten
        // by using a data-autoslide attribute on your slides
        autoSlide: $autoSlide$,

        // Stop auto-sliding after user input
        autoSlideStoppable: $autoSlideStoppable$,

        // Use this method for navigation when auto-sliding
        autoSlideMethod: $autoSlideMethod$,

        // Specify the average time in seconds that you think you will spend
        // presenting each slide. This is used to show a pacing timer in the
        // speaker view
        defaultTiming: $defaultTiming$,

        // Enable slide navigation via mouse wheel
        mouseWheel: $mouseWheel$,

        // The display mode that will be used to show slides
        display: '$display$',

        // Hide cursor if inactive
        hideInactiveCursor: $hideInactiveCursor$,

        // Time before the cursor is hidden (in ms)
        hideCursorTime: $hideCursorTime$,

        // Opens links in an iframe preview overlay
        previewLinks: $previewLinks$,

        // Transition style (none/fade/slide/convex/concave/zoom)
        transition: '$transition$',

        // Transition speed (default/fast/slow)
        transitionSpeed: '$transitionSpeed$',

        // Transition style for full page slide backgrounds
        // (none/fade/slide/convex/concave/zoom)
        backgroundTransition: '$backgroundTransition$',

        // Number of slides away from the current that are visible
        viewDistance: $viewDistance$,

        // Number of slides away from the current that are visible on mobile
        // devices. It is advisable to set this to a lower number than
        // viewDistance in order to save resources.
        mobileViewDistance: $mobileViewDistance$,
$if(parallaxBackgroundImage)$

        // Parallax background image
        parallaxBackgroundImage: '$parallaxBackgroundImage$', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
$else$
$if(background-image)$

       // Parallax background image
       parallaxBackgroundImage: '$background-image$', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
$endif$
$endif$
$if(parallaxBackgroundSize)$

        // Parallax background size
        parallaxBackgroundSize: '$parallaxBackgroundSize$', // CSS syntax, e.g. "2100px 900px"
$endif$
$if(parallaxBackgroundHorizontal)$

        // Amount to move parallax background (horizontal and vertical) on slide change
        // Number, e.g. 100
        parallaxBackgroundHorizontal: $parallaxBackgroundHorizontal$,
$endif$
$if(parallaxBackgroundVertical)$

        parallaxBackgroundVertical: $parallaxBackgroundVertical$,
$endif$
$if(width)$

        // The "normal" size of the presentation, aspect ratio will be preserved
        // when the presentation is scaled to fit different resolutions. Can be
        // specified using percentage units.
        width: $width$,
$endif$
$if(height)$

        height: $height$,
$endif$
$if(margin)$

        // Factor of the display size that should remain empty around the content
        margin: $margin$,
$endif$
$if(minScale)$

        // Bounds for smallest/largest possible scale to apply to content
        minScale: $minScale$,
$endif$
$if(maxScale)$

        maxScale: $maxScale$,
$endif$
$if(mathjax)$

        math: {
          mathjax: '$mathjaxurl$',
          config: 'TeX-AMS_HTML-full',
          tex2jax: {
            inlineMath: [['\\(','\\)']],
            displayMath: [['\\[','\\]']],
            balanceBraces: true,
            processEscapes: false,
            processRefs: true,
            processEnvironments: true,
            preview: 'TeX',
            skipTags: ['script','noscript','style','textarea','pre','code'],
            ignoreClass: 'tex2jax_ignore',
            processClass: 'tex2jax_process'
          },
        },
$endif$

        // reveal.js plugins
        plugins: [
$if(mathjax)$
          RevealMath,
$endif$
          RevealNotes,
          RevealSearch,
          RevealZoom
        ]
      });
    </script>
  $for(include-after)$
  $include-after$
  $endfor$
  </body>
</html>

See banner.css content

.banner {
  width: 95%;
  height: 375%;
  background: #A5D7D2;
  position: absolute;
  top: -175%;
  left: 0%;
  z-index: -1;
}

.reveal .slides {
  border: 4px dotted #000000;
}

See index.qmd content

---
title: "Untitled"
format:
  revealjs:
    template: template.revealjs
    css: banner.css
---

## Something

Content

## Else

Content

[cathblatter]

wow - I adapted & tweaked this to include .banner into #title-slide so I don't have to modify the template!

See .qmd

---
title: test title
subtitle: subtitle
author: jane doe
format:
  revealjs:
    css: banner3.css
menu: false
center-title-slide: false
---

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

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

## Code

When you click the **Render** button a presentation will be generated that includes both content and the output of embedded code. 

File .css

.reveal .slides {
  border: 4px dotted #000000;
}


#title-slide {
  width: 98%;
  height: 70%;
  background: #A5D7D2;
  position: absolute;
  top: 2%;
  left: 0%;
  z-index: -1;
}

I think this gives me the cleanest code options (and avoids to meddling in the template) - really, really thankful for your guidance @mcanouil 🙏

[mcanouil]

With this, you modify the title-slide entirely.
It no longer fills the slide, i.e., the title is no longer at the centre of the slide.
It could lead to unexpected issues with the layout, while mine does not change the layout.

[cathblatter]

Ok, so to get this right:

• option with span in the template is the safest for keeping the general layout but it depends on the template (that could change)
• option with modification of #title-slide (and also h1, p, .subtitle, .author etc) can still lead to a broken layout
• cdervs first reply (omitting title/author in YAML) is the most versatile and safe for the layout but requires duplication of code in every .qmd

where would I need to look out if the template.revealjs changed (quarto-cli or pandoc or revealjs in general)?

[mcanouil]

The template is in the following directory: https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/revealjs/pandoc
But, you should not have to worry about this for a while, meanwhile, the feature request #2236 could be resolved, which will allow you to only specify the title-slide section as a partial:

$if(title)$
<section id="$idprefix$title-slide"$for(title-slide-attributes/pairs)$ $it.key$="$it.value$"$endfor$>
+ <span class="banner"></span>
  <h1 class="title">$title$</h1>
$if(subtitle)$
  <p class="subtitle">$subtitle$</p>
$endif$
$for(author)$
  <p class="author">$author$</p>
$endfor$
$for(institute)$
  <p class="institute">$institute$</p>
$endfor$
$if(date)$
  <p class="date">$date$</p>
$endif$
</section>
$endif$

[cathblatter]

got it, thanks!