Joplin App Customising

Change CSS for Joplin Itself

• Tools >> Options >> Appearance >> Advance >> Joplin CSS
• Add these styles: // For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) / .sidebar { background:white !important; } .sidebar { background:white !important; } .sidebar { color:black !important; }

Plugin Customising Steps

Find Plugins Folder

• Menu >> Tools >> Options
• See top line for config folder, plugins are in there

Unpack a .jpl Plugin File

• Clone .jpl file to jpl.original for safety
• Change .jpl to .zip and unpack to a folder
• Joplin will consider this folder as unpacked plugin and load as usual

Change Background Colour

• Edit index.css
• Add .force-graph-container canvas {background:#bbb !important;}

Change Ctrl+Key to Click for Navigation

• Install Graph plugin, and unpack
• Edit webview.js file
• Non-lib source starts at line with ./src/common
• Change the following line // Always return true (considered as with ctrlKey) const openNoteAction = (event) => true; // event.getModifierState("Control") || event.getModifierState("Meta");

Change Node Size to Click Easily

• Still Graph plugin
• Edit webview.js
• Find function function paintNodes(), seems a function of a node module, not the Graph plugin itself
• Edit line ctx.arc to: // Added 5 to be four times bigger node ctx.arc(node.x, node.y, 5r, 0, 2 Math.PI, false);

Change Node Label Colour

• Edit webview.js plugin
• Find function paintNode
• Change labelColor.toString() to "blue"

Disable Edge Blurring on Hover

• Edit webview.js
• Find hoverNode(node) inside Model class
• Comment out this.updateFocus();