Difficulty customizing userChrome.css items for settings page and notes list

Support
1

Operating system

Windows

Joplin version

2.13.13

Desktop version info

Joplin 2.13.13 (prod, win32)

Client ID: aed0e7bb27974a1a928714f1d929cfcf
Sync Version: 3
Profile Version: 44
Keychain Supported: Yes

Revision: c3cdeeb

Automatic Backlinks to note: 3.0.3
Copy Code Blocks: 1.1.0
Note Statistics: 1.0.4
Quick Move: 1.1.0
Remove Images: 0.0.2
Simple Backup: 1.3.6
Tag Links: 0.1.0
Templates: 2.4.0

What issue do you have?

I'm having a hard time reading the text on two particular places of Joplin: the settings page and the notes list.

Despite me being a passionate and seasoned Firefox user who is familiar with userChrome.css, I'm still struggling to find the specific elements responsible for those font sizes in the inspector. Of course I read the article on customization.

In the set page, my difficulty lies particularly in the keyboard shortcuts section. The right-side is too small, as seen in screenshot 1:

screenshot 1
screenshot 1900×417 54.2 KB

As for the notes list, which is even more important, the difference from the notebooks list is deafening (screenshot 2).

screenshot 2
screenshot 2729×406 41.4 KB

My current userChrome.css file is this, after drawing a few pieces of CSS from posts around here. The commented sections are failed attempts.

/*.note-list,*/
.item-list,
.list-item,
.list-item-container,
.side-bar,
div[toggleblock="1"], /* Notebooks and Tags headers */
.side-bar div div, /* synchronization message */
.synchronize-button {
    font-family: "SF Pro Display", sans-serif, !important;
    font-size: 1.2em !important;
    font-weight: 500 !important;
}

::-webkit-scrollbar {
    width: 12px;
}


/*  NOTE LIST 

.note-list > div,
.note-list > div > a 
{
    font-family: "SF Pro Display", sans-serif, !important;
    background-color: white !important;
    color: black !important;
    font-size: 1.2em !important;
}

.note-list > div:hover,
.note-list a.list-item:hover
 {
   background-color: #ccc !important;
   color: black !important;
}

.note-list > div > a:focus,
.note-list a.list-item:focus
 {
   background-color: black !important;
   color: white !important;
}

*/

Any help? :slight_smile:

1 Like
2

One note and a question:

  • there is quite a few post here on the forum which provide examples of CSS files, they may be helpful
    ? since I can read your screenshots fine, is it an accessibility issue you are reporting (like screensize, eye-sight, or related) ?
3

Ah yes, the screenshot is more readable, but the actual interface is not as good as. I'm advancing in age, and many times I use Joplin on my second, older, dimmed monitor. Also, the 2nd shot above is resized, making it readable here in the forum.

And, I completely understand there have been posts on the matter here already, and this is precisely the point: I took that CSS from someone else, who I can't recall anymore, and was able to change the look of some aspects of the UI, but not those two. For the notes list in particular, I tried changing the...

font-size: 1.1em !important;

...under the

.note-list > div,
.note-list > div > a

...part, either with or without the element containing the > a part, and nothing. :frowning_face:

4

Instead of using CSS would it be easier to use CTRL+ (or View > Zoom in) a couple of times to enlarge the entire interface text size? Joplin appears to apply it everywhere (including settings) and remembers the scaling between uses.

no_zoom
no_zoom1533×960 285 KB

No Zoom

5xzoom
5xzoom1533×960 222 KB

Same window with 5 x Zoom

5

This post might be related:

1 Like
6

That's it! I added the CSS you provided on that topic and tweaked a bit:

div.note-list-item > .content > .title > span {
    font-size: 14px;
    font-family: "Roboto", "Helvetica Neue", sans-serif;
    font-weight: 400;
    font-size: 1.3em !important;
    color: black;
}
7

I forgot to mention that only the notes list CSS has been sorted out. What about the settings page? I'll be happy to mark as solution again :smile:

8

Did you try "zooming" the entire interface like suggested above?

9

Yes sir. It allowed me to read, as expected, but I'm afraid that's not the solution: having to zoom everything will make my other section even larger. I appreciate the tip and I acknowledge it is a workaround, but it still doesn't get to the core of it.

Plus, I'm still unable to find the CSS element to the settings page :cry:

10

I did actually say to use zoom instead of css not in addition to css (or at least the font size aspect).

There does not appear to be many classes to use for the config pages but a method of modifying the font size for all of the pages in one hit could be to use:

div.config-screen * {
    font-size: 24px !important;
}

I have only briefly looked at the result of using this so it may require some extra checking.

1 Like
11

I second this suggestion. Remove or comment out all existing CSS. Ensure the zoom level is set where most if not all sections have legible, desired font sizes. Then, apply CSS to sections that still need different font sizes.

If multiple zoom levels work, I'd say pick whichever has the best options pages. Applying CSS to other parts of the application should be more efficient (more classes and IDs) and static (less unique section layouts).

1 Like
12

Now we have it! Dpoulton, you did it. And now I'll try applying zoom first, as per @muzak 's suggestion. Now everything is more readable! I'll try to apply the CSS only after I decide the specific region needing enhancing. :smiley:

13

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