Admonition plugin

Plugins ideas
76

Try adding a new line between the list and the ID line.

It looks like this one my phone, for reference:

image
image2107×682 123 KB

77

Yes but the problem is anki plugin remove the blank line everytime I sync…

78

Ok I achieve to do what I want :slight_smile:

image
image794×320 10.1 KB

Sync with anki works fine and I can even use image :smiley:

79

Is it possible to customize the built in admonition types? I don’t use ‘bug’ or ‘warning’ or ‘danger’ -
should I just ignore these or to keep things cleaner is it possible to change the name and icon?

I would also like to change the icon of some of those I would use, such as ‘note’ and ‘abstract’. Doable?

80

Yep, you can override the defaults by creating them as custom types in settings.

1 Like
81

Well, that’s simple. :slight_smile: Thanks, Jeremy! ( @valentine.195 )

The last question - is it possible to give the admonitions a unique font style if I’ve added one to my theme’s CSS?
It would be nice to make them stand out a bit from the rest of the text of the page.

82

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";
}
2 Likes
83

@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;
}
84

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.

85

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

image
image1214×196 30.1 KB

versus the current tall ones:

image
image1199×293 30.4 KB

5 Likes
86

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

87

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

88

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.?

89

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-
2 Likes
90

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:


1 Like
91

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.

image

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

92

This works for me:

.callout-content {
    background: #ffffff;
}
1 Like
93

Thank you! works like a charm!

94

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.

95

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?