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.
1 Like
Yeah, that would work! But I was thinking a more intuitive interface (like the checkbox they have for making code blocks active/inactive)
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 
[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: “
” 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 
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.
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. 
Thank you!
2 Likes
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.
3 Likes
Marry Christmas to everybody!!! 
Thank you Hannes for this wonderful advent calendar and for making Christmas even more cheerful to everybody!
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