How to customize the font of the Notebook title?

(Apologies if this is the wrong place to post this question, please let me know where I could transfer it if so)

Hello, I am using Joplin 2.7.14 on macOS 11.6.4 Big Sur, and would like to learn how to customize the font of the Notebook title itself (not the body)? I've had success in personalizing the fonts used in the Markdown/Rich Text editors, thanks to the excellent tutorials found here; however, I can't seem to find one for the app itself; I've read the recommended article, "Introduction to customising Joplin (userchrome.css & userstyle.css)" but couldn't find anything about the elements outside the editors (I'm trying to link an image file to show this, but I get denied permission to do this).

Hoping for any help I could get, my sincerest thanks for any suggestions or tips. Cheers!

@Enzo welcome to the forum.

The same principle applies to the title text as other elements of the Joplin interface with one important exception!

Using the development tools picker and clicking the title field will show that the element for the title is input.title-input (item 1 in picture). However Joplin itself uses the instruction !important for this element (item 2 in the picture). This means that no subsequent css should change this setting so it is difficult to override. When looking at the details (item 3 in the picture) you can see that input.title-input follows a div. It is a quirk of css that using a more specific element than the one marked as !important can actually override it.

So putting the below in userchrome.css ...

 div input.title-input {
    /* note title text */
     color: red !important;
}

allows this...

title

I have only briefly tested this by changing the colour. What you can otherwise change may be limited by constraints of the overall layout of Joplin (I am thinking large font sizes, but I may be wrong :slight_smile: ).


EDIT: I have just typed all this and now realise that you said Notebook title not Note title. I'll leave it for posterity though and in future I will try to properly read posts before replying :flushed:


2 Likes

I don't have time to check this but try span.title for the notebook titles and span.tag-label for the tags. Both in userchrome.css

Actually... I realize now I was using the wrong term. You are correct, and you didn't type in vain—I actually meant Note :grin: forgive this noob, so ignorant of proper nomenclature. In my defense, I tried several times to upload or share a link so anybody could see what I was referring to, but I still should've checked my wording, sorry :pray:

Anyway, thanks so much for your tips, over the moon about how well it worked. Really appreciate it :+1:

I shall! Thanks a bunch, appreciate this. :vulcan_salute:

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