Home / GitHub Page

Testing new release with usability improvements and new Welcome notes


I’m trying the Portable version. LGTM so far. :+1:t2: All of the usability features are a blast. Thanks!

Some random thoughts: I like how Help is handled (the way it creates a new notebook and switches to it). I do have some language-related suggestions; I’ll keep those on GitHub.
I am happy about work being done regarding the note loading speed; though my big notes are so big I can’t really tell whether they’re loading faster now. :smiley:


Thank you for the new release @laurent as well as fixing the lists starting in line with normal text.

Edit: You truly outdid yourself. With the new CSS(?) I don’t even need a custom one. Overall performance is smoother.


When I press “Anwenden” there is no back-button like in the other windows.


I’m missing this Button at the top:


(Sure, I could press “Abbrechen” afterwards.)


I use the black theme. Not all exported pdf files keep the (userstyle.css) css (see examples below).

Made from this markdown code:

**Tiddlywiki (Links)**



**Release 5.1.17 vom 12.05.2018**

**Deutsch mit Dokumentation:**

**Deutsch (leer):**

**Englisch (leer):**


Nonetheless, a great stept forward - I love the shortcuts!


Can you provide the userstyle.css you used?


Yes that’s a bit confusing - I’ll rename “Cancel” to “Back” and I think that will make things clearer.


Sure. Improvement proposals are welcome. :wink:

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700&subset=latin-ext') ;
body {
font-family : 'Open Sans', sans-serif;
font-weight : 300;
font-size : 12pt;
line-height : 1.42em;
color : #EEEEEE;
background-color : #1D2024;
p a {
border-bottom : 1px solid #453886;
color : #453886;
color : #FB667A;
padding-bottom : 0.25em;
text-decoration : none;
a:hover, a href:hover {
background-image : url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position : bottom;
background-repeat : repeat-x;
background-size : 10%;
border-bottom : 0;
padding-bottom : 0.3em;
text-decoration : none;
color : #FB667A;
background-color : yellow;
kbd {
color : #1D2024;
background : #EEEEEE;
font-weight : bold;
letter-spacing : 0.1em;
padding-left : 0.5em;
padding-right : 0.5em;
blockquote q {
background : #f9f9f9;
border-left : 10px solid #ccc;
margin : 1.5em 10px;
padding : 0.5em 10px;
quotes : "??" "??";
line-height : 1em;
color : darkred;
blockquote q:before {
content : open-quote;
color : navy;
font : 1.5em/150% Georgia, serif;
blockquote q:after {
content : close-quote;
color : navy;
font : 1.5em/250% Georgia, serif;
p[lang="de-DE"] {
text-align : justify;
hyphens : auto;
background-color : red;
hr {
width : 98%;
height : 1px;
margin : 12px auto;
background : black;
border : salmon solid 1px;
border-radius : 5px;
p > a[href^="https://"], p > a[href^="http://"] {
font-size : 1.0em;
font-weight : 300;
padding-top : 0;
border : none;
padding-right : 0;
padding-left : 0.3em;
line-height : 1em;
font-family : 'courier new', sans-serif;
border : none;
color : salmon;
h1 {
font-size : 1.3em;
font-weight : 300;
text-align : center;
line-height : 1.3em;
margin-top : -1em;
padding-bottom : 1em;
color : salmon;
h2, h3, h4, h5, h6 {
font-size : 1.3em;
font-weight : 300;
text-align : center;
line-height : 1.3em;
padding-top : 1.5em;
padding-bottom : 0.7em;
color : salmon;
h1, h2, h3, h4, h5, h6 {
width : 100%;
h1:after, h2:after, h3:after, h4:after, h5:after, h6:after {
display : inline-block;
margin : 0 0 8px 20px;
height : 3px;
content : " ";
text-shadow : none;
background-color : #999;
width : 40px;
h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
display : inline-block;
margin : 0 20px 8px 0;
height : 3px;
content : " ";
text-shadow : none;
background-color : #999;
width : 40px;
h2 a {
font-weight : 700;
text-transform : uppercase;
color : #FB667A;
text-decoration : none;
.blue {
color : #185875;
.yellow {
color : #FFF842;
color : gold;
.container th h1 {
font-weight : bold;
font-size : 1.8em;
text-align : left;
color : #185875;
color : navy;
.container td {
font-weight : normal;
font-size : 1em;
box-shadow : 0 2px 2px -2px #0E1119;
.container {
text-align : left;
overflow : hidden;
width : 80%;
margin : 0 auto;
display : table;
padding : 0 0 8em 0;
.container td, .container th {
padding-bottom : 2%;
padding-top : 2%;
padding-left : 2%;
.container tr:nth-child(odd) {
background-color : #323C50;
.container tr:nth-child(even) {
background-color : #2C3446;
.container th {
background-color : #1F2739;
background-color : lightblue;
.container td:first-child {
color : #FB667A;
.container tr:hover {
background-color : #464A52;
box-shadow : 0 6px 6px -6px #0E1119;
.container td:hover {
background-color : #FFF842;
color : #403E10;
font-weight : bold;
box-shadow : -1px 1px #7F7C21, -2px 2px #7F7C21, -3px 3px #7F7C21, -4px 4px #7F7C21, -5px 5px #7F7C21, -6px 6px #7F7C21;
transform : translate3d(6px,-6px,0);
transition-delay : 0s;
transition-duration : 0.4s;
transition-property : all;
@media (max-width:800px) {
.container td:nth-child(4), .container th:nth-child(4) {
display : none;
table {
border : navy dotted 1px;
border-collapse : collapse;
width : 100%;
td {
border : #999 solid 1px;
padding : 0.1em 1em;
background-color : #CEF6F5;
color : #024457;
th {
border : #999 solid 1px;
padding : 0.1em 1em;
background-color : #024457;
color : #CEF6F5;
.alternative {
background-color : #ddf;
.unterstreichen {
text-decoration : underline dashed lime;
.durchstreichen {
text-decoration : line-through;


Actually, I’m thinking about disabling userstyle.css when printing because it has to follow certain rules, like black text, white background, etc. so it’s not really possible to make it work alongside userstyle. Maybe we could introduce printstyle.css later on.

1 Like

How many characters approximately do these notes have? I’ll do some tests with this as there could be some simple optimisation for it.


There are about 12 000 words, expected to grow to 2 or 3 times that as I complete it.

Incidentally, I’ve loaded the Portable App on my work computer and it created the Help notebook again, even though I’d already created (and deleted) it on my PC at home. (They both sync to the same target.)

It’s not horrible, but might be a bit counterintuitive for some users? I’m not sure. (I don’t mind much, basically I’m just asking whether it’s intentional.)


Thanks for the great new features. Welcome screen looks nice and useful.
One issue I noticed was that the check marks in the pdf export are turned upsode down:
On the left is the Editor, On the right the exported pdf. This happens with all check-marks.

Checkbox readability

I took the list of things that have been done from here https://github.com/laurent22/joplin/releases/tag/v1.0.126

here are my feedback :

  • "New: Record last selected note IDs and restore it when opening notebook : "
    it’s almost good : when don’t go to the last selected note but go to the first note of same folder

  • the page is not translated when “When selecting multiple notes, display possible actions as buttons”

  • We can’t press “new note” to create one, “When selecting multiple notes, display possible actions as buttons”

  • “Improved: Move up and down in note list using arrow keys” : if you mean move up and down a note in the note list, then no, but can edit note by moving arrow down up/down

  • right click menu not fully translated :
    – “add / remove tags”
    – “switch between todo / notes”

  • when “Delete note using keyboard” the menu that appears is not fully translated

  • “Improved: Use ENTER and ESCAPE to go to next search result or to close search bar” : in the search bar, nothing happens with enter + escape

if you are ok with that notices, I can then create an issue for each of them.

Otherwise, a huge thanks for all the improvements. The navigation is better and near the habit with a file explorer we use usually.


Joplin already honours @media print { … } so a separate printstyle css doesn’t look not neccessary to me.


In terms of support, it’s simpler to say “userstyle.css is not for print” rather than describe how to add print-specific media queries. Getting the style right for printing is a bit too complicated anyway and would lead to too many support requests, so it’s simpler to disable it for now.


@laurent The Help-Notebook should only be created or integrated if the user really wants it. Help-Notebook contains tags that remain even though the Help-Notebook has been deleted.


Some feedback.

  • Welcome notes: Great! But after 1st start could they (and the tags) be hidden and redisplayed via the Help menu?
    Zim has a nice approach for help: It displays the help notebook in a separate app window.
  • Under Appearance, I can increase/decrease the editor font but not the display font (which seems to have grown larger since the last release??)
  • PDF export: Highlight works, but checkboxes come out as black squares.
    ( BTW PDF export still silently overwrites existing files.)
  • Styling and layout of notes: I still think the userstyle.css is very useful but it must be clear what can be used inside it.

Thanks for the feedback everyone! No need to open GitHub issues at this point, I’ll just go through the thread and fix what can be fixed.

1 Like

Although the automatic Welcome noteboook looks great, and has useful content in it, I have to agree that for existing users it adds Tags even after deleting the whole book. I must have deleted the ‘synchronization’ tag about 5 times now! :slight_smile:

This suggests there is an underlying minor bug (at least using WebDav on NextCloud as the storage):

  • New Welcome notebook is created automatically.
  • User deletes the whole notebook.
  • User runs ‘Synchronise’
  • Sync reports Updated remote items: 14 - quantity approx from from memory.
  • After Synching all other clients, Tags from the deleted Welcome notebook appear.
    • exporting, importing, markdown, organizing, synchronizing, search, attachment
  • The extra tags can’t be deleted via the Android app, but the Linux AppImage version works fine.

I assume the ‘orphaned’ Tag notes are being synched, rather than being removed.

Apart from that quirk, I’m really enjoying Joplin - Thanks all!


Hi @laurent

I have to say I was very pleased and surprised to see the Joplin update on Android on 2019-02-24 included a fix:

  • Fixed: Tags that are no longer in use will no longer be displayed’
  • Fixed: Welcome notes issues

Thank you for creating Joplin in the first place, and being so responsive in updating it! :heart_eyes: :trophy: :1st_place_medal:


Love the usability improvements!