Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

colorful tree #3892

Closed
LordSouza opened this issue Apr 30, 2023 · 11 comments
Closed

colorful tree #3892

LordSouza opened this issue Apr 30, 2023 · 11 comments

Comments

@LordSouza
Copy link

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
image
i want something like vscode that shows a little line or different color
image

Additional Information

No response

@Nriver
Copy link
Contributor

Nriver commented May 1, 2023

Try add tag #color=red to your note

@meichthys
Copy link
Collaborator

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

@LordSouza
Copy link
Author

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

@meichthys
Copy link
Collaborator

meichthys commented May 1, 2023

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
Copy link
Contributor

Nriver commented May 2, 2023

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

@grosserfrank
Copy link

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

where can I enter this code?

@meichthys
Copy link
Collaborator

meichthys commented Jan 8, 2024

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.
image

@grosserfrank
Copy link

Oh thanks

@banjuer
Copy link

banjuer commented Apr 2, 2024

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
Copy link
Author

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
Copy link

connectluole commented Oct 23, 2024

image

/*----- 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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants