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