Need CSS advice

ajay · 2023-09-14T19:15:29.451Z

To anyone who knows CSS better than I do (meaning almost anyone ...)
I have been using below userchrome.css file for a long time, it simply did exactly what I wanted it to do.
When I updated to the latest production V a few days ago, my notes list turned into a list with huge line spacing and a much too small font. I suppose some entry is missing, which didn't matter before and all of a sudden does.
Could anyone tell me what went wrong and how to fix it ?

div.list-item-container {
height: 22px !important;
}

div.list-item-container > a {
font-size: 14px !important;
}

div.todo-list-item > div {
height: auto !important;
}

div.sidebar {
background-color: #4b043d !important;
}

dpoulton · 2023-09-15T15:18:44.843Z

ajay:

my notes list turned into a list with huge line spacing and a much too small font.

v.2.13.1 has a release note saying, "Improved: Refactor note list in preparation for plugin support" and so it appears that the css element/classes have changed.

To narrow the note list items and change the font you need to add something like:

div.note-list-item {
    height: 22px !important;
}
div.title > span {
    font-size: 14px;
}

I say "something like" because I have only given it a quick test

ajay · 2023-09-15T16:16:38.378Z

Super, trouper .... very nice and friendly.
Thanks a lot dpoulton, you saved my long Joplin filled nights

ajay · 2023-09-18T06:59:57.039Z

Is there any chance you could add the lines which allow me to change the color of text in the sidebar from (default) white to black ?

dpoulton · 2023-09-18T09:28:51.740Z

I have found ways for changing most of the text and icons in the sidebar but the sync message text and the box around the sync button have beaten me...

ajay · 2023-09-19T06:05:31.084Z

And ...
could you share these "ways" ?

dpoulton · 2023-09-19T09:35:15.527Z

This changes specific bits, one at a time. I divided it into three sections.

"Fixed" items such as titles and icons
"User" items such as the names of the actual notebooks and tags
The note count text

This does not cover the syncing text and the sync button itself.

It avoids "generated" classes that may change between builds.

The comments list what is changed in the order they appear in the css.

div.sidebar i.icon-notebooks,
div.sidebar div div button span.fa-plus,
div.sidebar i.icon-notes,
div.sidebar i.icon-tags,
div.sidebar div div span,
div.folders div div span {
    /* sidebar - notebooks icon, notebooks plus sign, "All Notes" icon, tags icon, "NOTEBOOKS" and "TAGS" titles */
    color: black;
}
div.sidebar a.list-item,
div.sidebar span.title,
div.sidebar span.tag-label {
    /* sidebar - "All Notes" text, notebook & tag names text */
    color: black;
}
div.sidebar div.note-count-label {
    /*  sidebar - number of notes shown after notebook & tag name text */
    color: black;
}

The below alternative uses a rather brutal "I don't care what it is, turn it black" approach.

This does not cover the sync button border.

div.sidebar * {
    color: black !important;
}

Hopefully these have been created so they affect the sidebar only and not other parts of Joplin.

There must be better ways to do this so I would invite anyone who knows how, to chip in...

dpoulton · 2023-09-19T10:18:31.893Z

Damn!

It was only after I posted the above that I realised that the "brutal" approach could cover everything.

div.sidebar * {
    color: black !important;
    border-color: black;
}

I've not tested this much so it is possible that in some circumstances the "brutal" approach may have some unplanned side-effects.

I used orange text applied to Joplin using the light theme to create this and it looked like:

EDIT:

🡇 Bad idea! - Read the next post! 🡇

tomasz86 · 2023-09-19T15:01:07.690Z

dpoulton:

It was only after I posted the above that I realised that the "brutal" approach could cover everything.
div.sidebar * {
    color: black !important;
    border-color: black;
}
I've not tested this much so it is possible that in some circumstances the "brutal" approach may have some unplanned side-effects.

Just a side note, but this is very, very bad in terms of performance. CSS reads from right to left, so the engine needs to literally go through all elements in the HTML while also checking whether one of their parents is div.sidebar.

This doesn't matter that much when the code is short and simple, however the HTML of Joplin is far from that, so I would be cautious .

dpoulton · 2023-09-19T15:19:09.881Z

@tomasz86

Thanks for the excellent advice. I must be honest and say that I did not even consider what the engine would have to do when introducing a *. I was just determined to do anything to get the colour to change!!

dpoulton · 2023-09-19T16:21:06.698Z

There must be an easier way than this but the below seems to change everything to black. I have also included the background colour setting and a method of changing the colour of the selected notebook/tag.

This is my last post for this "challenge". For any other questions about this the answer is no!

div.sidebar {
    /* sidebar - background colour */
    background-color: cornsilk;
}
div.sidebar div.selected {
    /* sidebar - background colour of the selected notebook or tag */
    background-color: darkseagreen;
}
div.sidebar i.icon-notebooks,
div.sidebar div div button span.fa-plus,
div.sidebar i.icon-notes,
div.sidebar i.icon-tags,
div.sidebar div div span,
div.folders div div span {
    /* sidebar - notebooks icon, notebooks plus sign, "All Notes" icon, tags icon, "NOTEBOOKS" and "TAGS" titles */
    color: black;
}
div.sidebar a.list-item,
div.sidebar span.title,
div.sidebar span.tag-label {
    /* sidebar - "All Notes" text, notebook & tag names text */
    color: black;
}
div.sidebar div.note-count-label {
    /*  sidebar - number of notes shown after notebook & tag name text */
    color: black;
}
div.sidebar div div,
div.sidebar div button,
div.sidebar div button span {
    /* sidebar - sync info text, sync button, sync button icon and text*/
    color: black !important;
    border-color: black !important;
}

Example:

ajay · 2023-09-20T06:22:06.805Z

tomasz86:

Just a side note, but this is very, very bad in terms of performance. CSS reads from right to left, so the engine needs to literally go through all elements in the HTML while also checking whether one of their parents is div.sidebar.

This doesn't matter that much when the code is short and simple, however the HTML of Joplin is far from that, so I would be cautious

And would you, @tomasz86, know a better way of doing it ?

semyl · 2023-09-26T02:50:25.980Z

@ajay @dpoulton Not sure why you can't just get away with this for everything, if I am understanding the brief correctly:

.sidebar div, 
.sidebar span, 
.sidebar button, 
.sidebar i,
.sidebar a {
    color: black !important;
    border-color: black;
}

No need to have so much specificity.

You could take the .sidebar button separate and only apply the border-color to it if you really wanted:

.sidebar div, 
.sidebar span, 
.sidebar i,
.sidebar a {
    color: black !important;
}
.sidebar button {
    border-color: black;
}

system · 2023-10-26T02:50:44.312Z

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.