[Revealjs] Customisation of callouts

[fbob]

I would like to customize the appearance of my callouts in a revealjs presentation.
Let's say for example that I want to have the same font size in the body of a callout as the main font size.
I've tried to put this in a .scss without any success:

.callout.callout-style-default .callout-body {
    font-size: 1.0rem;
}

Any idea or pointer ?
Thanks !

[cscheid]

(Since you mentioned .scss) If you need scss specifically, you need to be mindful of quarto's notion of Sass layers: https://quarto.org/docs/output-formats/html-themes-more.html#bootswatch-sass-theme-files (see here for examples: https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/html/bootstrap/themes)

But it looks like you're attempting to use plain CSS, and that's simpler.

test.qmd

---
format:
  revealjs:
    css: styles.css
---

This is some text.

::: {.callout-note}

## This is a title

This is some content.

:::

Some more.

styles.css

.callout.callout-style-default .callout-body {
  background-color: red;
}

output:

So we know that is being picked up. Now you need to find the right way to set the font size. What's happening with font-size specifically is that your selector is losing to other rules because of (I suspect) CSS specificity rules. Look at the chrome inspector:

You'll need to find a better selector (and I trust your CSS expertise here since you found .callout-body, etc..!)

[fbob]

Many thanks @cscheid for your kind and helpful answer, thanks for your pointers

I've tried your example in my .scss and it seems to also work

.callout.callout-style-default .callout-body {
  background-color: red;
}

It looks like I have to enhance my investigation skills...
I'm indeed a total newbie on css or scss aka I'm lost :)

[fbob]

I've made some progress using :

.reveal .callout.callout-style-default div.callout-body {
 	  font-size: var(--r-main-font-size);
}

but the smaller: true option fucks up my marvelous finding.

Don't know how to apply the same font-size coefficient when using this option :

.reveal.smaller .slides section, .reveal .slides section.smaller, .reveal .slides section .callout {
    font-size: 0.7em;
}

Any ideas ?
Thanks

[urbainvaes]

I'm interested in this too. It seems that setting the font-size reliably (with or without .smaller) in a callout to match the size of normal text is still an open problem?

[EllaKaye]

On this theme, but attempting to do something simpler, I'd like to edit the colour of the callouts in a revealjs presentation using scss variables.

I have set $callout-color-note etc in the scss file, which works fine for html output, but not for the revealjs format. Is there a shorthand way in sass to set the variables for revealjs or would I need to use css and selectors, as in the posts above?

I have set in custom.scss file:

$aubergine90: #664272;
$ruby90: #A42B28;
$sky90: #195387;
$green90: #4E7242;
$russet90: #874E19;

$callout-color-note: $sky90;
$callout-color-important: $ruby90;
$callout-color-tip: $green90;
$callout-color-caution: $aubergine90;
$callout-color-warning: $russet90;

After inspecting elements, I have also tried setting, e.g., the following CSS:

div.callout-warning {
  border-color-left: $russet90 !important;
}

but that doesn't work, seemingly because important! is already set for border-color-left on div.callout-warning elsewhere.

And here's a .qmd to test it:

---
title: Testing Callouts
format: 
  revealjs:
    theme: [default, custom.scss]
---

:::{.callout-note}
A note
:::

:::{.callout-warning}
A warning
:::

:::{.callout-important}
Something important
:::

:::{.callout-tip}
This is a good idea
:::

:::{.callout-caution}
Be careful about doing this
:::

[EllaKaye]

Thanks @cderv. That'll be really nice to have in 1.4. In the meantime, I'm still struggling to override the styles in the attached style sheet because some of the properties I want to target are set as !important. Is there any way around that?

[cderv]

I'm still struggling to override the styles in the attached style sheet because some of the properties I want to target are set as !important. Is there any way around that?

This is indeed tricky because of the order of which CSS files are layered. The styles-callout.html will be the last one, so the !important won't be able to be overwritten by another one.

Only workaround I found is using knitr chunk because there is a scss engine you can use that will render the chunk content to CSS using sass R 📦 and insert in the HTML document. By chance, the insertion is after the styles-callout.html so it works.

---
title: Testing Callouts
format: revealjs
engine: knitr
---

```{scss}
$russet90: #874E19;

div {
  &.callout-warning {
    border-left-color: #A42B28 !important;
  }
}
```


:::{.callout-warning}
A warning
:::

This allows you to still use SCSS if you want to benefit from variables.

Otherwise, always remember that you can include raw HTML in the markdown directly.

---
title: Testing Callouts
format: revealjs
---

```{=html}
<style type="text/css">
div.callout-warning {
  border-left-color: #A42B28 !important;
}
</style>
```

:::{.callout-warning}
A warning
:::

inserting <style> in the body will be closer to the element and hence overwrite any other in header.

Hope it helps

[cscheid]

Only workaround I found is using knitr chunk because there is a scss engine you can use that will render the chunk content to CSS using sass R 📦 and insert in the HTML document.

This is probably not going to play well with quarto's own scss setup, right? (in the sense that the variables from one will not be visible in the other).

[EllaKaye]

This is super helpful. Thank you so much @cderv. I won't have a chance to try myself until Monday and will let you know then if I have any further questions but this certainly seems 🔥👍

[cderv]

This is probably not going to play well with quarto's own scss setup, right? (in the sense that the variables from one will not be visible in the other).

@cscheid This is only to use SCSS syntax instead of CSS directly - it is like using the css knitr engine, but just with hability to use sass. Indeed, this is not linked with the Quarto theming, and anything used inside the SCSS for this chunk is independant from anything else. So nothing from the Quarto theming system can be used. Resulting CSS will just be inserted in the document.

I did not give that much precision, but you're right I should have to avoid misunderstanding. What seems obvious to some is not to others. 🤦

Thanks for chiming in!

[jimjam-slam]

The other workaround is to just tack a second class onto the callouts in your doc—it's not as neat as a pure-CSS solution, but if you just need to get something working quickly for a single doc, maybe it's the way to get the specificity you need 🙂

::: {.callout-note .my-callout}
Hello!
:::

And the CSS file:

.callout.callout-style-default.my-callout .callout-body {
    font-size: 1.0rem;
}

[urbainvaes]

Thank you very much! I tried your solution, but it doesn't seem to work unfortunately. For some reason, the class my-callout does not appear in the generated html.

[cderv]

Thanks for the testing @urbainvaes, it seems we have indeed a difference between html and revealjs format. We'll see to change this. I opened #5208

[vvader24]

Along with all the above queries I am also trying to change the size of the callout box. That would be really helpful for my slides if possible.

[mcanouil]

What do you mean by "size"? I am assuming it's note font size since the answer is already there.

[hanneoberman]

For others stumbling across this, to adjust all of the callouts' text size at once, just add this scss chunk at the top of your Quarto presentation file

```{scss}

div {
  &.callout {
    font-size: 2.0rem !important;
  }
}

```

NB. based on @cderv's suggestion, thanks!!

[cderv]

This is now possible from Quarto 1.6.33 to customize callouts with the same variables than Bootstrap
https://prerelease.quarto.org/docs/presentations/revealjs/themes.html#sass-variables

[EllaKaye]

Woo hoo! Thanks @cderv