A very simple Quarto filter extension for revealjs output format that provides

• Support for adding header text like footer on slides, level1 (h1) and level2 (h2) slide titles on slide header,

• Another YAML option to add a logo on top-left side of each slides. So by using this filter, it is possible to use two logos for each slides (One by using the default logo option which adds the logo on bottom-right corner and another one by using header-logo option provided by this filter.)

• Provides YAML option header-logo-link and footer-logo-link to hyperlink the header logo and footer logo respectively.

View the Demos of using this filter,

• live demo 01
• live demo 02

⚠️ This extension requires Quarto version to be at least 1.2

quarto add shafayetShafee/reveal-header

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

This filter provides the following options,

Therefore an example could be,

---
title: "Quarto Presentations"
format:
  revealjs:
    slide-number: true
    logo: images/quarto.png
    footer: <https://quarto.org>
    header: Quarto Presentations with beautiful slide decks made by RevealJs
    header-logo: images/reveal_logo.svg
filters:
  - reveal-header
---


## Slides

Then the text Quarto Presentations with beautiful slide decks made by RevealJs will appear on the top margin of each slides (unless you use slide specific custom header) and similarly, the added logo will appear on top-left corner of each slide.

So the Title slide for the above example looks like,

You can also include a custom header per-slide by adding a header div at the bottom of the the slide, as following,

## Slide

::: header

Custom Header

:::

Another example that uses all of the options,

---
format: 
  revealjs:
    slide-number: true
    logo: images/quarto.png
    sc-sb-title: true
    header: Quarto Presentations with beautiful slide decks made by RevealJs
    header-logo: images/reveal_logo.svg
    subtitle-as-header: true
    footer: <https://quarto.org>
filters: 
  - reveal-header
slide-level: 3
number-sections: true
---

For a complete example with the live demo of the rendered output, see below.

Now to change the style of header components (i.e. logo, section and subsection title, header text), you can use the following css selectors,

• .reveal-header .header-logo: to change css properties of header image.
• .reveal-header .header-text: to change the styles of header text.
• .reveal-header .sc-title: to change the styles of section title on left side.
• .reveal-header .sb-title: to change the styles of sub-section title on right side.

Also, to change the header text style for slides with simple background attributes, use the css selector.reveal-header .inverse-header.

• The source code for a minimal example: example.qmd and the live demo of the rendered revealjs slides, example.html

• The source code for another example that uses all the options: example_all.qmd and the live demo of the rendered revealjs slides, example_all.html

• The source code for another example that uses only sc-sb-title: example_section-title.qmd and the live demo of the rendered revealjs slides, example_section_title.html

• The source code for example where header text is hidden on the title slide: example_hide_header_text.qmd and the rendered output