Plural option aliases for obsidian callouts

It would be helpful to allow plural language to be used in obsidian callouts and still keep the icon of the original. For example, allow [!tip] and [!tips] and keep the same flame icon. Right now, attempting the plural callout type reverts the symbol to the default pencil. This isn’t relevant for all of the callout types and aliases, but there are a good number where plural options would make sense (e.g., notes, hints, warnings, bugs…).

Currently, it seems necessary to use a custom title that repeats the callout type as so:

> [!tip] Tips
> 1. Lorem ipsum
> 2. Dolor sit amet
1 Like

There is a workaround that works as you expect it to (hopefully until it gets implemented):

  1. create a Tip callout and inspect its CSS code (CTRL+SHIFT+I), you should find something like this in the CSS code inspector:
.callout[data-callout="tip"], .callout[data-callout="hint"] {
    --callout-color: var(--callout-tip);
    --callout-icon: lucide-flame;
}
  1. create a custom CSS snippet for your own callouts (and make sure to enable that snippet in the appearance settings), then duplicate that code you found but with the plural forms instead:
.callout[data-callout="tips"], .callout[data-callout="hints"] {
    --callout-color: var(--callout-tip);
    --callout-icon: lucide-flame;
}

Now it works no matter if you use singular or plural :slight_smile:

The downside of this approach: you have to this for every callout type you want to use until you populate the custom CSS snippet with the plurals of each callout type (and there are quite a lot of callout types) - but if you only use a few of them, it’ll be worth your time :wink:

Ideally would be to have a native UI feature for creating/editing/deleting callouts, just like the Callouts Manager tries to achieve…

1 Like

[UPDATE: actually I’ve gone ahead and did that for you, so below is the custom CSS snippet code that introduces the plural version for all the available callout types]

.callout[data-callout="tips"], .callout[data-callout="hints"] {
    --callout-color: var(--callout-tip);
    --callout-icon: lucide-flame;
}
.callout[data-callout="quotes"], .callout[data-callout="cites"] {
    --callout-color: var(--callout-quote);
    --callout-icon: quote-glyph;
}
.callout[data-callout="warnings"], .callout[data-callout="cautions"], .callout[data-callout="attentions"] {
    --callout-color: var(--callout-warning);
    --callout-icon: lucide-alert-triangle;
}
.callout[data-callout="questions"], .callout[data-callout="help"], .callout[data-callout="faqs"] {
    --callout-color: var(--callout-question);
    --callout-icon: help-circle;
}
.callout[data-callout="successes"], .callout[data-callout="checks"], .callout[data-callout="done"] {
    --callout-color: var(--callout-success);
    --callout-icon: lucide-check;
}
.callout[data-callout="abstracts"], .callout[data-callout="summaries"], .callout[data-callout="tldrs"] {
    --callout-color: var(--callout-summary);
    --callout-icon: lucide-clipboard-list;
}
.callout[data-callout="infos"] {
    --callout-color: var(--callout-info);
    --callout-icon: lucide-info;
}
.callout[data-callout="todos"] {
    --callout-color: var(--callout-todo);
    --callout-icon: lucide-check-circle-2;
}
.callout[data-callout="failures"], .callout[data-callout="fails"], .callout[data-callout="misses"] {
    --callout-color: var(--callout-fail);
    --callout-icon: lucide-x;
}
.callout[data-callout="dangers"], .callout[data-callout="errors"] {
    --callout-color: var(--callout-error);
    --callout-icon: lucide-zap;
}
.callout[data-callout="bugs"] {
    --callout-color: var(--callout-bug);
    --callout-icon: lucide-bug;
}

Hope this helps!

used @woofy31 's code. it’s great! though, everything except the icons aren’t showing. i get the default pencil icon.

Update: Nvm. I think it took Obsidian some time to parse everything. I just had to wait/restart.

1 Like