Homepage    |    GitHub    |    API    |    FAQ

Cleaner design of the sidebar?

Thanks for looking into this issue @memophen. Perhaps we could have a non-binding vote to decide what to do about the sidebar design? One vote to decide “background colour vs no background colour”, and another vote to decide what expand/collapse symbol should be used.

Although for this maybe we could just pick from your survey of existing symbols (looks like arrow pointing right, and arrow pointing down should be the way to go).

I would like to suggest a third alternative: make backgroundcolor/nobackgroundcolor a user setting in the Options > Appearance page.

Plus: another other vote concerning the placement, left or right?


With background colour on the left

I would prefer not to add an option for this as it can already be customised by usercss if needed, but instead try to find what’s the best default.

Unfortunately the css modification for the notebook background has a drawback. If you change the background via css, the selected notebook does not have a blue background color, thus you don’t see in which notebook you are in. Otherwise I’d agree 100%.

When I look at other apps that have a hierarchy of folders (just checked Firefox, Chrome, Thunderbird and Sublime), I don’t see that any of them has the kind of colouring that we have. Personally I find it a bit distracting and I’m not convinced it helps navigating the tree of notebooks, so I’m in favour of removing this and go back to plain colours.

To improve the distinction between notebooks and sub-notebooks, I think we can increase the left margin increment (the app I’ve checked have more space, which makes it clearer), and use a right arrow/down arrow for collapsed/expanded state, which will be more discreet than the current +/- but still clear enough.


We could probably have a compromise, we could add css classes based on depth and one for the selected notebook. This gives even more power to the user CSS, the only drawback is that we would need some extra code.

1 Like

+1 for option M

1 Like

+1 for I option, as this option is more user friendly and user will not get confuse which notebook he is in
and I think it will much better if you make the lines more light

For people to recreate the existing look with userstyle.css we will need both a .selected class and a .notebook-level-[x] class added. Right now you cannot tell what level a notebook is with CSS only since it is only being applied visually with inline styles.

Regardless, I vote no background, except for a selected state, with > v symbols on the left. (aka option M + a selected state). With this option, I think it will also look better to move the symbols for “tags” and “notebooks” the left as well.

Here’s a quick mockup:

1 Like

I would prefer the icons of “Notebooks” and “Tags” in @uxamanda’s design to have the same brightness as the text (#5F5F5F), for two reasons:

  • To visually unindent them
  • These icons are not controls (in fact, the entire line is currently a control, but that could be changed)

And wouldn’t it be more logical to indent “All notes” including its icon and to make that icon brighter as well, so that it aligns “Notebooks” and “Tags” and their icons?

That all makes sense to me. Sadly I mocked it up by editing in the dev tools so it is hard to recreate and show with your fixes, but I agree with all of your edits.

Yes that would be a good compromise, and not too hard to implement.

1 Like

I get the feeling that option M is the best. Should we go with this one?


Yep, I like M, but it’s not much different to the current design. It’s basically just removing the background color and replacing the icons.

Ok, version M has been implemented in this commit: https://github.com/laurent22/joplin/commit/f51873d87705d9305c6e93f8248dc12a45f9814c

For those who still want the colour gradient, there’s a class list-item-depth-$DEPTH on each sidebar item, which can be used to style the item depending on the depth.


Thanks @memophen for researching the issue!

I enjoy the new layout via @uxamanda 's user stylesheets, thanks for bringing this up, I actually thought it would be in your category !Onvindbaar but glad we found it.


Been enjoying this update, thank you. I really wish there was a class to target the selected Notebook. It’s one of the only colors I have in my theme, so it would be great if it was targetable.

Ideally something as simple as a selected or active:

class="list-item-container selected"

We could reuse the same class in both the notebook and notes lists since it’s easy to distinguish between those in CSS.

Maybe you could add that to