Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: custom admonition styling #1279

Closed
kescobo opened this issue Apr 7, 2020 · 0 comments · Fixed by #1280
Closed

Feature request: custom admonition styling #1279

kescobo opened this issue Apr 7, 2020 · 0 comments · Fixed by #1280

Comments

@kescobo
Copy link
Contributor

kescobo commented Apr 7, 2020

The problem

Prior to 0.24 (I think), it was possible to add custom admonition styling. Eg, I could make docs/assets/admonitions.css containing

.admonition.practice > .admonition-title {
 background-color: rgba(152,78,163,0.8);
}

.admonition.practice {
 background-color: rgba(152,78,163,0.3);
}

and

format=Documenter.HTML(; # ...
    assets=String["assets/admonitions.css"])

inside makedocs(), to get purple admonitions when using !!! practice. This doesn't seem to work anymore, since the admonition name doesn't seem to get passed into the html for non-defaults. Eg Example1:

!!! practice "test"
    This is a test

gets turned into

<div class="admonition"><header class="admonition-header">test</header><div class="admonition-body"><p>This is a test</p></div></div>

Whereas Example2:

!!! compat "test"
    This is a test

gets turned into

<div class="admonition is-compat"><header class="admonition-header">test</header><div class="admonition-body"><p>This is a test</p></div></div>

Proposal

Add the admonition type to the class, so that example 1 above would get turned into

<div class="admonition is-practice"><header class="admonition-header">test</header><div class="admonition-body"><p>This is a test</p></div></div>

Then, if I understand correctly, I could change my admonitions.css to

.admonition.is-practice > .admonition-header {
 background-color: rgba(152,78,163,0.8);
}

.admonition.is-practice > .admonition-body {
 background-color: rgba(152,78,163,0.3);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants