Share your CSS

Now I am at home on my Linux PC. There it is indeed working.
On my Windows PC at work not. Same settings... Don't know why.

I prefer to have the complete note like one page and not splitted into 2-3 columns.
What settings should I adjust in the userstyle.css to achieve that?

Thank you very much in advance!

On my side, I got it working on 2 different windows 10 and 11 with no issues.
And just for extra information, on windows to actually see your changes, you have to completely close Joplin and open it again. That means that you also have to close it from the taskbar as the program is still running in the background if you just do the normal ALT + F4. For the columns part, just comment or remove the userstyle.css -> line 86: "column-width: 30rem;" and that should work for you.

PROBLEM: Using a DARK theme but want a PAPER WHITE theme (a light theme) for the rendered view?
SOLUTION: Choose a dark theme, but then invert the colors for everything in the rendered-view stylesheet! Quick-and-dirty, but works. See below.

 * Invert everything. (But then revert images back.)                         *
 * Note: for whatever reason, you have to set background-color in the <html> *
 *       element and then invert everything in the <body> element.           *

html { background-color: black; }
body { filter: invert(100%); }
img { filter: invert(100%); }

. . . Save this to userstyle.css. Or via the desktop application and Tools > Options > Appearance > [Show advanced settings] > [Custom stylesheet for rendered markdown])

The alternative is to build your own complete CSS stylesheet just for the renderer. That's probably ideal, but this inversion technique is probably "good enough" for 99% of what you need to do and it is easy.

Can "Editor font family" files only be fonts installed on the computer?
-- from portable joplin

In case anyone uses mermaid in the richtext editor and doesn't want the large white space at the right:


.mermaid {
    width: 100%;




1 Like