Align callout icons to the top-left?

I make heavy use of callouts. Sometimes I just want to display some info that stands out a little more than simply bold/highlight, so I use a callout with a title only, example:

> [!info] Something Important!

But sometimes the text is rather long, and it displays the icon aligned vertically in the middle:

image

I was just wondering if anyone knows of a way to adjust this using CSS so the icon is positioned at the top?

Probably not what you want, but …

.callout-title {
  flex-wrap: wrap;
}

@anon63144152 Thanks, yeah I stumbled onto that too but, no that’s not what I’m trying to achieve. I guess there isn’t a way at the moment.

1 Like

This should do it:

    .callout .callout-icon {
        margin-bottom: auto;
    }
3 Likes

I spy magic. Hope that is what the OP wants.

It works if I add it as custom css. But if I open the Developer Tools and search for margin-bottom: auto; or select the callout icon to give it focus, it can’t even find that text / rule to be able to see the wizardry in action. Scratches head until :exploding_head:

You most likely selected the svg not .callout-icon. If you select the svg you can see the parent selector right above it and click on it.
1
Then you can see the styles for that selector:
image

1 Like

Thanks. I thought the selector tool picked up the whole element and loaded all the related style info in the styles pane. I can get to it following the advice given and clicking in the doctype pane indicated by the red arrow in your screenshot. I live and learn … but too darn slowly.

Thank you.

1 Like

Don’t we all :wink:
I’ve never been in contact with a developer console or css before starting to use Obsidian a few months ago. As soon as the css gets too complex I’m completely lost and I’m not sure I should invest the time to learn the intricacies, I’m already fiddling way too much with the looks of Obsidian instead of actually writing notes :laughing: Then again, it’s so much fun…

1 Like

Is this sth along the line u want? But I make align top right, as u can see.

/* Default style: "callout-style-icon-right" i.e. icon on the top right */
body:not(.callout-style-original) .callout { position: relative; }
body:not(.callout-style-original) .callout > .callout-title > .callout-icon { --icon-size: 48px; opacity: 0.3; position: absolute; top: -9px; right: -8px; }

Follow this link. Row 662-663.

1 Like

I believe this is what you want:

.callout-title { flex-direction: column; }

RESULT:

Screen Shot 2023-02-02 at 6.35.58 PM

:dove:

Thanks for all the replies! Actually, the solution by @Olondre above is exactly what I was hoping for! cheers :wine_glass:

2 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.