Ctrl+K

Custom Admonitions

5.6. Custom Admonitions#

last update: Feb 07, 2024

5.6.1. myadmonitions.css#

First, Make _static/myadmonitions.css in your book.

5.6.2. Change icons for pre-defined admonitions#

You can choose icons for admonitions from Fontawsome

/* change icon for note */
div.note .admonition-title:after {
    content: "\f02d" !important;
}
/* change icon for attention */
div.attention .admonition-title:after {
    content: "\f0e7" !important;
}
/* change icon for attention */
div.important .admonition-title:after {
    content: "\f7e4" !important;
}

:::{note}
note
:::

:::{attention}
attention
:::

:::{important}
important
:::

Note

note

Attention

attention

Important

important

5.6.3. No icon class#

/** No icon for admonitions with no-icon class */
div.admonition.no-icon > .admonition-title::after {
    content: none !important;
}
div.admonition.no-icon > .admonition-title {
    padding-left: .6rem;
}
/** No icon for note with no-icon class */
div.note.no-icon > .admonition-title::after {
    content: none !important;
}
div.note.no-icon > .admonition-title {
    padding-left: .6rem;
}

:::{note}
:class: no-icon
note without icon
:::

:::{admonition} Title
:class: no-icon
admonition without icon
:::

Note

note without icon

Title

admonition without icon

5.6.4. New admonitions 1#

/* simple class for admonitions */
div.simple {
    border-left-color: rgba(var(--pst-color-success), .1);
}
div.simple .admonition-title {
    background-color: rgba(var(--pst-color-success), .1)
}
div.simple .admonition-title:after {
    content: none !important;
}
/* extra-credit class for admonitions */
div.extra-credit {
    border-left-color: rgba(0, 146, 16, 1);
}
div.extra-credit .admonition-title {
    background-color: rgba(0, 246, 16, .1);
}
div.extra-credit .admonition-title:after {
    color: rgba(0, 146, 16, 1);
    content: '\f19d';
}
/* quote class for admonitions */
div.quote {
    font-style: italic;
    border-left-color: rgba(146, 146, 146, 1);
}
div.quote .admonition-title {
    font-style: italic;
    background-color:  rgba(146, 146, 146, .1);
}
div.quote .admonition-title:after {
    color: rgba(146, 146, 146, 1);
    content: "\f10e";
}

:::{admonition} asdf
:class: extra-credit
"extra credit" as class
:::

:::{admonition} asdf
:class: extra-credit no-icon
extra credit and no-icon class
:::

:::{admonition} Title
:class: simple
simple class
:::

:::{admonition} Uncle Ben, Spider-Man (2002)
:class: quote
Remember, with great power comes great responsibility.
:::

asdf

“extra credit” as class

asdf

extra credit and no-icon class

Title

simple class

Uncle Ben, Spider-Man (2002)

Remember, with great power comes great responsibility.

5.6.5. New admonitions 2#

/* extra-credit class as title for admonitions */
div.admonition-extra-credit {
    border-left-color: rgba(0, 146, 16, 1);
}
div.admonition-extra-credit .admonition-title {
    background-color: rgba(0, 246, 16, .1);
}
div.admonition-extra-credit .admonition-title:after {
    color: rgba(0, 146, 16, 1);
    content: '\f19d';
}
/* abstract class for admonitions */
div.admonition-abstract {
    border-left-color: rgba(246, 0, 16, 1);
}
div.admonition-abstract .admonition-title {
    background-color: rgba(246, 0, 16, .35);
}
div.admonition-abstract .admonition-title:after {
    color: rgba(200, 0, 16, 1);
    content: "\f135";
}
/* comment class for admonitions */
div.admonition-comment .admonition-title:after {
    content: "\f075";
}
/* example class for admonitions */
div.admonition-example {
    border-left-color:  rgba(100, 100, 100, 1);
}
div.admonition-example .admonition-title {
    background-color:  rgba(100, 100, 100, .01);
}
div.admonition-example .admonition-title:after {
    color: rgba(100, 100, 100, 1);
    content: "\f0c3";
}
/* question class for admonitions */
div.admonition-question {
    border-left-color:  rgba(100, 100, 100, 1);
}
div.admonition-question .admonition-title {
    background-color:  rgba(100, 100, 100, .01);
}
div.admonition-question .admonition-title:after {
    color: rgba(100, 100, 100, 1);
    content: "\3f";
}

:::{admonition} extra credit
extra-credit class (letter case doesn’t matter)
:::

:::{admonition} Extra credit
extra-credit class (letter case doesn’t matter)
:::

:::{admonition} EXTRA CREDIT
extra-credit class (letter case doesn’t matter)
:::

:::{admonition} Abstract
abstract class (letter case doesn’t matter)
:::

:::{admonition} Comment
comment class (letter case doesn’t matter)
:::

:::{admonition} Example
example class (letter case doesn’t matter)
:::

:::{admonition} Question
question class (letter case doesn’t matter)
:::

extra credit

extra-credit class (letter case doesn’t matter)

Extra credit

extra-credit class (letter case doesn’t matter)

EXTRA CREDIT

extra-credit class (letter case doesn’t matter)

Abstract

abstract class (letter case doesn’t matter)

Comment

comment class (letter case doesn’t matter)

Example

example class (letter case doesn’t matter)

Question

question class (letter case doesn’t matter)

5.6.6. Remove icons from sphinx-proof#

/* remove icons from spinx-proof */
div.axiom p.admonition-title::after {
	content: none;
}
div.axiom p.admonition-title {
    padding-left: .6rem;
}
div.definition p.admonition-title::after {
	content: none;
}
div.definition p.admonition-title {
    padding-left: .6rem;
}
div.assumption p.admonition-title::after {
	content: none;
}
div.assumption p.admonition-title {
    padding-left: .6rem;
}
div.theorem p.admonition-title::after {
	content: none;
}
div.theorem p.admonition-title {
    padding-left: .6rem;
}
div.proposition p.admonition-title::after {
	content: none;
}
div.proposition p.admonition-title {
    padding-left: .6rem;
}
div.corollary p.admonition-title::after {
	content: none;
}
div.corollary p.admonition-title {
    padding-left: .6rem;
}
div.lemma p.admonition-title::after {
	content: none;
}
div.lemma p.admonition-title {
    padding-left: .6rem;
}
div.conjecture p.admonition-title::after {
	content: none;
}
div.conjecture p.admonition-title {
    padding-left: .6rem;
}
div.example p.admonition-title::after {
	content: none;
}
div.example p.admonition-title {
    padding-left: .6rem;
}
div.observation p.admonition-title::after {
	content: none;
}
div.observation p.admonition-title {
    padding-left: .6rem;
}
div.remark p.admonition-title::after {
	content: none;
}
div.remark p.admonition-title {
    padding-left: .6rem;
}
div.criterion p.admonition-title::after {
	content: none;
}
div.criterion p.admonition-title {
    padding-left: .6rem;
}
div.property p.admonition-title::after {
	content: none;
}
div.property p.admonition-title {
    padding-left: .6rem;
}
div.algorithm p.admonition-title::after {
	content: none;
}
div.algorithm p.admonition-title {
    padding-left: .6rem;
}

:::{prf:theorem}
asdf
:::

:::{prf:lemma}
asdf
:::

:::{prf:remark}
asdf
:::

:::{prf:example}
asdf
:::

Theorem 5.1

asdf

Lemma 5.1

asdf

Remark 5.1

asdf

Example 5.1

asdf

Contents