Visual indication to the various level of the notes of the Sidebar

[sebastienPoussard]

Dear Dev Team,
As discuss in several Forum thread such as this one, It would be a nice feature to have a way to quickly visually identify the level of the different notes in the sidebar.
Could be with color or icon such as in Cherry :

or maybe with lines :

Best regards.

[CalebJohn]

Hi @sebastienPoussard Different notebook levels have an associated list-item-depth class attached which will allow a user to customize the lines in any way that's possible with css in userchrome.css.

An example using background colour is below

.list-item-depth-1 {
    background-color: white;
}
list-item-depth-2 {
    background-color: red;
}
list-item-depth-3 {
    background-color: green;
}

[Athalef]

Hi CalebJohn. Thanks for the info but that's not what Sebastien requested.
The request is to be able to see the notes themselves in the sidebar with all the rest of the notbooks (without seperating them to the notes bar).
If that's something that can be done by editing userchrome.css file in the profile folder - I'd love to know how to.

[sebastienPoussard]

Hi @CalebJohn ,

Thank you for your help !
I Did modified the file and get some result, I want to modify the CSS and get a more beautiful result.
Can you tell me where I can find the list of CSS element I can modify?
example : I want to select only the text part of element list-item-depth-1

[CalebJohn]

@sebastienPoussard

Take a look at this forum comment it will introduce you to discovering elements in Joplin that can be styled.

In your case you just need to add a .list-item flag
for example

.list-item-depth-1 .list-item {
    color: white;
}
list-item-depth-2 .list-item {
    color: red;
}
list-item-depth-3 .list-item {
    color: green;
}

This will style just the text color of those lines.

[sebastienPoussard]

@CalebJohn Awesome ! Thanks for the help
I've come with a solution that is enough for me, for future readers :

.list-item-depth-1 .list-item {
    border-radius: 10%;
    margin-right: 20%;
    background-color: #0a1546c5 ;
}
.list-item-depth-2 .list-item {
    border-radius: 10%;
    margin-right: 20%;
    background-color: #484d06be;
}
.list-item-depth-3 .liste-item {
    border-radius: 10%;
    margin-right: 20%;
    background-color: #570a0acb;
}