Create new admonitions

Is your feature request related to a problem? Please describe.

I’m not certain that this isn’t already possible, but given the issues raised in #999 and #1314 I suspect it isn’t.

I’d like to use custom-made admonitions. For example, I wanted to create an “extra credit” admonition and specify a new icon to be used.

Describe the solution you’d like

I thought perhaps this would be possible with some custom css like this:

:root {
  --pst-icon-grad-cap: '\f0eb';
  --pst-color-admonition-extra: var(--pst-color-success);
  --pst-icon-admonition-extra: var(--pst-icon-grad-cap);
}
.admonition.extra {
    border-color: rgba(var(--pst-color-admonition-extra), 1)
}
.admonition.extra .admonition-title {
    background-color: rgba(var(--pst-color-admonition-extra), .1)
}
.admonition.extra .admonition-title:before {
    color: rgba(var(--pst-color-admonition-extra), 1);
    content: var(--pst-icon-admonition-extra)
}

But I guess this assumes that a previously undefined admonition can be handled, which doesn’t appear to be the case. When I try to build my book I get an error message WARNING: Unknown directive type "extra".

I think a workaround would be simply to take an existing admonition and use CSS to overwrite the formatting with the icon that I want, but I’d like to still be able to use the existing admonitions and to do this I’d have to pick one to overwrite.

I don’t quite understand yet the workflow that creates the book, so I’m not sure where the existing admonitions are defined. I’ve tried looking in the various github repositories but haven’t been able to find it.

Is this something that can be done with the existing setup, or would it require an actual change to the codebase?

[brownsarahm]

I agree that’s the right place to put it, since it relies on custom css, and then also link to it from the admonitions section. WIll work on this soon.

[stoffprof]

Ah yes, that’s right. Much easier than I realized. In case anyone else comes along having trouble seeing how to do this, here’s what I did:

In the Jupyter notebook:

:::{admonition} Extra credit
An "extra credit" exercise is presented here.
:::

Then, in format.css:

.admonition-extra-credit {
    border-left-color: rgba(var(--pst-color-success), 1);
}
.admonition-extra-credit .admonition-title {
    background-color: rgba(var(--pst-color-success), .1)
}
.admonition-extra-credit .admonition-title:before {
    color: rgba(var(--pst-color-success), 1);
    content: '\f19d';
}