Where to find userstyle.css to change line-height

Support
1

Operating system

Linux

Joplin version

2.14.20

Sync target

Dropbox

What issue do you have?

Hi, I have just installed AppImage in Linux Mint and the Android app on my phone. I would like to reduce the line-height, but where do I find the userstyle.css file?
And does it need to be changed separately in AppImage as well as in the Android app?

2

@lambjop welcome to the forum.

userstyle.css does not exist until it is created by you, either using the Joplin Desktop app or manually creating one in the Joplin profile / data folder. Here is some more info including file locations.

At this time only the desktop apps (Win / Linux / Mac) can use userstyle.css and userchcome.css files.

1 Like
3

Thank you for your help dpoulton. That explained why the file was nowhere to be found.

body {
line-height: 1.5em !important;
}

or

p {
line-height: 1.5em !important;
}

seem to have the same effect with the userstyle.css file, and using the two of them together also gives the same result.

But I realised that the line-height of the text was not actually the problem. The issue was the line hight of the paragraph (when I used the Return key). Since I am not writing articles or fiction, but notes and lists, those high paragraph brakes are just a waste of space in my case.

So it seems that the Shift + Enter key are the only effective way to avoid those paragraph spaces.

4

Or use the Markdown editor which does not add the blank line. To get a blank line between paragraphs in the Markdown editor you have to hit the enter key twice.

image
image899×612 119 KB

5

I started using Joplin when it only had a Markdown editor. I therefore never saw the need to use the Rich Text Editor (RTE) when it was introduced. As such I have never paid much attention to it but it looks like you can control this double spacing by adding the below to userstyle.css.

#tinymce p {
    margin-block-start: 0em;
    margin-block-end: 0em;
}

image

I have tried to constrain this change to just tinymce (the RTE) as without that it also has an impact on Markdown notes shown in the Markdown editor render pane. If you switch from a RTE note to the same note in the Markdown editor there appears to be double spacing issues with the Markdown editor viewer.

At this time the css is probably of use if you only use the RTE. It very likely could be improved (a lot!).

I have done little to no testing of this so I do not know if there are any adverse impacts elsewhere.

1 Like
6

Good man. You made my day.

Your code snippet didn't work for me, although I can see from your image that it did for you.

Nevertheless, it was your comment about the Markdown editor that made me look further into it. So between the two editors, I got the result I wanted, and that is good enough for me.

Thanks again!

7

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