Increase fontsize under Notebook

Support
1

How do I increase the fontsize under the list of Notebooks on the left panel of Joplin / 2.4.12 / macOS.

Thanks.

2

Add the below codes to your userchrome.css which can be found on the preference > Apperence > Show Advanced Settings > Custom stylesheet for Joplin-wide app styles


#react-root .bxcDPk {
    font-size: 13px;
}

Change the font size value to whatever you want then quit & restart Joplin. Then, you'll see it works.

1 Like
3

Thanks for the reply.

When I select "Custom stylesheet for Joplin-wide app styles", a web browser opens up, not a text editor. So far I can't figure out howto workaround this. Under "Text editor command" I specified the path to Sublime, but that doesn't resolve this.

4

I think this is about the defualt settings of what software to open a .css file on you computer, but I'm not a Mac user, so I can't tell you more details of it.

For alternative, you can directly add the Joplin folder to your text editor, then you can be easily acess to those files when open the text editor.

5

@thelight welcome to the forum.

It would seem that for your system the file type css is associated with your browser. Either associate css with your text editor using your OS system tools or open a text editor and navigate to the css file (~/.config/joplin-desktop/userchrome.css). That's linux, I assume mac is similar.

The suggested class of .bxcDPk is probably not the best to use. This looks like one that is auto-generated during the build process and so may change between versions. Try:

span.title, span.tag-label {
    font-size: 16px;
}

... to change the font size of the notebook titles and the tag titles.

Alternatively you can use View > Zoom in / out to generally increase font sizes across all of Joplin.

2 Likes
6

Thank you for the correction.

It is my first time trying this function. It's great! Joplin always surprising me when every time I've found something that I missed.

1 Like
7

This is rather useful for those with higher resolution screens who want to make the text a bit bigger without delving into css. Most importantly the zoom factor selected is remembered and so survives restarts / reboots.

2 Likes
8

Thank you, really great to fix that issue.

9

Is it possible to increase the font size of the sub-notebook text too via CSS ?

10

I just tested this one is just fine:

span.title, span.tag-label {
    font-size: 16px;
}

Or, If you are talking about the notelist it would be use the below:


.note-list-item > a > span {
    font-size:16px;
}
1 Like
12

Yes, I was referring to the notelist.

Handy tips!

1 Like
13

How do I change the colour of the notebooks ? I'm not really an expert in CSS.

I'd like black text on a white background and to change the font to something which is easier on the eye.

14

How about to use a Joplin built-in light theme? You can change it in the preference > Apperence > Theme > Light. Is that what you need?

15

I am avoiding using a theme as these don't appear to honor the userchrome.css settings, thus why I was asking how to do this directly in CSS

Many thanks

16

If things are being overwritten by the theme you can put !important to make sure it works.
e.g.

span.cm-header.cm-header-1 {
    color: #FF0000 !important;
    }
17

That makes sense, but if you want white background and black text, you better start from a built-in light theme, then, you can do less css work.

About the font, you can edit the font-family through the Appearance settings, so, you're not really need to touch the css code.

And as Daeraxa said, if you found some of your CSS has been overwritten by the theme, you can just overwrite them back. Using the !important is the most easiest way to make that success.

18

Thank you both for the reply's.

When I select the Light theme, the sidebar on the left (list of notebooks) still has a black background and white text.

The nice thing about configuring the font in the CSS is I can use this as a settings template, rather than having to manually configure each deployment of Joplin.

19

Fine, give a try.

.​codeMirrorEditor​ .​CodeMirror​ ​*​ {
    font-family: "your font name", monospace !important;
} 

.sidebar {
   background-color: white !important;
} 

span.title, span tag-label {
    color: black !important;
}
20

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