Callouts without Title

Share & showcase
1

Hi everyone, I’ve been looking for a while for ways to hide the title in some callouts, as I find them distracting and unnecessary for example for quotes.

I’ve seen this workaround which works well if you just want to hide the title occasionally, but I really wanted a solution that just renders without the title out of the box.

So I finally got this custom CSS going, which not only hides the title, but also moves the icon to the left of the content for clean callouts:

image
image857×708 43.9 KB 

.callout[data-callout="idea"] {
    --callout-color: 245, 213, 55;
    --callout-icon: lucide-lightbulb;
}

/* don't display title for idea and quote callouts */
.callout[data-callout="idea"] .callout-title-inner,
.callout[data-callout="quote"] .callout-title-inner {
    display: none;
}

/* remove top and bottom margins and add left margin for idea and quote callouts */
.callout[data-callout="idea"] .callout-content p,
.callout[data-callout="quote"] .callout-content p {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-left: .5em;
}

/* align icon and content side-by-side */
.callout[data-callout="idea"],
.callout[data-callout="quote"] {
    display: flex;
    align-items: flex-start;
}

/* v-align icon in center of first line */
.callout[data-callout="idea"] .callout-title .callout-icon,
.callout[data-callout="quote"] .callout-title .callout-icon {
    min-height: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Hope someboy finds this useful!

18 Likes
2

I love this. Thank you for sharing!

1 Like
3

+1 absolutely useful! Thank you for sharing this, gives me the control I was looking for.

4

@Texfy have you got this working in Obsidian Publish? I can see the desired callout in reading mode in the app, but for some reason it reverts to the standard (big and clunky) callouts in Publish.

Not sure how to fix this?

5

I haven’t used Obsidian Publish, so I can only speculate. Maybe the definition of the output format (in CSS or some .tex template or whatever) is independent of the CSS for the editor. Then you would need to change it there too.

6

thx! Really nice work!

7

Thanks for sharing.
I made a modified version using callout metadata for my own use.

.callout[data-callout-metadata*="badge"] {
	display: flex;
    align-items: flex-start;
	padding: 10px;
	width: fit-content;
	
	.callout-title-inner {
		display: none;
	}
	
	& > .callout-content p {
		margin-block-start: 0;
		margin-block-end: 0;
		margin-left: .5em;
	}
	
	& > .callout-title {
		min-height: 1em;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	& > .callout-icon {
		min-height: 1em;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

Use it like this

> [!note|badge]
> content

for any callout.

3 Likes