Collapsible inline notes and sidenotes

The following CSS Snippet allows you to create in-margin and in-line collapsible color notes (blocks). It is partly based on Amaroks CSS for Anki cards here, and mklepaczewski’s proposal for ‘Notice blocks’ here.

Collapsible notes can be embedded next to text, as well as below it, and are displayed when you hover over them.

The color of each block class can be customized from the same .css file (see indication there), as well as the maximum width of the blocks (also indicated in the .css). Similarly, in the .css file you can add new block classes with different color schemes and responsiveness to the mouse pointer, binding them to different instructions to call these new classes (e.g., see below the ‘note-coll-broad blocks -rainwh’).

The appearance is as follows, with an example of a note folded to the margin, the same note but expanded, a second note folded but inline, and the latter also expanded. These notes are being used here as an informative legend for images, but their use could be different. Edit mode on the right, Preview mode on the left.



When sidenotes are expanded, they can cover a portion of the text or image in the main section of the note. To achieve this, I prefer to put ‘auto’ where you set width below .app-container pre.language-note-collapsible:hover { .

Whatever the case, these are just the styles that I like and can be modified in the .css file.

It is also important to note that these blocks do not allow you to include links, labels, headings, or formatting of bold, italics, etc. They are extremely simple and rigid in this sense. They can be useful just to draw attention to certain text within them, giving a function to each of the colors used.

My CSS to be embedded in the snippets folder is as shown below:


/*  COLLAPSIBLE INLINE AND SIDENOTES  */

.app-container pre[class*="language-note-"] {
  border: 0px solid;
}

/* Make the first line of note bold */
*[class*="language-note"]::first-line {
  font-weight: bold;
}
.app-container pre[class*="language-note-"] code[class*="language-note-"] {
  color: rgba(0, 0, 0, 0.781);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0);
  background-color: transparent;
  white-space: pre-wrap;
  /* css-3 */
  font-family: var(--default-font);
  font-size: smaller;
}

/** Collapsible Sidenote Default  
----------------------------------------*/

.app-container pre.language-note-collapsible {
  border-color: #016ea6;
  background-color: #d8dfec; /* Crown Paint Mount Fuji (change color here) */

  padding-top: 0.001em;
  width: 265px;
  height: 53px;
  position: relative;
  right: 220px;
  max-width: calc(0.66 * var(--line-width));
  min-width: 3em;
  z-index: 2;
  position: relative;
  margin-left: -6em;
  margin-top: -3em;
}

.app-container pre.language-note-collapsible:hover {
  height: auto;
  width: 280px; /* Set the maximum width here, 'auto' for wide cards */
  z-index: 3;
}

/** Collapsible Inline note Default
----------------------------------------*/

.app-container pre.language-note-collapsible-in {
  border-color: #016ea6;
  background-color: #d8dfec; /* Crown Paint Mount Fuji (change color here) */
  padding-top: 0.2em;
  height: 7em;
  padding-top: 0.2em;
}

.app-container pre.language-note-collapsible-in:hover {
  height: auto;
  width: auto;
}

/** Collapsible Sidenote Broad Rainwashed  
----------------------------------------*/

.app-container pre.language-note-coll-broad-rainwh {
  border-color: #016ea6;
  background-color: #d1e0d9; /* Duron Rainwashed */

  padding-top: 0.001em;
  width: 290px;
  height: 53px;
  position: relative;
  right: 240px;
  max-width: calc(0.66 * var(--line-width));
  min-width: 3em;
  z-index: 2;
  position: relative;
  margin-left: -6em;
  margin-top: -3em;
}

.app-container pre.language-note-coll-broad-rainwh:hover {
  height: auto;
  width: auto;
  z-index: 3;
}



Collapsible sidenotes

For default collapsible sidenotes you need to use:


```note-collapsible
This will appear in bold

This will not appear in bold. This is a Default sidenote and all its color and dimension characteristics can be modified in the .css.

```

And it unfolds laterally it in the point where you place it (as in Fig. 1a and 1b)

Note that these side blocks only appear if in ‘Configuration’ > ‘Editor’ > ‘Display’ we have the ‘Readable Line Length’ option activated, which reduces the length of the text lines to the center of the note, observed as follows.



In addition to the default collapsible sidenotes that the .css comes with, you can create as many block classes as you want. For example, here create a class called ‘Broad Rainwashed’ that is cyan-green in color, and has larger fold dimensions than the first one.



The instruction I am using for it is:

```note-coll-broad-rainwh
A Broad Rainwashed Sidenote

This will not appear in bold.

This is not the Default sidenote, it's a 'Broad Rainwashed sidenote'.

All its color and dimension characteristics can be modified in the .css.

```

You can play with it since it comes with the CSS.



Collapsible in-line notes

For foldable in-line notes:

```note-collapsible-in
This will appear in bold

This will not appear in bold. This is a Default in-line note and all its color and dimension characteristics can be modified in the .css.
```

I hope you like this contribution. It works at least for the standard and Ars Magna themes. Report any bugs, and any help is welcome to improve this implementation!

Nils

4 Likes

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:


Nils' SB Targeting Admonition CSS snippet 1111


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:


Nils' SB Targeting Admonition CSS snippet 2


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:


image

.admonition content * { margin: 0; }

image

.admonition-shortcut { display: inline-flex; } .admonition content * { margin: 0; }

image

.admonition { display: flex; } .admonition .admonition-title { padding-right: 1rem; } .admonition .admonition-content-holder { width: 100%; } .admonition .admonition-content-copy { top: 0; }

image

.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

1 Like

This looks very neat!

I’m having difficulties achieving this though. Would you mind sharing what exactly needs to be done?

Hi Tim! You need to create the blocks via the Admonition plugin. You can then use the CSS I shared to impose any properties on those blocks (in the case of this thread, the side layout). Then you can use those Admonition blockquotes just like you use the others from the Admonition plugin. Also, remember that you must have ‘Readable line length’ enabled in order to achieve the three well-separated “columns” that can be seen in my screenshots.

It is highly possible that the blocks will not be arranged perfectly in each side, you will have to adjust this from the CSS file to achieve the position and width that you like the most. I hope this helps you, I’m here to help in any way possible!

Another option is that, by enabling Readable line length, the width of the main column of the text is too big and therefore the blocks cannot be arranged correctly. In that case you will need to adjust your ‘Readable line length’ with other CSS - too bad it can’t be done natively from Obsidian… :face_with_diagonal_mouth:

/* CSS para volver personalizables las características del modo Readble Line Length */
/* Required for use: Enable "Readable Line Length" */

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer, 
.markdown-source-view.is-readable-line-width .CodeMirror {
    max-width:60%;
}
1 Like

greetings @Nils.Srvd

this looks cool!

can I get some advise on how to setup this? I tried multiple times, but unable to achieve this. kindly correct me the areas, if feasible.

1. the snippet and the admonition plugin activated 
2. created a admonition block as "ad-sideblock-right" 
3. readable line length enabled 
4. disabled all plugins and css-snippets - to make sure no conflict 
5. defaulted to default theme 
6. tried modifying all the values beneath your comment on "adjust block horizontal position".

-- if this is just it, then, the block are still centred and do not move to right.  

I am a noob with css, so kindly bare with any basic questions.

  • how to achieve left side block, as the .css does not have side-block for left?
  • what is about your response about readable line length - last two comments ? should those css values defined any where - markdown-preview.view ?
  • what value should be modified for adjustment in the .css, if the block is centred ?

appreciate any help on this