Callout columns

Feature requests
1

Callouts are great. They provide visual guidance in many text scenarios and allow to fold away info for reading it later or only when the need to go in depth is there.

Use case or problem

What they cannot do: Present arguments against each other. What do I mean by that? Pro and Contra would be one scenario. But there are many areas where synthesizing ideas from more than one train of thought is needed. Basically, this is very often the case where creativity is employed to seek out new approaches.

Yes, callouts can be colored differently and presented after each other. But that is not the same as seeing something next to each other: argument and alternative, side by side, with a lot of different corresponding aspect underneath in 2, 3 or more colums

Proposed solution

How cool would it be to have callouts where users could choose the number of colums and colors that are bein used?

I imagine this as a sort of table / callout hybrid where we could add new callout sections by adding the pipe symbol.

Current workaround (optional)

None that I am aware of

3 Likes
2

Actually, one of the scenarios this could be VERY HANDY in is collaboration …

3

Hi @zettelstraum,

This may not be quite what you’re looking for, but I use a sidebar format that moves callouts to the right of the page alongside the main text.

image
image733Ă—892 80 KB

The source looks like this:

> [!sidebar] This is a sidebar.
> This summarizes or supplements the main text.

This is main content of the paragraph and contains the primary text...

The CSS looks like this:

.callout {
    border-radius: 10px;
    border-width: 2px;
}

.callout-title {
    border-radius: 10px 10px 0px 0px;
}

.callout p {
    margin-block-start: 0em;
    margin-block-end: 0.5em;
}

.callout[data-callout="sidebar"] {
    /* TODO: I'd like the callout color to 
     * match the vault's accent color.  
     * But I don't know how to convert 
     * var(--color-accent) to r, g, b. 
     * For now we'll use a sort of 
     * yellow sticky-note color. */
    --callout-color: 189, 142, 55;
    --callout-icon: lucide-info;
    max-width: 40%;
    float: right;
    margin: 12px;
}

You might be able to build on this to build a more dialogue-like layout, perhaps with a [!pro] on one side of the page, and a [!con] on the other?

Hope this is helpful.

12 Likes
4

Wow, this is very interesting!

THANK YOU for sharing, @Craig. I will definitely use this.

I fear, however, that my mind is not suited to creating things like CSS. It quickly fogs over when I try things working along the lines of programming. I tried many times …

Do you think there is any way to put two or more of these side by side?

1 Like
5

Actually, two side by side is already ossible by putting a normal callout into the text.

What is not possible in this fashion: orderly table-like structures with equal lengths that allow for controlled side-by-side presentation of arguments.

The only way I can think of that would allow this is a table-like structure…

6

i just wanna share on current workaround that’s possible for you (to add on top of Craig’s . there’s a few sort of ready way for you to do so.

2 Likes
7

This is also very cool, THANK YOU, @efemkay.

I will check and see what of these solutions works best for me.

MEanwhile, I stumbled across this here:
Eisenhower Matrix · Braweria/Spectrum Wiki (github.com)

It is an interesting solution that works very much along the lines I suggested.

Mental note to self: It is not obviously the conceptual side and understanding I struggle with when it comes to things like CSS but the actual code…
:roll_eyes:

Still: Wouldn’t it be cool to have something like “Callouts 2.0” built into Obsidian directly?
:smile:

9

@Craig this is exactly what I was looking for. I can’t seem to get the sidebar alongside the main text like you show in your screenshot; it creates an empty block. I’m sure it’s something simple but can you point me in the right direction please?

10

Sure. Could you post a short example of your source text, your CSS, and a picture of what’s going wrong?

11

Sure!
The CSS was what you provided in November.
Here’s the source code:

[!sidebar] The assistant.
It doesn’t matter what his name is.

You didn’t know much about the man who hired you, and nothing about his impossibly skinny
assistant. Ortho had at least sufficient money and connections to procure a small treasure and a

And here’s what it looks like:

image
image729Ă—161 4.57 KB

12

At first look, I guess it might be interfering with your theme. Could you try switching to the default theme and see if that changes anything?

13

Nah, it’s on the default theme, just dark mode. Light mode does the same thing. I also disabled all the non-core plugins and reloaded - same result.

14

You’re in Live Preview. @Craig’s snippet works for Reading View.

2 Likes
15

For easier use of something like @Craig’s snippet, that does a specific thing that you would like to apply to any of your styled callouts, you should use something like this:

.callout:is([data-callout-metadata^="sidebar"]) {
    max-width: 40%;
    float: right;
    margin: 12px;
}

This way you can just add |sidebar behind any of your callouts and you will get the sidebar look.
Example:

> [!note|sidebar]
> This is a callout to the side
> with multiple lines of
> text
6 Likes
16

You were right! Reading view changed the layout. I’m still only 2 days into this thing, so thanks!

17

@Craig @Olondre

Thanks for the nifty snippet and metadata tip! I’m using the Minimal theme and get this, which… I kinda like? :rofl: Going to try using it as a pseudo Cornell Notes cue/note setup.

1
1973Ă—583 46.1 KB

2 Likes
18

This is awesome! I didn’t know you could do that. Thanks for the tip!

1 Like
19

Right? This just makes it so much easier to use callouts in multiple ways. The CSS is not mine, I first saw this on another forum post by @Fuyuu. All credit goes to him/her!
Here it is:

1 Like
20

This is all wonderful stuff. Thanks to @Craig, @Olondre and @Fuyuu for their smarts and generosity. Have set up a left and right sidebar option that works a treat with all
standard callouts in Minimal – very sweet. Last wish: If only this worked in LivePreview.

1 Like
21

Just found another little query: how can I combine the metadata instructions “| sidebar” with “| noicon”? I’d really love both: a sidebar callout without an icon that seems unecessary in the sidebar but combining them seems to cancel the second instruction out.
Thanks