Admonition plugin

[valentine.195]

Yep, Admonitions are fully customizable/targetable using CSS snippets. For example, if you created a “note” admonition ad-note, the parent element will receive the .admonition-parent.admonition-note-parent CSS classes and the Admonition itself will receive the .admonition.admonition-note CSS classes.

So, if you wanted to globally set the font for all admonition types, you could do:

.admonition {
    font-family: "Roboto";
}

or, just note Admonitions:

.admonition-note {
    font-family: "Roboto";
}

[Vincentv]

@valentine.195 I am probably doing something wrong, but can’t figure it for my life…
Essentially trying to tweak the look of .admonition. I’m using the below classes in a snippet but changes are not shown in Obsidian. It is very weird because when I play with the styling in the Inspector it works as expected. Any ideas?

Example: With the below changing the values for the font weight or the margins does not have any effect.

.admonition {
   margin-top: var(--admonition-margin-top);
   margin-bottom: var(--admonition-margin-bottom);
   margin-left: 20;
   margin-right: 20;
   padding: 0;
   overflow: hidden;
   color: var(--text-normal);
   page-break-inside: avoid;
   background-color: green;
   border-left: 5rem solid rgb(var(--admonition-color));
   border-radius: 0.1rem;
   box-shadow: 0 0.2rem 0.5rem var(--background-modifier-box-shadow);
}
.admonition-title {
   position: static;
   padding: 0rem 0em;
   font-weight: 200;
   background-color: rgba(var(--admonition-color), 0.1);
}
.admonition-title-content {
   display: flex;
   justify-content: flex-start;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
}
.admonition-title-icon {
   color: rgb(var(--admonition-color));
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 0.5em 0 0.25em;
   min-width: 1em;
   width: min-content;
}

[valentine.195]

It is likely that you have some styling being applied that is more specific than what you’re trying to do. Applying styles directly to the element in its style attribute (or in the element.style region of the inspector, which is the same thing) will override almost all other styles because it is the most specific CSS you can apply.

I would recommend going to the Computed tab in the inspector and finding the property you’re trying to control - if you hover over it, a small grey arrow will appear that will take you to the CSS definition that is providing the style, and you can see where it is coming from. You’ll likely need to at least match that CSS’s specificity to get what you want.

[xl0]

Hi. Would it be possible to add an option for short admonitions, like:

versus the current tall ones:

[valentine.195]

Someone asked me this on GitHub and I made some CSS that worked. Try some of the CSS here.

[xl0]

Thank you! Would love to see it as an option, but css definitely works for me!

[FrumpyMonk]

Is anyone using a UUID with admonitions as part of a research-related workflow? If yes, how are you leveraging the advantage of a unique identifier or ID connected to each admonition? Are there some ways to think about cross-referencing / linking admonitions through the ID, dataview lists, etc.?

[udracing]

dataview currently can’t be used to search admonitions but it should become available in version 0.5, see

with a regular search query block you can find all admonitions:

```query
`ad- 

[Nils.Srvd]

I have developed a quite interesting implementation to apply CSS over Admonition blocks. Allows you to use them to place images next to text, or to create up to 3 columns of text on the same note! Perhaps you will find it useful:

Collapsible inline notes and sidenotes

I have markedly improved this implementation. I no longer use the standard ‘Notice blocks’, which were extremely limited. I have done a CSS targeting on blocks created with the Admonition plugin to position them in the margins, and it looks like this: [Nils' SB Targeting Admonition CSS snippet 1111] The CSS is: /* ------------------------------------------------------------------------ */ /* Targeting Admonition blockquotes snippet */ /* ------------…

[babakfifoo]

I wanted to know whther it is possible to change ht ebackground of the content in admonition call-outs?
For instance the grey background is dark, and I want to change it to something lighter.

I tried using some CSS examples but none of the worked.

[tomhaley]

This works for me:

.callout-content {
    background: #ffffff;
}

[babakfifoo]

Thank you! works like a charm!

[ynck]

I’ve added this feature request already to the admonition github repo ([FeatureRequest] Convert text with Header in Admonition block · Issue #264 · valentine195/obsidian-admonition · GitHub):

I would like to quick convert a text with a header into an admonition block. Where header is the title and the text would be the body of the admonition block. This would make my work much easier instead of building up the admonition and declare title and admonition layout I could just mark the text and press a shortcut and voila the admonition block is build.

[tonymynd]

Hi Vincent, did you find the solution? I’ve seen Eleanor Konik’s vault, and her blocks have a border or edge that looks so elegant, how to do that?

[mtdickens]

In fact, now you can do the opposite thing: converting Obsidian-style admonition to MkDocs-style one IN COMPILE TIME (i.e. it won’t make any change to your original .md file, but rather change all ``` to !!! when compiling markdown to html).

Here’s the MkDocs plugin: Github