Home / GitHub Page

Custom stylessheets


#1

Is there a way to use custom stylesheets with Joplin, so you can pick fonts and other properties for different elements such as tables and headers?


#2

At the moment it’s not supported.


#3

Looks like you built this by now from the website notes about userstyle.css

I simply wanted to make my headings bigger, so I create a file named userstyle.css, in this location (which I was able to verify on the General Options screen of Joplin:
C:\Users\Brian.config\joplin-desktop

and these are my styles, but they aren’t working - any idea why? I closed the app from the taskbar icons area and restarted it.

My styles:

h1{
font-size:40px !important;
}
h2{
font-size:32px !important;
}
h3{
font-size:26px !important;
}


#4

Hi! Unfortunately it looks like updates to the website happen faster than updates to the application. This is a new feature which will be available on the next release! (Disclaimer: I don’t know when the next release is)


Styling html and markdown line length
#5

I am also trying to edit the desktop display with CSS because the Font Zoom doesn’t work.

I tried to increase the font size for the editor and the viewer but only the viewer respects any changes.

The viewer would ignore specific viewer element calls but it would obey the changes from “body” changes.

The editor ignores all changes even when specifically trying to adjust ace-editor, ace-content or #note-editor


#6

The userstyle.css is only applied to the viewer. Basically whatever you put into userstyle.css is added to the html code of the viewer and no where else. Unfortunately your only option to increase the zoom of the editor is the global zoom percentage. Did you try restarting Joplin after changing the value? It’s probably a bug if it doesn’t work.


#7

Unfortunately, the Global Zoom doesn’t do anything. There are a couple reports on it in the GitHub issues.

The main issue is I think the default of 12px is too small for a notes app. I think the viewer should be 16px and the editor be either 16px or at least 14px to be more comfortable for most people.

By the way, I use the AppImage in Linux (KDE Neon -> Ubuntu).


#8

I tested zoom on my computer (AppImage, Gnome - Ubuntu 18.04)

Here is a section at 200%
image

And a comparable section at 100%
image

Of course, as you can see at 200% the icons don’t fit very well (and the title doesn’t change size). But it’s definitely working. Just to confirm, you are restarting joplin after changing the zoom percentage? It must be closed and re-opened for the zoom changes to take effect.