Theme request: Subnotebook shading

Features
#1

I read in the forum that the “structural” CSS in Joplin is not exposed, so I don’t believe I can do this in external CSS.

One thing that would be very nice would be to have the option for each child notebook tab to have a background color that is, say, 10% lighter than its parent.

That would make the data structure much more visible than just indentation, which is useful when you’re trying to “scan down” into categories.

#2

Do you have examples of how this is done in other apps?

#3

I’m not sure that it is done in other apps. Here is a mockup of what I’m thinking about, if that would help.

Hopefully you can see what I mean-- as I scan down the list, my brain isn’t simultaneously trying figure out which mental bucket to put what I’m looking at into-- it’s “this color is cities” or “this color is states”.

This example is pretty straightforward, but in my use case the hierarchy is more like stakeholders -> computing platforms used -> processes owned -> process detail -> process history, as well as a couple of bins completely outside the hierarchy for office procedures, local system maintenance, etc.

The level shading should also be something that a user can turn on or off in the config, so it won’t impact people who like the interface just as it is.

#4

I found an example of this online at readthedocs. Here is a screenshot from the godot engine. But it seems all documentation hosted on read the docs has this feature.

image
image.png305×644 21.7 KB

Notes hierarchy?
#5

That's a little more dramatic than what I'm envisioning-- still attractive, but the current interface is nice and clean (read: not distracting) and I think that's a positive.

I created another mockup to show another level and now think that even this is too dramatic a color shift (but I'm too busy to redo it). :slight_smile: The background becomes too light after just a couple of children.

Maybe the implementation is just a percentage in the config, e.g. each child background is x% lighter than the parent (and of course if set to default of 0 then the interface remains just as it is.) People can then tweak to what works for them.

joplinDemo2

#6

I like the idea, but I found the first mockup nicer.

However, there is one point to consider: If you decrease/increase the background color by x%, the background will be white after 100/x levels. What then?
It’s rather unlikely that someone has 10 or 20 levels, but it is still an edge case. How would you solve this? Or don’t we care that at one point there’s no difference between levels anymore?

#7

I think that's a moot point. By then, your biggest problem will be the notebooks will be indented too far right, and you won't be able to keep all the levels in your head anyway.
(At that point, maybe you should've used a mind map or something, instead of joplin. :smiley: )

#8

I like the idea of a cutoff level, and it probably should be pretty small so you don’t have to worry about when to change the font color from white to dark.

I also agree with zblesk-- if someone had that many sublevels they’d have to be doing all their navigation by searching terms or tags anyway, so colors wouldn’t be useful there and they would likely just turn the coloring feature off.

I like the first mockup better too. Let me make one more, sampling those exact colors (as I noted I think I made the second one too dramatic in the color shift).

joplinDemo3
joplinDemo3.gif301×509 12.8 KB

1 Like
Notes hierarchy?
#9

I noticed just now that 1.1.4 is missing this feature (because suddenly I couldn't see any hierarchy in the sea of almost-black)

I did see the github note that said it was removed due to community feedback, but I'm not sure why it wasn't just made to be a toggle-able feature. To me, with many notes in a comparatively flat structure, that visual hierarchy was critical to being able to use the application.

If anyone has and is willing to share the CSS to restore the menu to what it looked like in the pre-1.1.4 versions I would greatly appreciate it.

#10

This is a start, based on the mockup I made. Not sure off the top of my head how to expand the colors to the full menu width, but I'm sure I can figure it out. Add this to your userchrome.css in the JoplinProfile folder:

.list-item-depth-1 .list-item {
    background-color: #213952 ;
}
.list-item-depth-2 .list-item {
    background-color: #214A6B;
}
.list-item-depth-3 .list-item {
	display:table-cell;
    background-color: #315A84;
}
.list-item-depth-4 .list-item {
    background-color: #356EA3;
}
#11

@wikispish You don't actually need the .list-item class added onto the end, the purpose of adding it was to only select the text part.

You should find that the below css is enough.

.list-item-depth-1 {
    background-color: ...;
}
#12

Thank you so much! That works perfectly.

I may darken the last color and add some more, but this is working for now:

.list-item-depth-1  {
    background-color: #213952 ;
}
.list-item-depth-2  {
    background-color: #214A6B;
}
.list-item-depth-3  {
	display:table-cell;
    background-color: #315A84;
}
.list-item-depth-4  {
    background-color: #356EA3;
}
Ability to set different colors for notebooks
#13

Hi

That looks interesting but I am not sure what to do with it! When I add it to userstyle.css and restart Joplin there is no obvious change to the colour scheme or layout of my notebook list. What am I missing?

Thanks

#14

We're using Joplin Portable and this CSS is in userchrome.css

#15

Thanks. I just figured that out (i.e. I put it in the wrong CSS file but (i) I am also using @marcteys new theme that sets many values for list-item so (ii) I added your useful CSS to the end of his theme file and included !important on each line . Seems to work fine now - except for the colours which I will now fiddle with ... :slight_smile:

#16

PS by the way, I can't see myself needing more than two levels ...