🎄 Advent Calendar: Every day a new Custom CSS Snippet

[hannesfrank]

(I know I’m a week late )

Custom CSS Advent Calendar

I’ll clean up and release a CSS Snippet each day until Christmas.
We got columns, tables, dividers and much more.

Day 26: 🎨 Link Tooltip

Link to the

Useful in the Desktop app since you don’t have the bottom left link preview.
Thanks again to Martin for extending the markup pretty quickly to make this possible.

---

I had not enough time to prepare the missing days here.

---

Day 19: 🎨 Print Helper

Link to the

Day 18: 🎨 Active Recall Learning

Link to the

Basically an extension of Hiding Clozes for Practice (Youtube)
Check the README on the Homepage for usage instructions if you get stuck.

Day 17: 🎨 Pros and Cons List

Link to the

Day 16: 🎨 Super Zen Mode

This one is not meant 100% seriously, but there are some nice methods to make the current position
in the hierarchy more prominent: https://twitter.com/CatoMinor3/status/1338072468507029509

Link to the

Day 15: 🎨 Numbered List

Not a 100% serious one, but it’s interesting what CSS can do.
Link to the

Day 14: 🎨 Bigger \LaTeX

Link to the

Day 13: 🎨 tskn's Theme

One of the best themes for RemNote, designed by tskn, coded by Eva (evathomasv/RemNoteTheme), ported from Stylus to Custom CSS to be usable in the new Desktop app. I also fixed some search box issues.
Link to the

Day 12: 🎨 Codeblock Line Numbers

Happy Hanukkah, too
Link to the

Day 11: 🎨 Blockquote

Link to the

Day 10: 🎨 Divider

Link to the

Note: This snippet has configuration options at the start (--divider-style: thinkness line-style color). Try changing it to your likeing. You can use anything from here: https://developer.mozilla.org/en-US/docs/Web/CSS/border
E.g. try this

--divider-style: 4mm ridge rgba(170, 50, 220, .6);

Day 9: 🎨 Sidebar Icons

Link to the

Day 8: 🎨 Column Layout

Link to the

Day 7: 🎨 Kanban Board

Link to the

Day 6: 🎨 Pills list

Link to the

[ognsya]

Nice!

I wish it was possible to have some tags be toggleable (allowing to disable/enable them, while still keeping them there). That would be useful when using tags for styling, such as in the kanban example.

[hannesfrank]

That can be done : Have another tag #disable styling and only style when it is not present.

But I guess you mean to change the markup directly. IDK if this is feasable with a user script or would have to be builtin.

[ognsya]

Yeah, that would work! But I was thinking a more intuitive interface (like the checkbox they have for making code blocks active/inactive)

[tzzek]

The day I’m waiting for. Thanks for all the awesome stuff you put out hannes!

[ognsya]

Colum layout is great!

Question: should/can you make it so it also works when viewing the Rem itself?
In the example below, if I click to expand “Testing columns” or “Can I nest?”, those Rems aren’t displayed in columns.
(I don’t really need this specifically… unless it’s a quick fix)

[hannesfrank]

Yes I can. Good suggestion. That’s what the data-document-tags are for [Edit: I’ll add this function probably to another, more powerful scroll for another day and keep the column layout as a lightweight style for non-document rems.]

In general it would be nice to report suggestions on the scroll homepage issue tracker (usually the library itself). I’ll add a button to remnote for that soon I think. Or else some things will vanish in the depths of this forum.

[ognsya]

I was thinking about this. It would actually be cool to have certain tags behave differently when interacted with.

Some possible types:

• Toggle: tags that when clicked cycle between two states (Active/Inactive, for example)
• Dropdown: tags that when clicked show a dropdown with options of other states to choose
• Area: tags that allow changing state by clicking on certain parts of it (ex: “” could be changed to 4stars just by clicking on the area where the 4th star is)

By “state” above I just mean another tag. Essentially these would just be a fancy way of removing a tag and adding another. (Somewhere we’d need to define which tags are related, and how)

On the other hand, maybe this is a messy way to deal with this.
Maybe it makes more sense to do this within some metadata fields for each Rem.
(If that makes sense)

[hannesfrank]

That’s some nice use cases. I don’t think this is possible with pure CSS though. We might need a plugin/user script (Javascript in general) for this.

[ognsya]

I like the divider. Thanks! Very useful.

(I guess it would be best for it to continue showing as a divider even on hover, requiring a click to edit. But that’s a minor thing…)

[hannesfrank]

I thought about that but decided it would also be useful to remove the divider tag with just one instead of two clicks. Buz maybe you remove the whole rem anyway. It’s just a minor edit. Feel free to make a Pull Request on Github

[ognsya]

@hannesfrank

make a Pull Request on Github

That sounds like sci-fi talk to me. haha

Just kidding. I know what it is.
Actually it would be cool to try to contribute at least some. Id probably learn a lot from it.
But it’s hard to find the time… (I’m barely managing to work on my knowledge base in the first place…)

[ognsya]

Is there a simple way to disable all Custom CSS?

Ideally, I’d like this to override existing enabled/disabled status of individual code blocks.

That way I can disable everything temporarily when needed, then revert back to how it was before without losing my previous selections.

[Eiko]

It would be nice if the numbered list worked with children but still very nice, thank you

[ognsya]

Trying out the numbered list. Very nice!

I changed it a bit to have it show only the number (but keep the bullet invisible on top, to allow bullet operations).

Here’s the resulting code with (minor) changes. Beware! As always with my “code”, this is probably not the best way to do this.

.tree-node-container[data-rem-container-tags~="numbered-list"]
  > .TreeNode
  > .tree-node-container {
  counter-increment: remNumber;
}

.tree-node-container[data-rem-container-tags~="numbered-list"]
  > .TreeNode
  > .tree-node-container
    > div:first-child
  .rem-bullet__container:before {
  content: counters(remNumber, ".") " ";
  position: absolute;
  right: 8px;
}

.tree-node-container[data-rem-container-tags~="numbered-list"]
.tree-node-container[data-rem-container-tags~="numbered-list"]
  > .TreeNode
  > .tree-node-container {
  counter-increment: remNumber;
}

.tree-node-container[data-rem-container-tags~="numbered-list"]
  > .TreeNode
  > .tree-node-container
    > div:first-child
 .rem-bullet {
visibility: hidden;
}

[Gianni_SoZo]

What a wonderful holiday treat.

Thank you!

[hannesfrank]

Sorry, for the delay guys. I got distracted a bit ( Smart Rem).

The calendar continues tomorrow, or the day after. One click/copy&paste install should work then since we got [Custom CSS] Toggle codeblocks in a subtree now . I have still about a dozen CSS snippets in the pipeline.

[erikhaze]

Marry Christmas to everybody!!!
Thank you Hannes for this wonderful advent calendar and for making Christmas even more cheerful to everybody!

[Flora]

What a great present! Thank you very much!
Could you please explain how to use the Column Layout? What shortcut do I need to create a new column and what shortcut to switch between them?
Tahank you!

[UMNiK]

Thus far, all snippets manipulate only the way the data is presented, not the data itself.
In that spirit, here’s an example step by step.

Then just add the tag ##columns (I’ve renamed mine to _columns so as to not confuse the search) to the rem where the table is named and here is the result

Keep in mind this interaction as well.

Basically, you can add an empty line after the name to have it preserve the columns when zooming into the title.