Can't figure out how to overwrite default callouts with custom versions

[Bnu92]

I have Callout Manager installed and have tried doing this with the plugin both enabled and disabled. Disabling the plugin seems to break this entirely and reverts all callouts to their default state.

I created a CSS sheet that contains a list of custom callouts that follow this syntax:

.callout[data-callout=“Name”] {
–callout-color: 00, 00, 000;
–callout-icon: lucide-x;
}

.callout[data-callout=“Name”] {
–callout-color: 00, 00, 000;
–callout-icon: lucide-x;
}

.callout[data-callout=“Name”] {
–callout-color: 00, 00, 000;
–callout-icon: lucide-x;
}

The catch is that some of these custom callouts have the same name as default callouts in Obsidian (save for the fact that my versions - in addition to having different colors and icons - are capitalized). In Callout Manager these custom callouts are recognized, but seem to overwrite the default callouts arbitrarily. Some callouts seem to use my custom version, and others seem to use the default version. This isn’t an issue for truly unique callouts that have a unique name.

Is there a way to delete/hide/disable the default built-in callouts, so Obsidian only recognizes the custom ones in my CSS sheet?

[ariehen]

I haven’t used Callout Manager and don’t know how it works, but in a quick test my custom callouts using note and success (both Obsidian defaults) are working. i.e. they are taking precedence over Obsidian’s defaults.

.callout[data-callout="note"] {
    --callout-color: 255, 255, 0;
    --callout-icon: lucide-lightbulb;
}

.callout[data-callout="success"] {
    --callout-color: 255, 150, 50;
    --callout-icon: lucide-chrome;
}

---

Also, for next time, when sharing code in the forum, it’s best to mark it as code (with single backticks) or put it in a code block so the forum doesn’t mess with it.

[Bnu92]

Also, for next time, when sharing code in the forum, it’s best to mark it as code (with single backticks) or put it in a code block so the forum doesn’t mess with it.

Noted

It seems like the issue was capitalizing the names of callouts: once I switched them to lowercase, they started working. Thank you for helping me narrow down what the issue was Do you know if it’s possible to use custom display text for callouts by default, without needing to type in an alternative title next to the callout? As an example, I have a callout that’s an acronym, and it would be nice to have all letters in the acronym capitalized (not just the first one)

[ariehen]

Yeah, the code is probably fine in your code editor, but in the above "Note" becomes “Note” (fancy quotes) and --callout-color becomes –callout-color (en dash?). Those definitely won’t work and the issue comes up occasionally.

---

As for the callouts: the default app.css, all the themes, and other snippets don’t use caps (that I’ve come across). If you do want to use capitalization for whatever reason, adding a i in there will let you, but the callout in the note can be written with caps or not. e.g.

.callout[data-callout="Success" i] {
    --callout-color: 255, 150, 50;
    --callout-icon: lucide-chrome;
}

---

@Bnu92

Do you know if it’s possible to use custom display text for callouts by default, without needing to type in an alternative title next to the callout?

Something like this maybe?

.callout[data-callout="acronym"] {
    --callout-color: 153, 189, 36;
    --callout-icon: lucide-bird;

    & > .callout-title {
        text-transform: uppercase;
    }
}

You could also use attribute text to apply the title caps to any callout. Written in the callout as ( |caps] ). e.g.

> [!note|caps] This is a note callout
> !note

> [!bug|caps] 
> Contents

The CSS:

.callout[data-callout-metadata~=caps] {

    & > .callout-title {
        text-transform: uppercase;
    }
}

[Bnu92]

This worked like a charm - thank you!