Home / GitHub Page

Joplin Customization

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

/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

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

Example - Potential Usage
header_footer2

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

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;
    }

Original Post

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

.hAzLGs {
  display: none !important;
} 

Example:
example

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

6 Likes

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

1 Like