Callout columns

Feature requests
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

22

If you change the ^ in both callouts to a *, using both sidebar and noicon will work. :tada:

.callout:is([data-callout-metadata*="sidebar"]) { }

.callout:is([data-callout-metadata*="noicon"]) .callout-icon { }

> [!info|sidebar noicon] Title 
> Contents
1 Like
23

Perfect. This works beautifully. :smiley: Thanks!