🎄 Advent Calendar: Every day a new Custom CSS Snippet

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

1 Like

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)

1 Like

Yes I can. Good suggestion. That’s what the data-document-tags are for :slight_smile: [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.

1 Like

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: “:star::star::star::star::star:” 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)

2 Likes

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.

2 Likes

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…)

1 Like

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 :stuck_out_tongue:

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…)

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.


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

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;
}
3 Likes

What a wonderful holiday treat. :partying_face:

Thank you!

2 Likes

Sorry, for the delay guys. I got distracted a bit (:gear: 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 :heart:. I have still about a dozen CSS snippets in the pipeline.

3 Likes

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

1 Like

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!

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.

Did you have a look at the Readme on the Homepage? You can open it either through the link in the Custom CSS block or on the Scroll page.

If it is still unclear we should improve the explanation.

It’s quite easy just remove all the hover parts from the code so you have this as your code instead

:root {
    --divider-style: 1px solid black;
}

[data-rem-tags~="divider"]:not(:focus-within) {
    color: transparent;
    position: relative;
}

[data-rem-tags~="divider"]:not(:focus-within)
    .rem-bullet__container {
    display: none;
}

[data-rem-tags~="divider"]:not(:focus-within)
    .hierarchy-editor__tag-bar {
    display: none;
}

[data-rem-tags~="divider"]:not(:focus-within):before {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    top: 50%;
    border-bottom: var(--divider-style, 1px solid black);
}
2 Likes

Hi everyone,
I installed the CSS-Block, but it doesn’t work.
I tagged the rem in the hierarchy (highest level), but all childs have the same color despite being active in a specific child rem.

oh sorry, my post is reffering to the super zen mode