Share your CSS

Custom ordering for notebooks! Ish...

Definitely not a 10min horrible hack...(sorry if anyone has already done this, I can't find it or maybe people just have too much pride to do this).
Basically from what I understand the Notebooks in the sidebar cannot be ordered. However, that doesn't mean I can't do a horrible workaround, probably with endless caveats and limitations that I'm not even aware of.
Just prefix a letter or number on your notebook name. Sorted. The CSS then makes it invisible but normal sorting logic obvious still applies.
I only really want it for top level (or maybe second level if I can be bothered) sorting but no reason you can't go all the way down through the depths providing you don't have too many notebooks per level (0-9, a-z. Not sure where punctuation or other weird characters would fit).
Obviously this isn't going to work any wonders on mobile. Or on web clipper. And some plugin stuff will probably look weird with the extra letter thrown on the front. And probably a million other problems because all this does is make the first letter see through... If anyone can make it less hacky then have at it.

CSS on:
image

CSS off:
image

CSS on just for depth-0:
image


.list-item-depth-0 .title::first-letter{
    color: transparent !important; 
}

.list-item-depth-1 .title::first-letter{
    color: transparent !important; 
}

/* Uncomment for more depths
.list-item-depth-2 .title::first-letter{
    color: transparent !important; 
}

.list-item-depth-3 .title::first-letter{
    color: transparent !important; 
}
*/

Also works for tags:
image


.tag-label::first-letter {
    color: transparent !important;
}
7 Likes