In live preview, how do I make a fandom wikia style infobox?

Help
1

I’m trying to mimic the fandom wikia style infobox, but cant seem to get it to work. So far what I’ve found only works in reading view or when it does work in live preview, it takes up the entire page rather than left, right, or center, some end up too small and some just crash the notes and I can’t open it.

I’m migrating from dokuwiki, so I’m trying to get some of the features it has over to Obsidian.

For example = Naruto Uzumaki | Narutopedia | Fandom

Must work in live preview. I do not use reading mode.

2

The only thing I can think about is to create the “template” on another page then screenshot it and render it as an image, but that means I’ll have to update the image every single time I update the infobox. Unless there is a way to render templates, like in reading mod, on a different page that is in live preview.

3

It would be helpful here if you shared what you have searched and tried so far.

The first hit on google for “obsidian infobox” is SlRvb’s ITS theme and stand-alone “Callout adjustments” snippet (they can be used in other themes).

I’d give that (and all the ITS options/snippets) a look, and see if it’s what you are going for.

5

I’ve tried that. It doesn’t work in live preview. It takes up the whole page, rather than be small and move to the side. And when I add a good amount of information, pretty standard amount, it then crashes the note and I have to forcefully delete the box.

I’ve tried the wikipedia theme, but it doesn’t look good either.

The closes I got was this = https://codepen.io/carloshenrgin/pen/xxyzavo

But it won’t move to the right and text won’t appear on the side of it. It still takes up the whole page.