How To Fix Header Formatted Text in Callouts (via CSS)

Hello fellow wanderers!
I am on the journey to make my callouts more visually pleasing and compact…

What I’m trying to do

I’d like to achieve to create a CSS file to integrate callouts like the one in the following first example screenshot. This is based on the Prism Theme, and already to some degree customized:

I’ve been fiddling with it for quite some time with no success. And there is probably a “simple solution”. But I’m not a programmer, even if I can do a few things myself.

This is how the callouts look in my sandbox vault with Default Theme:

And this is how the callouts look in my sandbox vault with Minimal Theme:

My issues with the current theme and showing of callouts:

  • The callout box is way too big and bulky
  • Too much padding
  • Too much margins
  • Indentation Arrow uncomfortably positioned
  • Not working with any header formatting

What goals I want to achieve?

I want to create a CSS file, with which I can customize the rather bulky looking callouts of the “Minimal Theme” when I use header formatting in the callouts

  • The CSS file should ideally be able to be applied globally over the vault and not to create individual callout codes
  • The header sizes should be adjusted depending on the header formatting (#, ##, ###, etc.)
  • The indentation arrow, which makes a collapsed callout expand/close, should be positioned right-aligned
  • The icon size slightly adjusted
  • The icon position align-center to any header formatted text

Things I have done & tried

Learned how customize callouts:

Managed to:

  • adjust the size of the callout icon
  • define the icon position
  • choose special fonts

Tried:

Basic infos:

  • Sandbox vault
  • Minimal Theme installed

Thankful for any help or suggestions…!

The snippet I posted should do the trick, just change the border radius property under .callouts-outlined .callout .callout-title from border-top-left-radius: 10px; border-top-right-radius: 10px; to border-radius: 5px;

You do need the style settings plugin though to get it to work with Minimal since my CSS builds off of the ‘Outlined’ style callouts option off there.

The main thing with CSS is finding the right selectors for the elements you want to change. Here’s the Mozilla documentation on that. This post goes over the basics of using the developer console to find the right selectors.

2 Likes

The list of what you’d like to change is pretty extensive, which is fine, but I think you’ll have to continue digging and piece bits together to get exactly what you want.

Have a look at the CSS quick guide that spacewitches linked (if you haven’t yet). From the console, under Sources at the top, you can copy and paste the app.css into a code editor of your choice for easy access.

Starting at line 7581 (as of this post) is where the callouts start:

/* --- how callouts are structured --- */
.callout
├─.callout-title
│ ├─.callout-icon
│ │ └─svg
│ ├─.callout-title-inner
│ └─.callout-fold
│   └─svg
└─.callout-content

If you poke around a bit, you’ll get an idea of how they are put together.


There are also custom properties/variables in the app.css for callouts that you can adjust. I don’t think that changing these will be enough for what you’re looking to do, but you could try adjusting a few.

body {
/* Callouts */
  --callout-border-width: 0px;
  --callout-border-opacity: 0.25;
  --callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6);
  --callout-radius: var(--radius-s);
  --callout-blend-mode: var(--highlight-mix-blend-mode);
  --callout-title-color: inherit;
  --callout-title-padding: 0;
  --callout-title-size: inherit;
  --callout-content-padding: 0;
  --callout-content-background: transparent;
  --callout-bug: var(--color-red-rgb);
  --callout-default: var(--color-blue-rgb);
  --callout-error: var(--color-red-rgb);
  --callout-example: var(--color-purple-rgb);
  --callout-fail: var(--color-red-rgb);
  --callout-important: var(--color-cyan-rgb);
  --callout-info: var(--color-blue-rgb);
  --callout-question: var(--color-orange-rgb);
  --callout-success: var(--color-green-rgb);
  --callout-summary: var(--color-cyan-rgb);
  --callout-tip: var(--color-cyan-rgb);
  --callout-todo: var(--color-blue-rgb);
  --callout-warning: var(--color-orange-rgb);
  --callout-quote: 158, 158, 158;
}

Also, if you have a look at the Prism callouts, you can get an idea of how those are put together:

2 Likes

I’d also recommend looking at the Obsidian docs for CSS variables, especially for callouts: Callout - Developer Documentation. You can change the padding variable to take up less space. The headings both in and out of callouts have very large vertical margins if I remember correctly, which you’d need to reduce or remove.

1 Like