Callouts not displayed as seen in the help document

I just discovered the callouts in the Obsidian help and really love how they look for my project. But I can’t reproduce the design.
On the help website they have a different background color for the header and the text area below and a nice bar on the left. In Obsidian itself they just use 1 color and no bar or similar.
Is there a special theme that can be used to archive the same look? I’m not sure if it’s possible as I tried the CSS example on the help page for my own callout and noticed there is just one callout-color so is it possible to have a different background for the header and area below?
Would love to have these boxes in the same design as they are displayed on the help page.

If you copy and paste-and-match-style the following into an Obsidian note, what colours do you see?

> [!NOTE] Note  
> Here's a callout block.

> [!abstract] Abstract  
> Here's a callout block.

> [!INFO] Info  
> Here's a callout block.

> [!TIP] Tip  
> Here's a callout block.

> [!SUCCESS] Success  
> Here's a callout block.

> [!question] Question  
> Here's a callout block.

> [!WARNING] Warning  
> Here's a callout block.

> [!FAILURE] Failure  
> Here's a callout block.

> [!DANGER] Danger  
> Here's a callout block.

> [!BUG] Bug  
> Here's a callout block.

> [!EXAMPLE] Example  
> Here's a callout block.

> [!QUOTE] Quote  
> Here's a callout block.

The help document is still showing the old style of Callouts before v1.0.0.
You can get that back with a CSS snippet:

1 Like

Thanks a lot, that was exactly what I was looking for. Now I love my Obsidian document even more :grinning:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.