Removing whitespace at paragraph breaks

Adding or removing whitespace in markdown doesn't affect the rendered text. The problems are

  1. No gap between the two lists
  2. There is a gap between the list titles and the list items

I believe the second problem is because the list title and list items are separated by a paragraph break, so Joplin adds extra space. I there a way to to remove the extra space?

OS: Windows 11
Joplin Version: 2.6.10

Edit: spelling

2 Likes

Welcome to the forum!

Do you know about modifying the css in the userstyles.css file?

Also under Help>Toggle Development Tools is a way to see what's going on under the hood.

I was able to fix number 2 by making the list title a h6 and then removing the lower margin of that and also removing the top margin of the list element.

I guess number 1 would be fixed by adding either a top margin to h6 or bottom margin to the list.

But there are many people far more knowledgeable in Joplin CSS than me. You may want to search the CSS threads and post to one of them.

I am new to markdown so I barely know how to edit a text file :stuck_out_tongue:

I went to the folder where I installed Joplin and searched for the .css extension but did not find anything. When I toggle development tools I see an .html file under the Elements tab. Is this the .css file?

I searched ctrl-f for "list title" and found the following snippet of code but am not sure what to edit.

Ah, start by checking out this post:

If you have questions after that, feel free to ask.

1 Like

Thank you! The userstyle.css file is accessed using
Tools > Options > Appearance > Show Advanced Settings > Custom stylesheet for rendered Markdown

I added the following code to the userstyle.css file to fix problem 2:

p.maps-to-line {
    margin: 0px 0px 3px
    }
p {
    margin: 0px 0px 3px
   }

This changes the margin space from 20.25px to a more reasonable 3 px. The first change is for markdown view and the second change is for rich text view.

Regarding problem 1, there does not appear to be a way to add empty paragraph breaks between lines. The issue has been raised before but never received a response.

Therefore, I did what @whitewall suggested and added space to the end of every list.

ul {
    margin: 9px 0px 26px 25.5px
}

ul.joplin-checklist {
    margin: 9px 0px 26px 25.5px
}

This increases the margin space at the bottom of every list from 9.75px to 26px. The first change is for markdown view and the second change is for rich text view. This fixes both checkboxes and bullets.

Edit 1: Added fix for problem 2 in rich text view.
Edit 2: Added fix for problem 1.

2 Likes

Wow, you went from "barely know how to edit a text file" to making customizations really quick! Great work and again welcome to the community.

Thanks! The tutorial you linked explained everything very clearly. I find being able to read and use the internet is the key to learning almost any other skill. :grinning:

2 Likes

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