Admonitions like Docusaurus

[TRaSH-]

I wonder if it would be possible to have admonitions that look like what Docusaurus uses. They are more clear and stand out when needed, whereas the current ones often fade away in the text.

[squidfunk]

Of course, you can adjust the CSS to your liking. In essence, it's a matter of taste. Personally, I don't like the Docusaurus admonitions, but Material for MkDocs is easily customizable with some additional CSS.

[TJohnson93]

@TRaSH- Once you create, please share the CSS with the community here :)

[TRaSH-]

I wish i would know how

[mocdaniel]

You can achieve this using additional CSS styling.

The snippet below is a first draft that could probably be improved, but renders the following:

.md-typeset .admonition {
  margin-bottom: 1em;
  padding: 15px 30px 15px 15px;
  border-radius: 8px;
  border-left: 8px solid;
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  font-size: 0.9375rem;
}

.md-typeset .admonition-title {
  background-color: transparent !important;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-typeset .admonition-title::before {
  height: 1.25em;
  width: 1.25em;
}

.md-typeset .admonition > * {
  margin: 0 0 0.5rem 0;
}

/* coloring for supported types */

.md-typeset .note {
  background-color: #EEF4FF;
}

.md-typeset .info {
  background-color: #E8F8FB;
}

.md-typeset .danger {
  background-color: #FFEAEE;
}

You need to put it in a CSS file, e.g. in docs/stylesheets/extra.css, and reference it in mkdocs.yaml like so:

extra_css:
  - stylesheets/extra.css

[TRaSH-]

Thx let me give that a try when i get home from work

[mocdaniel]

sure thing. Just make sure to add background-colors for all available admonition types, I just color-picked the backgrounds from the supported types reference for the three examples above.

Love your docs btw, just realized who you are 😉

[TRaSH-]

Thanks, glad you like them

[kamilkrzyskow]

Worth noting that if you only want the left border bezel, then a smaller CSS change should be enough according to the docs:

• https://squidfunk.github.io/mkdocs-material/reference/admonitions/#classic-admonitions

[TRaSH-]

Looking more into this


Thanks for the suggestion

[TRaSH-]

I need to do some more testing with it because it works with a light background, but if the user uses a dark background, the following happens