Admonition formatting

[chipbrock]

I want to change the text formatting for standard Sphinx (actually in JupyterBooks) admonitions. I find that I can change the title format (in a private css file that's passed). But the body formatting in the text is inherited from <p> it seems so if my body is san serif, like the standard layout, the body of all admonitions is likewise sans serif.

I'd like to have it stand out more from the text and so I'd like to change it to serif font formatting, but I cannot figure out what needs to be changed in order to do that.

Is this a good place to ask this question? I'm here because I stumbled on a now closed Issue that was very close to this question in spirit.

thanks

[drammock]

the basic structure of, e.g., a warning seems to be

<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>admonition content here.</p>
</div>

If you're content to have your formatting apply to both the title and the content, you can define a CSS rule like

div.admonition > p {
    font-family: serif;
}

(the > indicates direct child node, so only a p right below a div with class admonition will get that rule applied).

If you don't want the title to be affected, write the above rule and then a second rule that changes the title back to sans-serif (it will override the first by virtue of being a more specific selector):

div.admonition > p.admonition-title {
    font-family: sans-serif;
}

[drammock]

that said, it might not be a bad idea to add a class to the admonition content paragraphs, to make them easier to target 🤷🏻

[chipbrock]

Thanks. That worked. It’s a level deeper than my css learned-on-the-street knowledge covered. I appreciate it.

Would this then create a new admonition?

<div class="admonition NEW">
<p class="admonition-title”>NEW</p>
<p>admonition content here.</p>
</div>

Somewhere the color for the band of NEW would have to be defined.

This all has the potential to make my book look a lot less boring.

thanks

On Jul 13, 2021, at 2:46 PM, Daniel McCloy @.**@.>> wrote:

the basic structure of, e.g., a warning seems to be

Warning

admonition content here.

If you're content to have your formatting apply to both the title and the content, you can define a CSS rule like

div.admonition > p { font-family: serif; }

(the > indicates direct child node, so only a p right below a div with class admonition will get that rule applied).

If you don't want the title to be affected, write the above rule and then a second rule that changes the title back to sans-serif (it will override the first by virtue of being a more specific selector):

div.admonition > p.admonition-title { font-family: sans-serif; }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://urldefense.com/v3/__https://github.com/pydata/pydata-sphinx-theme/issues/431*issuecomment-879317670__;Iw!!HXCxUKc!mGUl81k7v4iGo7DOyvQTmATCOv2WiSjdpXM56jK-w3fP7b_sF44nOVbiOEH5Iyc$, or unsubscribehttps://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABCOLTNTYVBVPBJZ54P42O3TXSCZDANCNFSM5AJTA5LA__;!!HXCxUKc!mGUl81k7v4iGo7DOyvQTmATCOv2WiSjdpXM56jK-w3fP7b_sF44nOVbiIWp_l_s$.

---

Raymond Brock * University Distinguished Professor Department of Physics and Astronomy, Michigan State University Adjunct Professor of Physics Department of Physics, Arizona State University

MSU address: 3210 BPS Building Michigan State University * East Lansing, MI 48824 sent from: @.**@.>

MSU office: (517)353-1693/884-5579 open fax: (517)355-6661 secure fax: (517)351-0688 Vidyo personal room: http://goo.gl/AgiDJ4 CERN Office: 32 2-B03 * 76-71756

[drammock]

Would this then create a new admonition?

<div class="admonition NEW">
<p class="admonition-title”>NEW</p>
<p>admonition content here.</p>
</div>

Yes, that is what the HTML would look like for a custom admonition called NEW. And yes, as you say, you would need to define (in your custom CSS) a class NEW that defines the properties you want it to have (like the color). You can look at the properties defined for warning to get inspiration:

https://github.com/pydata/pydata-sphinx-theme/blob/e5b9765d383ce6217d443053906a979b1da1f301/src/scss/_admonitions.scss#L79-L89

I think you can create it without actually having to define a new sphinx directive, maybe like this?

.. rst-class:: admon_new
.. admonition:: NEW!
    Guess what's new?  This thing.

(above I've changed the class name to admon_new just to distinguish it more clearly from the title)

[jorisvandenbossche]

that said, it might not be a bad idea to add a class to the admonition content paragraphs, to make them easier to target 🤷🏻

That might be something to bring up with upstream sphinx.

@chipbrock I think your original question is resolved, so this issue can be closed?

[chipbrock]

hi Yes. thanks. I did manage to fix it with the help provided.

On Aug 9, 2021, at 7:08 AM, Joris Van den Bossche @.**@.>> wrote:

that said, it might not be a bad idea to add a class to the admonition content paragraphs, to make them easier to target 🤷🏻

That might be something to bring up with upstream sphinx.

@chipbrockhttps://urldefense.com/v3/__https://github.com/chipbrock__;!!HXCxUKc!nKB8AlCXoIrgnbrSAYEwzEQo8gyFHkeYir2ZVrvB7YRM1UNt_FM9LX0GPLf37Y0$ I think your original question is resolved, so this issue can be closed?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://urldefense.com/v3/__https://github.com/pydata/pydata-sphinx-theme/issues/431*issuecomment-895136102__;Iw!!HXCxUKc!nKB8AlCXoIrgnbrSAYEwzEQo8gyFHkeYir2ZVrvB7YRM1UNt_FM9LX0Gck1aM8A$, or unsubscribehttps://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABCOLTKULW7SX4GYVNOUELLT36ZKHANCNFSM5AJTA5LA__;!!HXCxUKc!nKB8AlCXoIrgnbrSAYEwzEQo8gyFHkeYir2ZVrvB7YRM1UNt_FM9LX0GTyBE6y0$.

[choldgraf]

closing this issue since I think it's addressed, feel free to re-open if there's something else to discuss! 🎉