R-Ladies theme for Quarto remark.js presentation

[beatrizmilz]

Hi!
Today I started to use Quarto presentations, and I I'm trying to change the style to have a similar theme as the rladies theme in xaringan (made by @apreshill 💜 ), so we can use in future presentations on the meetups.

The original xaringan theme is here: https://www.apreshill.com/slides/rladies-demo-slides.html

This is a first attempt to change the style of the presentation in order to have an R-Ladies theme for Quarto:
https://beatrizmilz.github.io/quarto-rladies-theme/

This is my first time using .scssand the code is based on what I found on the docs. I did not figure out how to change the background for the title slide.

If anyone has more ideas to improve it, I appreciate it!

Thanks 😄

[lucio-cornejo]

Great job with the theme recreation.
About changing the background for the title slide, the following CSS code works for me:

div.backgrounds > 
div.slide-background:first-child >
div.slide-background-content {
  background-color: purple;
}

[cderv]

I don't think there is a CSS rule specific to change that but the answer above (#653 (comment)) can do it. As you can guess from the CSS rule, revealjs as a specific way of managing the background.

Otherwise, what RevealJS and Quarto offers is that you can change background color on a per-slide basis using background-color attributes
https://quarto.org/docs/presentations/revealjs/#slide-backgrounds

You could then not use a automatic title slide but have your own and add the attributes on it. See https://quarto.org/docs/presentations/revealjs/#title-slide for custom title-slide.

To customize the automatic title slide you can use the title-slide-attributes variable (see in references https://quarto.org/docs/reference/formats/presentations/revealjs.html)

---
title: "Slideshow"
author: "author"
format: revealjs
title-slide-attributes:
  data-background-color: red
---

This is done through the default Pandoc template. When custom format will be available in Quarto, this could also be an option to have some custom elements to use within the template to fit your theme.

Hope it helps

[beatrizmilz]

Hi @lucio-cornejo and @cderv !

Thanks for the suggestions!

@lucio-cornejo I was able to change de background color, but did not find how to change the other elements/text that I needed to change in order to proper read the content of the slide. But I'll continue to investigate!

Using your suggestions @cderv worked (with this code on YAML:

title-slide-attributes:
   data-background-color: "#562457"

and this code on the slide that I want to make to change topic (the inverse class on xaringan):

## Title of slide {.center .center-x background-color="#562457"}

What its awesome (and I only found out now) is that when we use a dark background color, reveal uses a class on the slide called .has-dark-background, in which it already changes the colors of the text to a lighter one. So the thing that happened when I used the first suggestion did not happened when using approach.

Ps: in my attempt to make a slide like the inverse slide on xaringan, I did not find a built-in class to center horizontally the elements. So I did what we can in brazil a "gambiarra" and created this class to do it:

.center-x{
    text-align: center;
}

I made it to use it for now, but I think this is a simple thing that could be nice to have it built-in :) but with a nicer naming 😆 I was short on ideas.

I'll continue to try to improve it, because my goal is (in the future) to have a template that people could simply use the .scss file and don't have to change the YAML and stuff to have all the colors of the template.

Anyways, thank you both for the help. I think now looks more like the original slides from Alison.. 🙏

[cderv]

I'll continue to try to improve it, because my goal is (in the future) to have a template that people could simply use the .scss file and don't have to change the YAML and stuff to have all the colors of the template.

RevealJS framework is a bit different than remark.js and it will be harder to only have one .scss file only for the theme probably. But I'll help as much as I can for that. Let's keep in mind that it should be soon straightforward to create template and you could have a specific format for you slide that slightly modify the default one. It would should be as easy as changing a single YAML key to implement it. I'll update on that. I could help create such template if you want, just tell me.

and this code on the slide that I want to make to change topic (the inverse class on xaringan):

I think we can try have a invert that you could add on a slide to activate the change in background. It seems possible 🤔

I did not find a built-in class to center horizontally the elements. So I did what we can in brazil a "gambiarra" and created this class to do it:

There is a SASS variable to control the text alignement on all slides $presentation-slide-text-align
https://quarto.org/docs/presentations/revealjs/themes.html#saas-variables
but there is indeed no built-in feature in reveal to horizontally center a single slide without using custom CSS. But as you did, that is quite easy by adding a class with a rule, and using that class on slides to center.

I think this is a simple thing that could be nice to have it built-in :) but with a nicer naming 😆 I was short on ideas.

I find the naming good !
At the end of your experiment with all this, it will be interesting to share the wish list of xaringan feature that you miss in Quarto presentation. I don't think Quarto aims to replace xaringan at all (Revealjs and remark.js are two different framework with their own pro & cons) but that would be interesting to see what we could improve.