ok insanely wicked. for an individual who knows 0 coding ; the fact that we can do this in this software seems magical to me. I really appreciate it .
just a follow up question ; how would one go about making the 'current highlighted or current note/notebook' more visible now ; what would the code be for that part.
also Q2) I've noticed a few people have ICONS on their notebook names ; I tried using the github names ie. 
when I renamed notebook but it didn't work for me.
Thanks man
I don't think that is currently possible but I am happy for someone to prove me wrong!
They are possibly just using emojis (not the markdown type). If you are on a Windows 10 computer rename the notebook and with the cursor in the name field press Windows Key + . and pick one.
I have no idea how adding an emoji to a notebook name may affect sorting or what it looks like when the notebook is synced to a device using another os.
There could possibly be another method being used. When you see someone post a screen-grab where icons have been added ask them how they did it! 
One thing I missed was numbering equations automatically with KaTeX (I use Joplin mainly for maths and I frequently need to reference previous steps in a demonstration). I also use numbered sections, and I am following the convention of h1.equation number (eg the first equation of the first section is 1.1 and so on). This sets up the counter for the first section:
h1 {
counter-reset: h2 eqnum;
}
Now this adds the equation numbering - if you do not want to number by section remove the counter(h1) "." from the code bellow:
.katex-display::after {
counter-increment: eqnum;
content: "(" counter(h1) "." counter(eqnum) ")";
float: right;
}
A picture is worth a thousand words:
I have not found how to do this in this topic, maybe I choose the wrong keywords when making the search?
And Thanks for this topic, I have used many of the ideas here to enhance my css!
That's really cool. I barely have any equations in my notes, but it looked great so I decided to use it.
One thing I didn't like was that the number wasn't on the same line as the equation itself, so I changed your code a little:
h1 {
counter-reset: h2 eqnum;
}
.katex-html::after {
counter-increment: eqnum;
content: "(" counter(h1) "." counter(eqnum) ")";
float: right;
font-size: initial;
padding-top: 0.7em;
}I have no idea how to include this in my notebooks (I do not have any idea about CSS)! Is there any place where I could paste this code to get the result?
Here (arch linux) it hides in ~/.config/joplin-desktop. The file is named userstyle.css - I don't remember if I had to create or if there was a file already there with this name.
I am pretty sure if you search around the forum you will find where to put the userstyle.css file in any system - that was how I first found out!
When you are in Joplin, click on Tools>Options>Appearance>Show advanced settings>Custom stylesheet for Joplin-wide app styles>Edit
Then it should open the file in a text editor. Put the code there if it is for the system. Choose the other file if it is for the rendered Markdown.
And don't forget to restart Joplin once you save it. (Lost a lot of time on that one a while ago. )
Hey!
Wanted to share my css, too. Even created a github Project for this.
I found the design for the headers in another project, but forgot to save the source. If someone knows from whom this was, I would be really glad to add a source link
userchrome.css:
.ace_heading {
font-weight: bold;
}
.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
color: aqua;
}
.ace-twilight .ace_list,
.ace-twilight .ace_markup.ace_list,
.ace-twilight .ace_storage {
color: rgb(221, 221, 221) !important;
}
.ace-twilight .ace_support.ace_function { color: #aaa !important; }
.ace-twilight .ace_variable { color: red !important; }
.CodeMirror-sizer .CodeMirror-lines {
padding-bottom: 50px !important;
}
.cm-s-material-darker .cm-variable-3, .cm-s-material-darker .cm-type {
color: #EEFFFF !important;
}
.cm-s-material-darker .cm-string {
color: #23CD60 !important;
}
.cm-s-material-darker .cm-meta {
color: #23CD60 !important;
}
.cm-s-material-darker .cm-property {
color: #00A3A3 !important;
}
userstyle.css:
/* // MARK: General */
:root {
--white: #e9edf0;
--light-grey: #b1bcc2;
--grey: #3D444E;
--dark-grey: #222222;
--black: #050017;
--red-light: #fad3d4;
--red: #f65354;
--red-dark: #FF1744;
--green-light: #c5e5b4;
--green: #58D68D;
--green-dark: #23CD60;
--yellow-light: #faf3d3;
--yellow: #E7AE1D;
--yellow-dark: #E7AE1D;
--blue-light: #bed3fc;
--blue: #02A4F1;
--blue-dark: #3a79f7;
--purple: #F459F4;
--purple-dark: #F459F4;
--aqua-light: #bef2fc;
--aqua: #1fdfdf;
--aqua-dark: #00A3A3;
--aqua-darker: #007c7c;
--orange-light: #faf3d3;
--orange: #cf7506;
--orange-dark: #E7AE1D;
}
body {
background-color: var(--dark-grey);
padding-top: 20px;
padding-bottom: 20px;
}
mark {
background: var(--aqua);
color: var(--black);
padding: 2px 4px;
}
strike, s {
opacity: 0.5 !important;
}
blockquote {
color: var(--white) !important;
margin: 1.5em;
padding: 1em;
border-radius: 8px;
border-left: 6px solid var(--aqua-dark);
background-color: var(--grey);
}
strong, em {
color: var(--aqua-dark) !important;
}
blockquote strong {
font-style: bold !important;
color: var(--aqua-dark) !important;
}
blockquote em {
font-style: italic !important;
color: var(--aqua-dark) !important;
}
hr {
border: none;
border-bottom: 1px solid var(--grey) !important;
margin: 2.5em 0 !important;
}
img {
border: none;
}
a {
color: var(--green-dark);
opacity: 1;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.resource-icon {
background-color: var(--green) !important;
width: 0.9em;
height: 1.1em;
top: 0.2em;
}
a[href='#'] {
color: var(--green-dark);
}
#rendered-md {
padding-bottom: 50px !important;
}
/* // MARK: Headers */
h1 {
color: var(--white);
background: var(--grey);
text-align: center;
padding: 20px 20px 15px 20px;
border-bottom: var(--aqua-dark) 2px solid;
margin-bottom: 20px;
margin-top: 40px;
}
#rendered-md > h1:first-child {
margin-top: 5px;
padding-top: 20px;
}
h2 {
color: var(--aqua-dark);
margin-top: 40px;
}
h3 {
color: var(--aqua-darker);
}
h4, h5, h6 {
color: var(--white);
}
/* // MARK: Listen */
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol li {
margin: 0;
padding: 0 0 0 1.5em;
list-style-type: none;
counter-increment: item;
}
ol li:before {
color: var(--aqua-darker);
content: counter(item) ".";
display: inline-block;
float: left;
font-weight: bold;
padding-right: 0.5em;
width: 1em;
}
ul {
margin: 0 0 1.5em;
padding: 0;
list-style: none;
}
ul li {
margin: 0;
padding: 0 0 0 1.5em;
list-style-type: none;
}
ul li::before {
color: var(--aqua-darker);
content: "\2022";
display: inline-block;
float: left;
font-weight: bold;
padding-right: 0.3em;
width: 1em;
}
/* // MARK: Notifications */
b-construction, b-error, b-success, b-notice, b-warning, b-help {
display: block;
margin-bottom: 10px;
padding: 10px 10px 10px 50px;
border: 1px solid;
border-left: 5px solid;
border-radius: 2px;
word-wrap: break-word;
text-align: left;
box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3);
color: var(--grey);
background-color: transparent;
}
b-construction::before,
b-error::before,
b-success::before,
b-notice::before,
b-warning::before,
b-help::before {
font-weight: 700;
font-size: 1.5em;
left: 30px;
position: absolute;
}
b-construction {
border-color: var(--orange);
color: var(--orange);
}
b-construction::before {
content: "\f7d9";
font-family: "Font Awesome 5 Free" !important;
color: var(--orange-light);
}
b-error {
border-color: var(--red);
color: var(--red);
}
b-error::before {
content: "\f071";
font-family: "Font Awesome 5 Free" !important;
color: var(--red-light);
}
b-success {
border-color: var(--green-dark);
color: var(--green-dark);
}
b-success::before {
content: "\f058";
font-family: "Font Awesome 5 Free" !important;
color: var(--green-light);
}
b-warning {
border-color: var(--yellow);
color: var(--yellow);
}
b-warning::before {
content: "\f06a";
font-family: "Font Awesome 5 Free" !important;
color: var(--orange-light);
}
b-notice {
border-color: var(--aqua-darker);
color: var(--aqua-darker);
}
b-notice::before {
content: "\f05a";
font-family: "Font Awesome 5 Free" !important;
color: var(--aqua-light);
}
b-help {
border-color: var(--blue-dark);
color: var(--blue-dark);
}
b-help::before {
content: "\f059";
font-family: "Font Awesome 5 Free" !important;
color: var(--blue-light);
}
/* // MARK: Tables */
table {
border-collapse: collapse;
overflow: hidden;
}
th,
td {
padding: 15px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
th {
text-align: left;
}
thead th, .jop-tinymce table th, table th {
background-color: var(--aqua-dark);
}
tbody tr:hover {
background-color: rgba(255, 255, 255, 0.3);
}
tbody td {
position: relative;
}
tbody td:hover:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
background-color: rgba(255, 255, 255, 0.2);
z-index: -1;
}
/* // MARK: Checkboxes */
input[type='checkbox'],
.md-checkbox .checkbox-label-unchecked,
.md-checkbox .checkbox-label-checked,
li.md-checkbox {
cursor: pointer !important;
}
li.md-checkbox [type="checkbox"]:not(:checked),
li.md-checkbox [type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
li.md-checkbox [type="checkbox"]:not(:checked) + label,
li.md-checkbox [type="checkbox"]:checked + label {
position: relative;
padding-left: 1.5em;
cursor: pointer;
}
li.md-checkbox [type="checkbox"]:not(:checked) + label:before,
li.md-checkbox [type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1em;
height: 1em;
border: 1px solid var(--dark-grey);
background: var(--light-grey);
border-radius: 50%;
}
li.md-checkbox [type="checkbox"]:checked + label {
opacity: .5 !important;
color: var(--white);
}
li.md-checkbox [type="checkbox"]:checked + label:before {
background: var(--aqua-darker);
opacity: 1 !important;
}
li.md-checkbox [type="checkbox"]:not(:checked) + label:after,
li.md-checkbox [type="checkbox"]:checked + label:after {
content: '\2713\0020';
position: absolute;
top: -1px;
left: 3px;
color: var(--dark-grey);
font-weight: bold;
font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
opacity: 1 !important;
}
li.md-checkbox [type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
li.md-checkbox [type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
For this extra Bullet Journal style, have a look at my Github Project.
Sorry to necro but is there a workaround for this? I'd love to be able to put math equations in the box as well.
From what I've tried, if you open the tag without closing it, it almost works the way I wanted with the equation in the box and all. Apart from the box not closing till the end, of course.
I am not sure I understand, you mean something like this?
Yes!!! In fact, exactly like that. The heading, the Helvetica, and all! I am trying to use Joplin for notes in my calculus class, so that's pretty much my exact use case!
Do the Markdown syntax also work within that block?
Yes. The important thing is to skip lines. I spent a longgg time to get this right
Here is a gist with the whole userstyle.css:
Oh my lord, thank you so much! The line-skipping did the trick!
Thanks so much for the gist! Really helpful, especially the extra line spacing for equations and the "theorem" boxes!
Oh geniuses of Joplin CSS thread ;
I have a request ; you know in the editor part (not the rendered markdown part) ; so when I have latex formulas between $$ and $$ ; can I have it so that those parts are behind a different background like a semi highlight so it stands out . Just a visual contrast/perception thing . There are times I just want to segment that in my brain .
Q2 ) has anyone noticed how sometimes the rendered markdown part and the editor part are not aligned when scrolling ? is there a way to break that connection so they don't scroll at the same time ? to hold a place ?
didn't change much. it is a mix of other posts from here.
userstyle:
/* coloured tags */
grey, red, green, blue, purp {
width: 90%;
display: block;
margin-left: 20px;
padding: 10px;
border: 1px solid;
border-left: 5px solid;
border-radius: 2px;
word-wrap: break-word;
box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3) ;
}
red strong{
font-weight: bold;
color : #000000;
}
grey {
border-color: #b1bcc2;
background-color: #e9edf0;
color : #000000;
}
green {
border-color: #7CBF6B;
background-color: #c5e5b4;
color : #000000;
}
red {
border-color: #f65354;
background-color: #fad3d4;
color : #000000;
}
purp {
border-color: #af74e8;
background-color: #ead9fb;
color : #000000;
}
blue {
border-color: #71B4DF;
background-color: #C4E8FF;
color : #000000;
}
h1 {
background: #b7cced;
text-align: center;
border-bottom: 4px solid #99a4c4;
color: #000000;
font-size: 22px;
border-radius: 3px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.3);
}
h2 {
background: #d5ddf5;
text-align: center;
border-bottom: 3px solid #a9b3d1;
color: #000000;
font-size: 20px;
border-radius: 3px;
padding-top: 8px;
padding-bottom: 8px;
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.3);
}
h3 {
background: #e6ecfc;
text-align: center;
border-bottom: 2px solid #d5ddf5;
color: #000000;
font-size: 18px
border-radius: 1.5px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 1.5px 1.5px 3.5px 0 rgba(0,0,0,0.3);
}
h4 {
background: #e6ecfc;
text-align: center;
color: #000000;
font-size: 15px;
border-radius: 1.5px;
padding-top: 5px;
padding-bottom: 5px;
}
userchrome:
:root {
--red: #FF1744;
--white: #E5FFDE;
--green: #23CD60;
--color-italics: #a842c2;
/*violett*/
--color-bold: dark-grey;
--color-quote: green;
--border-code: 1px solid rgb(70, 70, 70);
--backgd-code: rgba(47, 48, 49, 0.15);
--radius-code: .25em;
--color-code-ital: pink;
--color-code-bold: #6495ed;
/*lightblue*/
--color-katx-tags: orange;
--size-scroll: 4px;
--size-tab: 7px;
/* Alternating Notebook List Colors */
/* default/passthrough background for all the ODD rows */
--backgd-list-book1: #c2192d;
/* default/passthrough background for all the EVEN rows */
--backgd-list-book0: #c2192d;
/* .list-item-depth-0:nth-child(odd) a */
--backgd-list-0book1: #090b54;
/* 0 depth rows EVEN */
--backgd-list-0book0: #07095e;
/* .list-item-depth-1:nth-child(odd) a */
--backgd-list-1book1: #000000;
/* 1 depth rows EVEN */
--backgd-list-1book0: #141414;
/* 2 depth rows ODD */
--backgd-list-2book1: #616161;
/* 2 depth rows EVEN */
--backgd-list-2book0: #666666;
/* 3 depth rows ODD */
--backgd-list-3book1: #b5b5b5;
/* 3 depth rows EVEN */
--backgd-list-3book0: #b5b5b5;
/* Tag List */
--backgd-list-tags1: #092a0c;
--backgd-list-tags0: #0c2d0f;
}
div.tag-list span {
border-radius: 5px;
color:white !important;
background: blue !important;
}
.cm-image-marker {
color: var(--red);
/* changes the font colour for the "!" before displayed image links */
font-weight: 900;
}
.note-list div a:focus {
background-color: var(--green) !important;
color: var(--white) !important;
border-bottom: 0 !important;
}
.note-list .list-item-container:hover, .folders .list-item-container:hover {
background-color: var(--red) !important;
color: var(--white) !important;
}
/* code */
.cm-em {
color: var(--color-italics) !important;
}
.cm-strong {
color: var(--color-bold) !important;
}
.cm-quote {
color: var(--color-quote);
font-style: italic !important;
}
/* inline code */
.cm-s-material-darker pre.CodeMirror-line > span > span.cm-comment {
color: var(--color-italics) !important;
border: var(--border-code);
background-color: var(--backgd-code);
border-radius: var(--radius-code);
}
/* inline code italics */
.cm-s-material-darker pre.CodeMirror-line > span > span.cm-comment.cm-em {
color: var(--color-code-ital) !important;
}
/* inline code bold */
.cm-s-material-darker pre.CodeMirror-line > span > span.cm-comment.cm-strong {
color: var(--color-code-bold) !important;
}
.cm-tab {
font-size: var(--size-tab) !important;
}
/* colorize katex tags */
.cm-tag {
color: var(--color-katx-tags) !important;
}
/* colorize katex brackets */
.cm-bracket {
font-weight: bold !important;
color: var(--color-italics) !important;
}
/* colorize katex numbers */
.cm-number {
font-weight: bold !important;
color: var(--color-quote) !important;
}
/* widen default horizontal and vertical scrollbars */
::-webkit-scrollbar {
width: var(--size-scroll);
height: var(--size-scroll);
}
div.tags > div.list-item-container:nth-child(odd) a{
background-color: var(--backgd-list-tags1);
}
div.tags > div.list-item-container:nth-child(even) a{
background-color: var(--backgd-list-tags0);
}
/* Define the background color for empty list areas */
.note-list
{
background-color: var(--backgd-list) !important;
}
/* Alternating Note List Colors */
/* Define the list background color for all the ODD background rows */
.note-list > .list-item-container:nth-child(odd) a{
background-color: var(--backgd-list-note1);
background-clip: content-box;
}
/* Define the list background color for all the EVEN background rows */
.note-list > .list-item-container:nth-child(even) a{
background-color: var(--backgd-list-note0);
background-clip: content-box;
}
/* Alternating Notebook Colors */
/* Define the default/passthrough notebook background color for all the ODD background rows */
.list-item-container:nth-child(odd) a{
background-color: var(--backgd-list-book1);
}
/* Define the default/passthrough notebook background color for all the EVEN background rows */
.list-item-container:nth-child(even) a{
background-color: var(--backgd-list-book0);
}
.list-item-depth-0:nth-child(odd) a{
background-color: var(--backgd-list-0book1);
}
.list-item-depth-0:nth-child(even) a{
background-color: var(--backgd-list-0book0);
}
.list-item-depth-1:nth-child(odd) a{
background-color: var(--backgd-list-1book1);
}
.list-item-depth-1:nth-child(even) a{
background-color: var(--backgd-list-1book0);
}
.list-item-depth-2:nth-child(odd) a{
background-color: var(--backgd-list-2book1);
}
.list-item-depth-2:nth-child(even) a{
background-color: var(--backgd-list-2book0);
}
.list-item-depth-3:nth-child(odd) a{
background-color: var(--backgd-list-3book1);
}
.list-item-depth-3:nth-child(even) a{
background-color: var(--backgd-list-3book0);
}
I borrowed this, and it looks much nicer. Thanks for sharing.
Anyone in here with a Mac with Big Sur who can check if the icons are working properly for my theme?:
[...] I was surprised to see I could use the native macOS icons (At least, it works on my machine™). Apparently SF Pro contains all icons and can also serve as an icon font.
I'm using Mojave on my MacBook, but I do have Catalina in a VM. I haven't installed Big Sur in a VM yet, but will hopefully get to it at some point.
Hi, I'm new here and I believe that somethings in my custom css don't make much sense but here it goes 
Based on the dark theme from @xplosionmind
Modified to look more like the One Dark Pro on vscode. Took some inspiration on the PHPStorm Nord theme.
You can download it here if you want
What it looks like:
