Is tree line-spacing adjustable via CSS or other method?

[tsc-pygy]

I really like Trilium Notes! Is it possible to reduce the line-spacing in the tree? My apologies if I've missed any previous answers on this subject. I did search ALL Issues and found only answers about line-spacing in the BODIES of NOTES. I was also unable to find anything obvioius in the sample theme.

Thank you!

[abitofevrything]

It would be possible with a custom CSS theme. I cannot make you one as I am on mobile but if you want to have a go the relevant classes are prefixed with fancytree-. Off the top of my head, you'd want to limit the height of fancytree-node.span to some number you decide.

[tsc-pygy]

Thank-you for your swift reply. Would it be possible for you send me the default Dark theme CSS text? The only changes I want to make are the line-spacing in the tree and the color of the note pane. Unfortunately I'm not very experienced with CSS and I was unable to get the results I wanted by altering a copy of the Steel Blue theme or building a new theme from scratch.

Thanks!

[abitofevrything]

See the file src/public/stylesheets/theme-dark.css for the current dark theme CSS.

Also, I think you should target span.fancytree-node and not fancytree-node.span as I said previously. My mistake.

[Lightirius]

I am using this css in custom theme (everything else is copied from theme-dark.css with some other minor adjustments):

body .fancytree-node {
    height: 30px;
    padding: 2px;
}

It looks like this:

You may also need to change the icon path to absolute in:

body .global-menu-button {
    background-image: url(/images/icon-grey.png);
}

[adamcodemaker]

yep I really like new UI but I also agree that there is too much space in the tree. I am using calendar a lot and I have many day and month notes. It takes a lot of space and I have to do a lot of scrolling. Maybe it might be worth considering reducing the spacing by default?

[akhiljalagam]

A simple approach to fix line spaces and fancy tree height by using extension

1. install custom css extention -> https://chrome.google.com/webstore/detail/custom-css-by-denis/cemphncflepgmgfhcdegkbkekifodacd/related
2. add the following content and adjust the css.

   p {
   line-height: 15px;  
   }
   br {
   display:none;
   }
   body .fancytree-node {
   display: flex;
   align-items: center;
   height: 25px;
   padding: 2px;
   border: 1px solid transparent;
   border-radius: 5px;
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   }

[abitofevrything]

Trillium supports custom themes anyways, theres no need to install an external extension.