colorful tree

[LordSouza]

Describe feature

is it possible to make a colorful tree? because the tree becames really hard to see when i work with a project that has a lot of folders open

i want something like vscode that shows a little line or different color

Additional Information

No response

[Nriver]

Try add tag #color=red to your note

[meichthys]

Interesting, I wonder if we could/should update the tree context menu to include a simple color picker. Something like this:

[LordSouza]

I found a way with CSS

/* this is to make symmetrical */
.ui-fancytree > li > ul{
    padding-left: 20px;
}
ul.fancytree-container li{
    box-shadow: inset 3px 0 0px 0 #00ADB5
}

will look like this:

[meichthys]

Neat. Thanks for reporting back 👍

Here's my more subtle copy of yours. It removes the leftmost line and makes the vertical bars very subtle (on dark mode at least).

/* this is to make symmetrical */
.ui-fancytree > li > ul{
    padding-left: 20px;
}
.fancytree-lastsib li{
    box-shadow: inset 1px 0 0px 0px #333333
}

[Nriver]

Ah, you want the vertical lines. Then you must try this theme https://github.com/SiriusXT/trilium-theme-blue

[grosserfrank]

I found a way with CSS

/* this is to make symmetrical */
.ui-fancytree > li > ul{
    padding-left: 20px;
}
ul.fancytree-container li{
    box-shadow: inset 3px 0 0px 0 #00ADB5
}

will look like this:

where can I enter this code?

[meichthys]

Make a note (name it anything you want) and change the note type to CSS then paste in the code.
Then in the note Attributes, add the #appCss label. The label doesn't need to be inheritable.

[grosserfrank]

Oh thanks

[banjuer]

Neat. Thanks for reporting back 👍

Here's my more subtle copy of yours. It removes the leftmost line and makes the vertical bars very subtle (on dark mode at least).

/* this is to make symmetrical */
.ui-fancytree > li > ul{
    padding-left: 20px;
}
.fancytree-lastsib li{
    box-shadow: inset 1px 0 0px 0px #333333
}

can we make different color between dark and white theme?

[LordSouza]

Neat. Thanks for reporting back 👍
Here's my more subtle copy of yours. It removes the leftmost line and makes the vertical bars very subtle (on dark mode at least).

/* this is to make symmetrical */
.ui-fancytree > li > ul{
    padding-left: 20px;
}
.fancytree-lastsib li{
    box-shadow: inset 1px 0 0px 0px #333333
}

can we make different color between dark and white theme?

probably, but you gonna need to know the css class names to reference there and create some condition here's a link how, but idk if that's gonna work, and make one for each, I didn't dive too deep in this, so I can't help you with it.

[connectluole]

/*----- make the lef pane tree has one vertical line */
.ui-fancytree > li > ul{
    padding-left: 20px;
}
.fancytree-lastsib li {
    border-left: 1px solid #cccccc;
    border-radius: 5px 0 0 5px;
}