Custom slide class for a Quarto/revealjs presentation

[gsimchoni]

Hi,
Trying to move my presentations from xaringan to quarto+reveal.js and I must say I'm struggling.

But first thing's first: how do you create a custom slide class in quarto+revealjs?

In xaringan:

Just put this in mystyle.css:

.title-slide h2{
  text-align: center;
  color: #f5bd30;
}

.title-slide {
  background-color: #05263b;
}

Then in the .Rmd file you reference mystyle.css in the header, input class: title-slide in each slide you want to use that class.

In quarto this does not work exactly as required. Have tried all kinds of things:

1. If I simply repeat the above in the CSS and in the .qmd file open two new slides with:

## Introduction {.title-slide}

## Regular Slide

Then the background color of the box surrounding the text indeed changes in the Introduction slide, but not the entire slide and not the h2 text color (should be golden-ish).

2. If I add a ".reveal" class up there like this:

.reveal .title-slide h2{
  text-align: center;
  color: #f5bd30;
}

.reveal .title-slide {
  background-color: #05263b;
}

Now the entire slide gets the required background color, but not the h2 golden text color. Now the h2 text color is white for some reason!

3. Finally if I add "!important" next to the color statement (as in color: #f5bd30 !important;), the h2 text color is finally golden but so is the h2 text color in Regular Slide and every other slide..

Is there a simple way to define a custom slide class and apply it for a set of slides, as in xaringan, with the most simple css requirements as above?

Thanks!

[cderv]

xaringan and Quarto slides are not completely feature equivalent. The former is based on remark.js and the later on reveal.js - this means that some convenient feature from one won't exactly the same.
Differences between the two is quite important as with remark the HTML will contain some markdown that will be rendered dynamically in browser, while with reveal it is HTML only, so markdown has been processed by Pandoc.

the HTML slide structure is quite different then - this is why CSS could be more complex to customize. You need to check the structure and also the precedence for the CSS selector used. See slide backgrounds and custom background for title slide for example

Note that title slides are specific in RevealJS so changing them cannot be easy with CSS - Revealjs HTML structure separate slide content from slide background for example, and handles in JS part of it).

Quarto offer a theming system to allow tweaking some content using variables (with SASS) and not provide full CSS rules. (which can be done too). The custom theme is merged with the default one which sometime could be more efficient than external CSS. See Quarto - Reveal Themes

Quarto offers also when level a customisation that is not with xaringan which is Lua filters. This would allow to leverage such ## Introduction {.title-slide} syntax to apply transformation on the content of the section. or adding a default data-background attribute for this specific class. More information are on the Quarto website.

Hope it helps understand the difference.