I have markedly improved this implementation. I no longer use the standard ‘Notice blocks’, which were extremely limited. I have done a CSS targeting on blocks created with the Admonition plugin to position them in the margins, and it looks like this:
The CSS is:
/* ------------------------------------------------------------------------ */
/* Targeting Admonition blockquotes snippet */
/* -------------------------------------------------------------------------- */
/* You can target specific types of Admonition blockquotes with CSS */
/* The only thing you need to use is the '.admonition-<type>' class */
/* for example, '.admonition-note' will target the 'ad-note' admonition type */
/* This will not require a `cssclass` to be set but work for all notes. */
/* -------------------------------------------------------------------------- */
/* 2022, 03-01 Nils Srvd */
/* ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* "Sideblock" (i.e., 'ad-sideblock') */
/* ------------------------------------------------------------------------- */
.admonition-sideblock {
font-family: var(--font-stack-ui) !important;
font-size: var(--font-size-secondary) !important;
line-height: 1.35em;
font-style: normal;
text-align: justify;
padding-top: 0.001em;
width: calc(50% - 0.5 * var(--line-width) - 3em);
height: 53px;
position: absolute;
left: 60px; /* Adjust block's horizontal position */
max-width: calc(0.66 * var(--line-width));
min-width: 3em;
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
text-indent: 0 !important;
margin-left: -6em;
margin-top: -3em;
}
.admonition-sideblock {
height: auto;
width: 500px; /* Adjust block's width */
z-index: 3;
}
/* -------------------------------------------------------------------------- */
/* "Sideblock right" (i.e., 'ad-sideblock-right') */
/* ------------------------------------------------------------------------- */
.admonition-sideblock-right {
font-family: var(--font-stack-ui) !important;
font-size: var(--font-size-secondary) !important;
line-height: 1.35em;
font-style: normal;
text-align: justify;
padding-top: 0.001em;
width: calc(50% - 0.5 * var(--line-width) - 3em);
height: 53px;
position: absolute;
right: 60px; /* Adjust block's horizontal position */
max-width: calc(0.66 * var(--line-width));
min-width: 3em;
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
text-indent: 0 !important;
margin-left: -6em;
margin-top: -3em;
}
.admonition-sideblock-right {
height: auto;
width: 500px; /* Adjust block's width */
z-index: 3;
}
Now we can add links, images, text formatting, even websites via iframe inside our margin blocks. It works beautifully and perfectly when we have ‘Readable line length’ enabled in the Obsidian settings. Lateral blocks’ position can be set from the css file. If you are not in ‘fullscreen’ mode, it will look a bit worse, but it’s still functional:
This same CSS can be used to apply many other different features to Admonition blocks, and not just repositioning in the margin. For example, here you can see how to get this:
.admonition content * { margin: 0; }
.admonition-shortcut { display: inline-flex; } .admonition content * { margin: 0; }
.admonition { display: flex; } .admonition .admonition-title { padding-right: 1rem; } .admonition .admonition-content-holder { width: 100%; } .admonition .admonition-content-copy { top: 0; }
.admonition { display: inline-flex; } .admonition .admonition-title-content { height: 100%; width: 100%; } .admonition .admonition-title .admonition-title-markdown { display: none; } .admonition .admonition-content * { margin: 0; }
I share this for anyone who is interested and finds it useful. I hope you enjoy it! Any improvements to this code is welcome, I’m just a newbie in CSS.
PD. Sorry for the poor quality of the GIFs, Obsidian forum does not allow uploading files larger than 4mb