Align callout icons to the top-left?

[luckman212]

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:

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

[anon63144152]

Probably not what you want, but …

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

[luckman212]

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

[Olondre]

This should do it:

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

[anon63144152]

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

[Olondre]

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.

Then you can see the styles for that selector:

[anon63144152]

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.

[Olondre]

@anon63144152

I live and learn … but too darn slowly.

Don’t we all
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 Then again, it’s so much fun…

[efemkay]

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.

efemkay/obsidian-listive-theme/blob/master/theme.css#L662

[ZenMoto]

I believe this is what you want:

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

RESULT:

[luckman212]

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