I found that when using Mermaid pie charts the chart would expand to fill all the available space. Therefore if you had a pie chart in a note with Joplin maximized on a large screen the pie chart was huge.
There is also a “side-effect”. I previously reported an issue where having a flowchart without a “node” on its left side appeared to be cut off on its left.
This was closed as a Mermaid issue as it seems that when a chart is on the left Mermaid does not draw the “empty” line.
However using the above css moves the flowcart out from the left and the line is drawn!
This setting may cause problems for those with horizontal charts and possibly using % rather than px would be better, but hopefully it may assist someone else or act as a starting point for something better…
I am not sure if this is applicable to your use case, but hitting Command-R (Mac) inside the Development Tools window force reloads the app, so you get CSS changes without having to restart the app.
Since I usually have that window open when I am messing with css, it was a little faster than restarting each time. Happened upon it by accident, so thought I'd share
I have a vast archive of notes collected over the years (decades). I would really hate to see old notes suddenly looking different (even becoming unreadable/unusable) due to unsollicited changes in the rendering engine.
Even without custom CSS Joplin keeps changing note appearance from version to version, which I must consider a big disadvantage when it comes to serious, long term note taking and collecting.
Really. Since all the notes are just markdown, what could Joplin possibly do to make them “unreadabe” or “unusable”? It’s text files.
And if you don’t like userstyles changing the look of your notes, it’s actually very easy not to use userstyles. Someone else’s userstyles stop working because of Joplin’s internal changes? That won’t affect your notes one bit.
Btw, for me, this is exactly why I like my notes in Joplin: the chance I will suddenly lose access to them (and I include their becoming ‘unreadabe’ in that) is virtually nil.
Since this is a point of interest to me (I suspect for many of the same reasons as it is to you): what system/s do you currently use, instead of/beside Joplin?
I do realize this is veering off topic a bit, so feel free to DM me if that’s better.
I've now added a warning in the app and moved the setting under Advanced Options to make this clear.
They are discouraged because indeed many users don't like when their style break from one version to the next, and that's understandable. However I won't make a commitment to keep the HTML structure stable as that would be the end of many improvements that could otherwise be made.
So that's why we allow usercss, as it's easy for us to allow it and many users want it, however it's your custom file so it's your job to update it as the app evolves.
As I often use internal Joplin links “inline” I find that the Joplin internal link “J” icon before the link can be rather distracting.
This CSS is for userstyle.css and removes the “J” icon for internal links but does not remove the resource type icons for txt, pdf, zip, etc. attachments.
However as there is no longer something to differentiate between internal and external links it also changes the colour of internal links and, if applicable, their resource icons. In this example blue is external and green is internal.
a {
color: #0000CD; /* set general link colour - includes TOC links*/
}
a[data-resource-id] {
color: #006600; /* change the colour of INTERNAL links */
}
.resource-icon.fa-joplin {
display: none; /* do not display the Joplin resource icon */
}
.resource-icon {
background-color: #006600; /* change other resource link icons to the same as the internal link colour */
}
Hi, thanks for the tip, I didn’t realize syntax highlighting was available in markdown!
I hadn’t checked before, but yes, the theme supports it with the built in colors from the stock Joplin dark mode theme.
This was found not from any great CSS knowledge but just by looking at what others had submitted on this forum and applying it to elements identified using the Development Tools.
and data-resource-id="070417fe118d4f509a8d4076f90b4ab6 could only apply to an internal resource link as the same id is used in the link itself.
So using something I have seen on this forum I tried to devise a selector which meant "Any a tag which also has a data-resource-id" and came up with a[data-resource-id]. No one was more surprised than me when it worked!
I haven't added any resource icons, they are built in. I just prevented one of them, the Joplin internal link icon, from being displayed.
Making the resource icons smaller seems a good idea especially if they become small enough to stop affecting the space between lines in a paragraph when used "in-line". Not tried that yet. I think you have also seen on another post that @laurent and @tessus have mentioned the possibility making the resource icons smaller by default. In the meantime I think I will play with your suggested CSS. Thanks for sharing!
Nice, much better. But the color of your links seems to be much lighter than mine? It has too little contrast for me now. I like the teal color but it is more darkgreen on my screen.
