Define a new callout in quarto

Question

What the best call way to define a new callout in quarto? I can modify default callout like so:

---
format: 
  html: 
    theme:
      - custom.scss
---


::: {.callout-tip appearance="minimal"}
Some wild callout
:::

and then a .scss file like so:

/*-- scss:defaults --*/
$callout-background: #ff5bbb;

/*-- scss:rules --*/

.callout {
    background-color:$callout-background;
 }

but applies to all subsequent callouts. What would the best way be to define new ones?

shafee · Accepted Answer · 2022-12-02T04:32:35.480

One option to create a new callout block could be redefining css classes of callout with desired rules.

Here I have defined a new callout block callout-tweet redefining css classes of callout. But this redefined callout block doesn't contain a callout icon, even with callout-appearance: default. So to get icon, I have added another class .icon.

Therefore, callout-icon: false or true in yaml, will not affect this newly defined callout-block (callout-tweet). It will be rendered without icon by default and to get icon, you need to use .icon with it.

---
title: "New Callout Block"
format: 
  html: 
    theme: callout_tweet.scss
---

::: {.callout-tweet}
Tweet from the callout tweet
:::

::: {.callout-tweet .icon}
Tweet from the callout tweet with icon
:::

::: {.callout-tip}
Some wild callout
:::

::: {.callout-warning}
Some wild callout
:::

callout_tweet.scss

/*-- scss:defaults --*/
$border-color-left: #0dcaf0 !default;
$icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">  <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/></svg>') !default;

$background-color: #bfe4eb !default;


/*-- scss:rules --*/

div.callout-tweet.callout {
  border-left-color: $border-color-left;
}

div.callout-tweet.callout-style-default>.callout-header {
  background-color: $background-color;
}

.callout-tweet.icon .callout-icon {
  display: unset !important;
}

div.callout-tweet.icon.callout-captioned .callout-icon::before {
  background-image: $icon;
}

.callout-tweet.icon.callout-style-default div.callout-icon-container {
  padding-top: 0.1em;
  padding-right: 0.35em;
}

Now there an issue remains with the newly defined callout block, which is if you use collapse=true with it, it becomes collapsible but the collapsible icon doesn't show. To solve this without any more fuss, simply add an already defined callout-types after the .callout-tweet in div header.

---
title: "New Callout Block with collapse sign"
format: 
  html: 
    theme: callout_tweet.scss
---

::: {.callout-tweet collapse=true}
Tweet from the callout tweet with icon
:::

::: {.callout-tweet .callout-warning collapse=true}
Tweet from the callout tweet
:::

::: {.callout-tweet .icon .callout-note collapse=true}
Tweet from the callout tweet with icon
:::

This is incredible! I have been going down the wrong track with my own troubleshooting by trying to apply a lua filter here. But the interaction between lua-css-scss is... a bit confusing. — boshek, Dec 02 '22 at 20:42
Creating a new callout is not possible at the moment (but envisioned). I ended up hacking the least use callout (`callout-caution`) for me in my quarto extension https://github.com/ginolhac/unilur. The css is injected by the lua filter. Rendered file here: https://ginolhac.github.io/unilur/example.html — aurelien, Jan 27 '23 at 08:45

Define a new callout in quarto

1 Answers1