Help with userchrome.css

Lounge
1

How do I change stuff (fonts etc) for these two sections? What are the css names (sections? I don't know the terminology,sorry).

I tried with the picker, but it doesn't show these to have any names (or I just don't know how to use it properly).

image

1 Like
2

It's not quite as simple as settings values for the "areas" of the interface you highlighted. CSS will be used for each individual element within those areas; the fonts, the background colour, the icons, the number of notes indiicator etc.

As something to start with, below is some css for userchrome.css to enable the fonts and the icons in the sidebar and the note list to be manipulated. HOWEVER I have created these using a more current version of Joplin than you are so it may not all work on an older version. (EDIT: Just realised that you have used a screenshot from my "How-to" wiki post from a while back, not your own Joplin client :slight_smile: )

.icon-notes,
.icon-notebooks,
.icon-tags {
     /* sidebar - removes the "Notebooks", "All Notes" and "Tags" icons */
     display: none;
}
a.list-item {
    /* sidebar - changes the "All Notes" text */
    font-size: 14px;
    font-family: "Caxton Std";
    color: orange;
}
span.title,
span.tag-label {
    /*  sidebar - notebook & tag name text */
    font-size: 14px;
    font-family: "Caxton Std";
    color: white;
}
div.note-count-label {
    /*  sidebar - number of notes shown after notebook & tag name text */
    font-family: "FreeMono";
    font-weight: 900;
    color: yellow;
}
div.note-list-item a span {
     /*  note list - note title text */
     font-size: 14px;
     font-family: "Caxton Std";
     color: black;
}

Screenshot

  • I am not saying that these are the best or only elements / selectors to use but they do appear to work.
  • I am definitely not saying that the above are a good design choice!
  • I put this together quite quickly so although I haven't seen any other parts of the interface being affected by these changes, I cannot guarantee that!
1 Like