0

I know how to include my own css for a jupyterbook by creating a mine.css inside of _static.

But I would like to change the formatting of some standard features of the stock jupyterbook look and feel.

In particular, I'd like to change the formatting of text inside of admonitions but without knowing the css definitions for the stock versions I can't figure out how to do that.

I feel like if I knew the standard css definitions for Jupyterbooks, I could do a lot of customization but short of that resource I have to write my own css which seems unnecessary and redundant.

Is this available and I'm just not seeing it? Thanks...apologies if this is obvious!

Added after the original post...This is in response to comments by Steve:

This is not an answer, but a comment. But I need to show some code... So breaking the rules.

I was able to change the admonition title to sans serif by including in my own override css file:

p.admonition-title {
    margin: 0px 10px 5px 0px;
    font-weight: bold;
         font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

But body text is still problematic. It appears in the rendered html to be just whatever

is defined as. The body does not have its own css definition. For example

div.body p.centered {
    text-align: center;
    margin-top: 25px;
         font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

does not change anything,

The code inspection is

<p> == $0
stuff
</p>

So I'm not sure how to affect the font styling of the body of a stock admonition.

Raymond Brock
  • 41
  • 4
  • Use your web browser's developer tools. Usually you can right/ctrl-click on an element, select Inspect, and it will show all the applied styles for that element. – Steve Piercy Jun 28 '21 at 06:19
  • thanks. right, but I need to know where the style sheets are and that's what I can't figure out. I've found some that include some admonitions definitions, but not specifically text formatting. Is this published anywhere? – Raymond Brock Jun 29 '21 at 19:09
  • Developer tools shows where the CSS files are located after build. For source, they are included with the theme, and can be overridden with custom styles. There are lots of SO posts on ["custom css" for Sphinx](https://stackoverflow.com/search?q=%5Bpython-sphinx%5D+custom+css). – Steve Piercy Jun 30 '21 at 05:29
  • Thanks. Added a comment to my comment in order to show some code. – Raymond Brock Jun 30 '21 at 14:36
  • Now I have edited the original question since my hand was slapped for trying to add information based on your helpful comments. So please read the original a second time for updates. thanks... – Raymond Brock Jun 30 '21 at 21:31
  • The selector for the body tag `` is simply `body { stuff }`. You are trying to apply a style to a `div` whose class is `body` and whose children `p` have a class of `centered`, i.e., `

    `.

     – Steve Piercy Jul 01 '21 at 05:17
  • Thanks. Can you help me to redefine the style so they it’s not reliant on body? That would open up a lot of possibilities for me. Identical formatting makes the admonitions blend into the page in a long form document. I’d like them to stand out more. – Raymond Brock Jul 01 '21 at 12:47
  • I don't know how you want to style a given element, and I do not have your HTML to determine the selector of the element. Even if I wanted to help, I cannot. – Steve Piercy Jul 02 '21 at 05:54

0 Answers0