Joplin Customization

Lounge
1

This page is a collection of CSS tweaks to customize Joplin (e.g. editor, rendering, ...)

To discover CSS classes and types refer to this comment

Plain editor (no color, no font changes)

userchrome.css
Joplin version tested on: 1.1.4

div.CodeMirror-lines * {
	font-size: inherit !important;
	color: black !important;
	font-weight: normal !important;
	text-decoration: none !important;
}

Example

plain_codemirror
plain_codemirror718×630 28.6 KB

/ref dpoulton comment

Dark Theme Mermaid Flowchart (Flowchart only)

userstyle.css
Joplin version tested on: 1.1.4

div.mermaid {
    background-color: #1D2024 !important;
    /* sets full background colour to Joplin Dark Theme colour */
    }
:root {
    --mermaid-font-family: "Bahnschrift SemiCondensed" !important;
    /* sets mermaid font variable - use one installed on your system*/
    }
.label {
    font-family: var(--mermaid-font-family);
    color: black !important;
    }

.label text {
    fill: black !important;
    }

.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
    fill: white !important;
    stroke: white !important;
    stroke-width: 1px;
    }

.node .label {
    text-align: center;
    }

.node.clickable {
    cursor: pointer;
    }

.arrowheadPath {
    fill: white !important;
    }

.edgePath .path {
    stroke: white !important;
    stroke-width: 1.5px;
    }

.flowchart-link {
    stroke: white !important;
    fill: none;
    }

.edgeLabel {
    background-color: #1D2024 !important;
    rect {
        opacity: 0.5;
        }
    text-align: center;
    color: white !important;
    }

Example

dark_mermaid_flowchart
dark_mermaid_flowchart690×161 7.18 KB

Original Posting & additional information

Remove Text Labels from Main Toolbar Buttons

userchrome.css
Joplin version tested on: 1.1.4

.header .title {
    display: none !important;
    }

Example
toolbar_icon_text

Credit: @uxamanda

Static "Watermark" Header & Footer When Printed / PDF Exported

userstyle.css
and @media print section (if used)
Joplin version tested on: 1.1.4

.exported-note::before {
    font-family: 'Roboto Mono';
    /* change to a font on your system - not necessarily monospace*/
    font-size: 10px;
    color: darkgrey;
    display: block;
    text-align: right;
    content: 'This is the header text';
    }
.exported-note::after {
    font-family: 'Roboto Mono';
    /* change to a font on your system - not necessarily monospace*/
    font-size: 10px;
    color: darkgrey;
    display: block;
    text-align: right;
    border-top: 1px solid darkgrey;
    content: 'This is the footer text';
    }

Example - Above CSS

header_footer1
header_footer1517×285 26.3 KB

Example - Potential Usage

header_footer2
header_footer2517×222 27.1 KB

Original Posting

Coloured Tags

userchrome.css
Joplin version tested on: 1.1.4

div.tag-list span {
    border-radius: 5px;
    color:white !important;
    background: blue !important;
    }

Example

bright_tags
bright_tags434×120 4.89 KB

Original Posting

CodeMirror Editor - Mimic ACE Editor Dark Theme

userchrome.css
Joplin version tested on: 1.1.4

span.cm-header {
    color: #CF6A4C;
    font-size: inherit !important;
    }

span.cm-link-text, span.cm-strong, span.cm-em {
    color: #8F9D6A !important;
    font-style: normal;
    font-weight: normal;
    }

span.cm-variable-2, span.cm-hr {
    color: #F9EE98 !important;
    }

span.cm-meta, span.cm-property {
    color: #7587A6 !important;
    }

 span.cm-string.cm-url {
    color: #DDDDDD !important;
    }

span.cm-comment {
    color: #DAD085 !important;
    }

ace_mimic_114
ace_mimic_114642×826 45.6 KB

Original Post

Restore CodeMirror Light Theme (prior to v2.2)

userchrome.css

Joplin version tested on: 2.2.7

div.CodeMirror.cm-s-default span.cm-header {color: blue;}
div.CodeMirror.cm-s-default span.cm-quote {color: #090;}
div.CodeMirror.cm-s-default span.cm-negative {color: #d44;}
div.CodeMirror.cm-s-default span.cm-positive {color: #292;}
div.CodeMirror.cm-s-default span.cm-header, span.cm-strong {font-weight: bold;}
div.CodeMirror.cm-s-default span.cm-em {font-style: italic;}
div.CodeMirror.cm-s-default span.cm-link {text-decoration: underline;}
div.CodeMirror.cm-s-default span.cm-strikethrough {text-decoration: line-through;}

div.CodeMirror.cm-s-default span.cm-keyword {color: #708;}
div.CodeMirror.cm-s-default span.cm-atom {color: #219;}
div.CodeMirror.cm-s-default span.cm-number {color: #164;}
div.CodeMirror.cm-s-default span.cm-def {color: #00f;}
div.CodeMirror.cm-s-default span.cm-variable,
div.CodeMirror.cm-s-default span.cm-punctuation,
div.CodeMirror.cm-s-default span.cm-property,
div.CodeMirror.cm-s-default span.cm-operator {}
div.CodeMirror.cm-s-default span.cm-variable-2 {color: #05a;}
div.CodeMirror.cm-s-default span.cm-variable-3, div.CodeMirror.cm-s-default span.cm-type {color: #085;}
div.CodeMirror.cm-s-default span.cm-comment {color: #a50;}
div.CodeMirror.cm-s-default span.cm-string {color: #a11;}
div.CodeMirror.cm-s-default span.cm-string-2 {color: #f50;}
div.CodeMirror.cm-s-default span.cm-meta {color: #555;}
div.CodeMirror.cm-s-default span.cm-qualifier {color: #555;}
div.CodeMirror.cm-s-default span.cm-builtin {color: #30a;}
div.CodeMirror.cm-s-default span.cm-bracket {color: #997;}
div.CodeMirror.cm-s-default span.cm-tag {color: #170;}
div.CodeMirror.cm-s-default span.cm-attribute {color: #00c;}
div.CodeMirror.cm-s-default span.cm-hr {color: #999;}
div.CodeMirror.cm-s-default span.cm-link {color: #00c;}

div.CodeMirror.cm-s-default span.cm-error {color: #f00;}
span.cm-invalidchar {color: #f00;}

Restore CodeMirror Dark Theme (prior to v2.2)

userchrome.css

div.CodeMirror.cm-s-material-darker span.cm-header {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-quote {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-negative {color: #d44;}
div.CodeMirror.cm-s-material-darker span.cm-positive {color: #292;}
div.CodeMirror.cm-s-material-darker span.cm-header, span.cm-strong {font-weight: bold;}
div.CodeMirror.cm-s-material-darker span.cm-em {font-style: italic;}
div.CodeMirror.cm-s-material-darker span.cm-link {text-decoration: underline;}
div.CodeMirror.cm-s-material-darker span.cm-strikethrough {text-decoration: line-through;}

div.CodeMirror.cm-s-material-darker span.cm-keyword {color: #c792ea;}
div.CodeMirror.cm-s-material-darker span.cm-atom {color: #f78c6c;}
div.CodeMirror.cm-s-material-darker span.cm-number {color: #ff5370;}
div.CodeMirror.cm-s-material-darker span.cm-def {color: #00f;}
div.CodeMirror.cm-s-material-darker span.cm-variable,
div.CodeMirror.cm-s-material-darker span.cm-punctuation,
div.CodeMirror.cm-s-material-darker span.cm-property,
div.CodeMirror.cm-s-material-darker span.cm-operator {}
div.CodeMirror.cm-s-material-darker span.cm-variable-2 {color: #eeffff;}
div.CodeMirror.cm-s-material-darker span.cm-variable-3, div.CodeMirror.cm-s-material-darker span.cm-type {color: #decb6b;}
div.CodeMirror.cm-s-material-darker span.cm-comment {color: #878787;}
div.CodeMirror.cm-s-material-darker span.cm-string {color: #c3e88d;}
div.CodeMirror.cm-s-material-darker span.cm-string-2 {color: #f50;}
div.CodeMirror.cm-s-material-darker span.cm-meta {color: #ffcb6b;}
div.CodeMirror.cm-s-material-darker span.cm-property {color: #decb6b;}
div.CodeMirror.cm-s-material-darker span.cm-qualifier {color: #555;}
div.CodeMirror.cm-s-material-darker span.cm-builtin {color: #30a;}
div.CodeMirror.cm-s-material-darker span.cm-bracket {color: #ff5370;}
div.CodeMirror.cm-s-material-darker span.cm-tag {color: #ff5370;}
div.CodeMirror.cm-s-material-darker span.cm-attribute {color: #00c;}
div.CodeMirror.cm-s-material-darker span.cm-hr {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-link {color: #c3e88d;}
div.CodeMirror.cm-s-material-darker span.cm-link-text {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-operator {color: #89ddff;}

div.CodeMirror.cm-s-material-darker span.cm-error {color: #dddddd;}
span.cm-invalidchar {color: #f00;}

Remove ligatures from editor

userchrome.css

.CodeMirror * {
    font-variant-ligatures: none;
}

/ref SandyG

CodeMirror - all headings same size

userchrome.css

.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
	font-size: 1em !important;
}

/ref CalebJohn comment

Remove WYSIWYG Button (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.6

 div.editor-toolbar div button {
	/* removes the WYSIWYG button */
	 display: none !important;
}

Remove "New To-do" Button (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.4

button[title="New to-do"] {
	/* button - for keyboard warriors - removes the new to-do button */
	 display: none;
}

Remove "New Note" Button (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.4

button[title="New note"] {
	/* button - for keyboard warriors - removes the new note button */
	 display: none;
}

Remove icon from "All Notes" (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.4

i.icon-notes {
	/* sidebar - removes the "All Notes" icon */
	 display: none;
}

Completely remove "All Notes" text (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.6

This appears to use a class name that is "randomised" during the build process and so may stop working for releases after 1.2.6 - @dpoulton

.hAzLGs {
  display: none !important;
}

Example:

example
example500×200 9.68 KB

Modify sidebar notebook name font size (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.4

a[data-type="2"], a[data-type="5"] {
	/* sidebar - notebook (2) and tag (5) title text */
        font-size: 12px !important;
        font-weight: normal !important;
}

Modify notelist note name colour (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.4

a[draggable="true"] span {
	/* notelist - note title text */
	 color: black !important;
}

Modify footer tag-list shape & colour (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.4

div.tag-list span {
	/* footer - list of tags */
	 border-radius: 3px !important;  /* to match border radius of the "In:Notebook" header tags */
	 color:white !important;
	 background: #2D6BDC !important; /* colour #2D6BDC - joplin light theme blue */
}

Modify editor buttons colour (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.6

a.button span, .fa-ellipsis-h  {
	/* editor - buttons - also split view & info buttons */
        color:black !important;
	/* active buttons are above colour - inactive will be a % of that colour */
}

Modify Background Colour for Selected Text in the Code Editor (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.6

 .CodeMirror-selected {
	/* selected text */
	 background: #0663d3 !important;
}

Original post here

Modify Search Hit Colours in the Code Editor (v1.2.x)

userchrome.css
Joplin version tested on: 1.2.6

 .cm-search-marker {
	/* search hit */
       background: lightpink !important;
}
 .cm-search-marker.cm-search-marker-selected {
	/* currently highlighted search hit */
       background: red !important;
}

Original post here

Add a vertical 80-character reference line in the plain-text editor

ASSUMPTION.

  • This is only particularly useful if you have a monospace font set for the editor: Tools > Options > Appearance > Editor font family.
  • Also, if you set the Editor monospace font family to something different than the above, the line will be drawn inaccurately for preformatted text blocks (the browser calculates the size based not on the Joplin applied font - weird). You can remove .cm-jn-code-block-background from the CSS below if you still want a reference line but want to remove it from the preformatted blocks.
  • The units used here are ch units. 1ch = the width of the current font's 0 character.

A simple example - drawing a vertical red line

This first is a simple example of how the linear-gradient function works. We are asking the browser to paint a background from left to right: transparent to the 80th character (80ch), red from 80th to 80.25 (80ch 80.25ch), and then immediately go transparent from character 80.25 (80.25ch) to the right side of the block.

userchrome.css
Joplin version tested on: 2.8.8

.CodeMirror-code,
.cm-jn-code-block-background {
    /* a thin vertical line at the 80-character mark - red */
    background-image: linear-gradient(to right, transparent 80ch, red 80ch 80.25ch, transparent 80.25ch) !important;
}

Drawing a theme-friendly line (which is really two lines) . . .

Now red is a rather stark color. I want something nice and unobtrusive. But unobtrusive is not friendly if you are changing themes. The solution: use two colors and draw two vertical lines next to each other. One color will be visible with light themes. The other, during dark themes. Magic! And to add unobtrusive nuance, we pick stark colors that contrast with each end of the theme spectrum and then fade them out with function rgba's alpha setting (it controls the opacity of the applied color.

For this I pick two nearly gray colors that also have some blue. Anthracite is very dark. It has a complementary version that I am calling anthracite-light. each will be faded to 10%. You will see the light one in the dark themes. And you will see the dark one in the light themes.

userchrome.css
Joplin version tested on: 2.8.8

.CodeMirror-code,
.cm-jn-code-block-background {
    --rgb-anthracite-light: 169,181,212; /* set to 10% for dark themes */
    --rgb-anthracite: 57,61,71; /* set to 10% for light themes */
    background-image: linear-gradient(to right, transparent 80ch, rgba(var(--rgb-anthracite-light),10%) 80ch 80.25ch, rgba(var(--rgb-anthracite),10%) 80.25ch 80.5ch, transparent 80.5ch) !important;
}

Note: If you have two different monospace fonts set

Hopefully, this is useful for you. Cheers!
/ref t0dd

Remove the "New to-do" button to free up space above the note list (v2.10)

userchrome.css
Joplin version tested on: 2.10.18

Joplin desktop 2.10.x introduces a new style for the "New note" and "New to-do" buttons which change based on the width of the note list. Sometimes this can make the search bar rather small. Personally I do not use to-do notes so the below css will remove the "New To-do" button and the space it occupies.

4

button.new-todo-button {
    /* removes the "New To-do" button (v2.10.6+) */
    display: none;
}
div.new-note-todo-buttons {
     /* removes the the space for the "New To-do" button (v2.10.6+) */
    grid-template-columns: 1fr 0;
    gap: 0px;
}

The "New note" button and search bar still adjust according to the width of the note list.

1
1177×127 3.67 KB

2
2208×122 3.98 KB

3
3267×124 4.31 KB

4

The sort order button has also been switched off using the option in Joplin settings.

"Fake" Mixed Case Tags

userchrome.css
Joplin version tested on: 2.13.15

This will make the tag list and the tags on the note display a capital letter for the first letter of each word in the tag. Note that this is a display modification only. Within Joplin the actual tag data itself is unchanged.

span.tag-label,
div.tag-list button {
    text-transform: capitalize;
}

After
After690×449 53.9 KB

19 Likes
Theme Customization
Random class names
Is there a way to edit the preview font size?
How to revert back to old look of app
Monospace editor font size is no longer consistent
Share your CSS
Code view button
How to change font family and font size in preview panel?
Introduction to customising Joplin (userchrome.css & userstyle.css)
Who can help make an Evernote style CSS file?
Material theme for Joplin 🎨
Plain text notes (disable the preview that is built into the editor?)
@font-face font family rendering as Times New Roman
Joplin and New Design
Combine sidebar and notes
Disabling text formatting in the editor, is it possible?
Stylize Headings in Editor
Hide button switch Markdown and WYSIWYG
Talking about Markdown's CodeMirror theme update
CSS - Free up space above the note list - Remove "New to-do"
Monospace styling in 2.2.7
The option to remove or reorder these buttons and the clock
Color Indicators in Markdown-Editor are gone
Note EDITOR pane text different fonts/sizes/indents/colour etc - difficult to read
Change font-family in tables (userstyle.css)
Disable markdown "pre-" rendering?
How to change color and size of right scrollbar width?
Markdown editor, style/CSS lost with upgrade
Setting to hide Markdown/WYSIWYG Button?
Markdown editor, style/CSS lost with upgrade
Prettier markdown editor?
Testing - v1.8.1 - Editor Font & Editor Font Settings
How can i change the color of the Background Highlight
Share your CSS
Customize font color
Editor color highlighting
Joplin 2.7: Bold text not green anymore
Note editor appearance
How to change the background colour of selected text in code block?
3

Do not add Replies to this topic but edit the first entry. There's an Edit button at the bottom of the first entry.

9 Likes