Admonition plugin

[Teo_IDT]

Hello! I’m just wondering why if I add “tag” inside of admonition then the note is not searchable?

[Bricoleur]

@Teo_IDT see this entry: Admonition plugin - #63 by valentine.195

[jaffa]

Hello, After my last Admonition update, default titles started to appear even if I leave title: blank.

Also the new settings do not appear in the Settings plugin.

[valentine.195]

Thanks for letting me know - I’ll get a fix out for the title issue ASAP once I can get back on my computer.

Could you explain what you mean by settings?

[jaffa]

In your last Changelog you mention that it is now possible to default to “no title”.
Because of the code bellow, I assumed there should be a new setting for it in the Settings plugin.

        new Setting(settingDiv)
            .setName(t("No Admonition Title by Default"))
            .setDesc(
                createFragment((e) => {
                    e.createSpan({
                        text: t("The admonition will have no title unless ")
                    });
                    e.createEl("code", { text: "title" });
                    e.createSpan({ text: t(" is explicitly provided.") });
                })
            )
            .addToggle((t) => {
                t.setValue(this.noTitle).onChange((v) => (this.noTitle = v));
            });

This is the lower part of what I see:

[valentine.195]

Ah. That setting is per type - should be visible if you edit or create an admonition. There is not a global toggle.

[jaffa]

OH, OK great. I created an admonition and all is good on that front. I could see the toggle.
Many thanks,

[Hydro]

Hi

Thanks for your plugin !

Is it possible to insert an image in a non-codeblock syntax admonition ?

Thanks

[Hydro]

When I have this code :

``````ad-anki-in 
title: Quels sont les types de bornages ??
A: Il y en a deux :
- Le bornage amiable.
- Le bornage judiciaire.
ID: 1642111149731
\``````

It displays like this :

“ID: 16421111…” is on the wrong line.

Is it normal ?

Thanks for your work.

[valentine.195]

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

It looks like this one my phone, for reference:

[Hydro]

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

[Hydro]

Ok I achieve to do what I want

Sync with anki works fine and I can even use image

[TaraUnscripted]

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?

[valentine.195]

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

[TaraUnscripted]

Well, that’s simple. 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.

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