Odd request for help for custom admonitions

[thesamim]

There are probably some very good reasons not to do this, but I would like to create a custom admonition that will put the admonition block next to the next div.

The use case is to provide the ability to have "callouts" that are specific to that paragraph, next to that paragraph.

What I have so far:

1. created a custom admonition called "aside".
2. turned on "use CSS Snippet for custom callouts" in Admonitions settings.
3. Adjusted the CSS in the generated custom snippet. (See below.)

.callout[data-callout="aside"] { --callout-icon: add-note-glyph; align-self: end;}.

admonition-aside-parent {position: relative; top: 200px; left: 670px; display: flex; flex-flow: row; height: 150px;}

In case it's not obvious: that works for my display only. Don't think it works on mobile at all.

Hoping to find, eventually, a way to "calc()" the next div's position to make the call out relative to the next div, as opposed to being hard coded... But this works well enough for me.

[sigrunixia]

Task Completed: Some basic documentation on styling callouts versus admonitions.

Response

For the code block version of the admonitions, it's recommended to use div html classes around the code block versus CSS instances of this.

Furthermore, .callout versus can be styled individually than .admonition. Applying div altering mechanics to the .callout style will act as it does in other callouts because the plugin duplicates the styling when it makes a callout version.

Tl;dr: Apply div altering to .callout[data-callout="admonition-name"] but not .admonition[data-callout="admonition-name"]