Share your CSS

I'm using Stylus addon on Firefox to style websites using CSS and it's possible to set different variable values depending on the OS theme like this:

@media (prefers-color-scheme: light) {
    /* light theme colors */
    :root {
        --bg-color: white;
    }
}

@media (prefers-color-scheme: dark) {
    /* dark theme colors */
    :root {
        --bg-color: black;
    }
}

/* ... */

div#joplin-container-content {
    background-color: var(--bg-color) !important;
}

I've been trying to do the same thing in Joplin because currently, my userchrome.css and userstyle.css contain hardcoded color values for dark theme, so changing OS theme to light makes Joplin look difficult to use (dark background on dark text etc). Is it possible to use prefers-color-scheme or something similar in userchrome.css and userstyle.css to set separate colors for dark and light themes?

I've seen a discussion on a similar thing, but there hasn't been much progress:

Hello,

I am also new here. :grinning: I am using Joplin since few months. Combined with some plugins, it is a powerful tool!

I am currently working on an update of VSCode Community Material Theme for Joplin. My version of Community Material Theme Ocean is almost done, but I am struggling with tweaking some styles:

  • I do not know how to change/override the background color of block codes (not inline code, but comments inside blocks)

  • I am not able of modifying the selection style of some content in CodeMirror

  • Lastly, I would like to change the style of the checkboxes in the note list, but changing the background-color of li.md-checkbox has no effect

Has anyone been able to do these tweaks?

Thanks!

I updated my CSS for Jolpin :slight_smile:

/* userchrome.css */
: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-light: #C792EA;
  --purple: #F459F4;
  --purple-dark: #F459F4;
  
  --aqua-light: #70ecec;
  --aqua: #1fdfdf;
  --aqua-dark: #00A3A3;
  --aqua-darker: #007c7c;
  
  --orange-light: #faf3d3;
  --orange: #cf7506;
  --orange-dark: #E7AE1D;
}

div.sidebar {
  background-color: #2E3138 !important;
}

div.sidebar .list-item-container.selected {
  background: #616161;
}
div.sidebar .list-item-container:hover {
  background: #4E4E4E !important;
}

div.sidebar .list-item-container a.list-item > span:not(.title):not(.tag-label) {
  font-size: 15px !important;
  width: 25px;
  text-align: center;
}

div.sidebar button {
  font-size: 13px;
}
div.sidebar button:hover {
  background: #4E4E4E !important;
}
div.sidebar button span.icon-sync {
  font-size: 15px;
}

div.rli-noteList button.new-todo-button,
div.rli-noteList button.new-note-button {
  background-color: var(--white);
  opacity: .5;
}
div.rli-noteList button.sort-order-reverse-button span,
div.rli-noteList span.user_updated_time,
div.rli-noteList span.icon-search {
  color: var(--white);
  opacity: .5;
}

div.note-list .list-item-container,
div.note-list > div:last-of-type {
  height: 30px !important;
}
div.note-list .list-item-container::before {
  border: none;
}
div.note-list .list-item-container > a {
  font-size: 13px !important;
}

.ace_heading {
  font-weight: bold;
}
.CodeMirror .cm-header.cm-header-1, 
.CodeMirror .cm-header.cm-header-2, 
.CodeMirror .cm-header.cm-header-3, 
.CodeMirror .cm-header.cm-header-4, 
.CodeMirror .cm-header.cm-header-5, 
.CodeMirror .cm-header.cm-header-6 {
  color: var(--aqua-dark);
}

.CodeMirror .cm-strong {
  color: var(--aqua-light) !important;
}

.ace-twilight .ace_list, 
.ace-twilight .ace_markup.ace_list, 
.ace-twilight .ace_storage {
  color: var(--white) !important;
}
.ace-twilight .ace_support.ace_function { color: #aaa !important; }
.ace-twilight .ace_variable { color: var(--red-dark) !important; }

.cm-s-material-darker .cm-variable-3, .cm-s-material-darker .cm-type {
  color: var(--white) !important;
}

/* Links */
.cm-s-material-darker .cm-link-text {
  color: var(--purple-light) !important;
}
.cm-s-material-darker .cm-string {
  color: var(--green-dark) !important;
}

.cm-s-material-darker .cm-meta {
  color: var(--green-dark) !important;
}
.cm-s-material-darker .cm-property {
  color: var(--aqua-dark) !important;
}


.cm-tabcolor-row {
  color: var(--joplin-color) !important;
}
.cm-tabcolor-header {
  font-weight: bolder;
  color: var(--joplin-color) !important;
}
.cm-tabcolor-col1, .cm-tabcolor-col7 {
  background-color: transparent !important;
  color: #00A3A3 !important;
}
.cm-tabcolor-col2, .cm-tabcolor-col8 {
  background-color: transparent !important;
  color: #F459F4 !important; 
}
.cm-tabcolor-col3, .cm-tabcolor-col9 {
  background-color: transparent !important;
  color: #23CD60 !important;
}
.cm-tabcolor-col4, .cm-tabcolor-col10 {
  background-color: transparent !important;
  color: red !important;
}
.cm-tabcolor-col5, .cm-tabcolor-col11 {
  background-color: transparent !important;
  color: #cf7506 !important;
}
.cm-tabcolor-col6, .cm-tabcolor-col12 {
  background-color: transparent !important;
  color: #3a79f7 !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-light: #C792EA;
  --purple: #F459F4;
  --purple-dark: #F459F4;

  --aqua-light: #70ecec;
  --aqua: #1fdfdf;
  --aqua-dark: #00A3A3;
  --aqua-darker: #007c7c;

  --orange-light: #faf3d3;
  --orange: #cf7506;
  --orange-dark: #E7AE1D;
}


body {
  background-color: var(--dark-grey);
  /* padding-top: 4px;
  padding-bottom: 20px; */
  font-family: "Roboto", Avenir, Arial, sans-serif !important;
}

/* #rendered-md {
  max-width: 750px !important;
} */

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-light) !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); 
}

/* // 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-dark);
}

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

table tr td > ul:last-of-type {
  margin-bottom: 0em;
}

/* // 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);
}

ul li[class*='checkbox']::before {
  display: none;
}

/* GALLERY */
img.gallery {
  border: 1px solid #00A3A3; 
  margin-right: 10px;
}
img.gallery:hover {
  position: absolute; 
  width: 100%; 
  left: 0; 
  cursor: pointer;
  z-index: 999;
}

/* MARK: Copy Anchor (Headers) */

h1 span.copy-anchor-icon, h2 span.copy-anchor-icon, h3 span.copy-anchor-icon {
  visibility: hidden;
}
h1:hover span.copy-anchor-icon, h2:hover span.copy-anchor-icon, h3:hover span.copy-anchor-icon {
  visibility: visible;
}

For this extra Bullet Journal style, have a look at my Github Project.

5 Likes

Hey,

As mentioned in my last post, I updated the themes created by mahor1221. As this repository is now archived, I cannot submit a pull request. Thus, you can find an updated version of these themes in my forked repository: GitHub - stysebae/joplin-vsc-material-theme: VSCode Community Material Theme for Joplin .

Here is an overview of these themes, suited for Joplin >= 2.x:

screenshots

3 Likes

Hi everyone! I'm using a heavily modified version of Ohmine Dark Theme. I've managed to change what I wanted successfully, aside from one thing: I can't for the life of me change the font size of the note list (the notebook list works). Any help would be most welcome!

1 Like

Have a look at this thread/post.

If you need it to be specific to a given panel then you will need to target the .sidebar or .note-list parent classes.

Thanks! I've actually already targetted the .note-list class (see below) but I don't see any difference:

Did you have a look at the post? I think font-size is overridden further down the chain so you have to be more specific e.g.

div.list-item-container > a {
	font-size: 10px !important;
}

Sorry I missed that -- that worked! Many thanks

1 Like

anyone ever figure out how to color the background of the Katex equations that are shown?

Hi,
maybe its here somewhere, but I cant find it
I'd like my marked text to be normal background, red bold text at 20 pnt

I started off by experimenting with changing the background to red (not what I want in the end, but I found a post on this and it was a start of my experimenting) but it doesnt work:
[The body white text is purposely commented out]

/* For styling the rendered Markdown */
body {
   /* sets body text font size in pixels */
    font-size: 16px;
   /* sets body text font colour */
   /* color: #FFFFFF; */
   /* Set Mark to yellow */
    .highlight { background-color: red; }
    }

Can anyone help please (and explain why the red background doesnt work?)

Cheers

EDIT 1:
Found this, which helped me get to this:


/* For styling the rendered Markdown */
body {
   /* sets body text font size in pixels */
    font-size: 16px;
   /* sets body text font colour */
   /* color: #FFFFFF; */
    }
mark                            { background-color: grey; font-size: 20px; color: #FF0000;}  /* your own marking */
mark[data-markjs]               { background-color: #F3B717; }  /* orange */
mark[data-markjs].mark-selected { background-color: #CF3F00; }  /* reddish orange */

Now my question is, how to make no mark background and include the bold bit?
Also, what are the [data-markjs] and [data-markjs].mark-selected ones for?
And, what / where is the syntax for this css stuff, for me to find out on my own (in a fisherman fish or fishing rod sense)

EDIT 2:
Got it :smiley:

mark { background-color: transparent; font-size: 20px; color: #FF0000; font-weight: bold;} /* your own marking */

I found this CSS resource

Still dont know what the other two mark lines are for tho

Thanks, this is really useful !

I can't see any mention here of the massive collection of userchrome.css themes that are stored in the CodeMirror source code:

The MacOS Native Theme uses these under the hood and they're lovely. If you just want the markdown editor themes you can fairly easily modify each of the css files from CodeMirror to use locally by deleting all the .cm-s-<theme-name> class names from the CSS and then loading the remaining CSS into your userchrome.css.

For example I like the mdn-like theme and here is my modified userchrome.css:

/*
  MDN-LIKE Theme - Mozilla
  Ported to CodeMirror by Peter Kroon <plakroon@gmail.com>
  Report bugs/issues here: https://github.com/codemirror/CodeMirror/issues
  GitHub: @peterkroon

  The mdn-like theme is inspired on the displayed code examples at: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

*/
.CodeMirror { color: #999; background-color: #fff; }
div.CodeMirror-selected { background: #cfc; }
.CodeMirror-line::selection, .cm-s-mdn-like .CodeMirror-line > span::selection, .cm-s-mdn-like .CodeMirror-line > span > span::selection { background: #cfc; }
.CodeMirror-line::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span > span::-moz-selection { background: #cfc; }

.CodeMirror-gutters { background: #f8f8f8; border-left: 6px solid rgba(0,83,159,0.65); color: #333; }
.CodeMirror-linenumber { color: #aaa; padding-left: 8px; }
.CodeMirror-cursor { border-left: 2px solid #222; }

.cm-keyword { color: #6262FF !important; }
.cm-atom { color: #F90 !important; }
.cm-number { color:  #ca7841 !important; }
.cm-def { color: #8DA6CE !important; }
span.cm-variable-2, .cm-s-mdn-like span.cm-tag { color: #690 !important; }
span.cm-variable-3, .cm-s-mdn-like span.cm-def, .cm-s-mdn-like span.cm-type { color: #07a !important; }

.cm-variable { color: #07a !important; }
.cm-property { color: #905 !important; }
.cm-qualifier { color: #690 !important; }

.cm-operator { color: #cda869 !important; }
.cm-comment { color:#777 !important; font-weight:normal; }
.cm-string { color:#07a !important; font-style:italic; }
.cm-string-2 { color:#bd6b18 !important; } /*?*/
.cm-meta { color: #000 !important; } /*?*/
.cm-builtin { color: #9B7536 !important; } /*?*/
.cm-tag { color: #997643 !important; }
.cm-attribute { color: #d6bb6d !important; } /*?*/
.cm-header { color: #FF6400 !important; }
.cm-hr { color: #AEAEAE !important; }
.cm-link { color:#ad9361 !important; font-style:italic; text-decoration:none; }
.cm-error { border-bottom: 1px solid red !important; }

div .CodeMirror-activeline-background { background: #efefff; }
div span.CodeMirror-matchingbracket { outline:1px solid grey; color: inherit; }

.CodeMirror { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAyCAYAAAAp8UeFAAAHvklEQVR42s2b63bcNgyEQZCSHCdt2vd/0tWF7I+Q6XgMXiTtuvU5Pl57ZQKkKHzEAOtF5KeIJBGJ8uvL599FRFREZhFx8DeXv8trn68RuGaC8TRfo3SNp9dlDDHedyLyTUTeRWStXKPZrjtpZxaRw5hPqozRs1N8/enzIiQRWcCgy4MUA0f+XWliDhyL8Lfyvx7ei/Ae3iQFHyw7U/59pQVIMEEPEz0G7XiwdRjzSfC3UTtz9vchIntxvry5iMgfIhJoEflOz2CQr3F5h/HfeFe+GTdLaKcu9L8LTeQb/R/7GgbsfKedyNdoHsN31uRPWrfZ5wsj/NzzRQHuToIdU3ahwnsKPxXCjJITuOsi7XLc7SG/v5GdALs7wf8JjTFiB5+QvTEfRyGOfX3Lrx8wxyQi3sNq46O7QahQiCsRFgqddjBouVEHOKDgXAQHD9gJCr5sMKkEdjwsarG/ww3BMHBU7OBjXnzdyY7SfCxf5/z6ATccrwlKuwC/jhznnPF4CgVzhhVf4xp2EixcBActO75iZ8/fM9zAs2OMzKdslgXWJ9XG8PQoOAMA5fGcsvORgv0doBXyHrCwfLJAOwo71QLNkb8n2Pl6EWiR7OCibtkPaz4Kc/0NNAze2gju3zOwekALDaCFPI5vjPFmgGY5AZqyGEvH1x7QfIb8YtxMnA/b+QQ0aQDAwc6JMFg8CbQZ4qoYEEHbRwNojuK3EHwd7VALSgq+MNDKzfT58T8qdpADrgW0GmgcAS1lhzztJmkAzcPNOQbsWEALBDSlMKUG0Eq4CLAQWvEVQ9WU57gZJwZtgPO3r9oBTQ9WO8TjqXINx8R0EYpiZEUWOF3FxkbJkgU9B2f41YBrIj5ZfsQa0M5kTgiAAqM3ShXLgu8XMqcrQBvJ0CL5pnTsfMB13oB8athpAq2XOQmcGmoACCLydx7nToa23ATaSIY2ichfOdPTGxlasXMLaL0MLZAOwAKIM+y8CmicobGdCcbbK9DzN+yYGVoNNI5iUKTMyYOjPse4A8SM1MmcXgU0toOq1yO/v8FOxlASyc7TgeYaAMBJHcY1CcCwGI/TK4AmDbDyKYBBtFUkRwto8gygiQEaByFgJ00BH2M8JWwQS1nafDXQCidWyOI8AcjDCSjCLk8ngObuAm3JAHAdubAmOaK06V8MNEsKPJOhobSprwQa6gD7DclRQdqcwL4zxqgBrQcabUiBLclRDKAlWp+etPkBaNMA0AKlrHwTdEByZAA4GM+SNluSY6wAzcMNewxmgig5Ks0nkrSpBvSaQHMdKTBAnLojOdYyGpQ254602ZILPdTD1hdlggdIm74jbTp8vDwF5ZYUeLWGJpWsh6XNyXgcYwVoJQTEhhTYkxzZjiU5npU2TaB979TQehlaAVq4kaGpiPwwwLkYUuBbQwocyQTv1tA0+1UFWoJF3iv1oq+qoSk8EQdJmwHkziIF7oOZk14EGitibAdjLYYK78H5vZOhtWpoI0ATGHs0Q8OMb4Ey+2bU2UYztCtA0wFAs7TplGLRVQCcqaFdGSPCeTI1QNIC52iWNzof6Uib7xjEp07mNNoUYmVosVItHrHzRlLgBn9LFyRHaQCtVUMbtTNhoXWiTOO9k/V8BdAc1Oq0ArSQs6/5SU0hckNy9NnXqQY0PGYo5dWJ7nINaN6o958FWin27aBaWRka1r5myvLOAm0j30eBJqCxHLReVclxhxOEN2JfDWjxBtAC7MIH1fVaGdoOp4qJYDgKtKPSFNID2gSnGldrCqkFZ+5UeQXQBIRrSwocbdZYQT/2LwRahBPBXoHrB8nxaGROST62DKUbQOMMzZIC9abkuELfQzQALWTnDNAm8KHWFOJgJ5+SHIvTPcmx1xQyZRhNL5Qci689aXMEaN/uNIWkEwDAvFpOZmgsBaaGnbs1NPa1Jm32gBZAIh1pCtG7TSH4aE0y1uVY4uqoFPisGlpP2rSA5qTecWn5agK6BzSpgAyD+wFaqhnYoSZ1Vwr8CmlTQbrcO3ZaX0NAEyMbYaAlyquFoLKK3SPby9CeVUPThrSJmkCAE0CrKUQadi4DrdSlWhmah0YL9z9vClH59YGbHx1J8VZTyAjQepJjmXwAKTDQI3omc3p1U4gDUf6RfcdYfrUp5ClAi2J3Ba6UOXGo+K+bQrjjssitG2SJzshaLwMtXgRagUNpYYoVkMSBLM+9GGiJZMvduG6DRZ4qc04DMPtQQxOjEtACmhO7K1AbNbQDEggZyJwscFpAGwENhoBeUwh3bWolhe8BTYVKxQEWrSUn/uhcM5KhvUu/+eQu0Lzhi+VrK0PrZZNDQKs9cpYUuFYgMVpD4/NxenJTiMCNqdUEUf1qZWjppLT5qSkkUZbCwkbZMSuVnu80hfSkzRbQeqCZSAh6huR4VtoM2gHAlLf72smuWgE+VV7XpE25Ab2WFDgyhnSuKbs4GuGzCjR+tIoUuMFg3kgcWKLTwRqanJQ2W00hAsenfaApRC42hbCvK1SlE0HtE9BGgneJO+ELamitD1YjjOYnNYVcraGhtKkW0EqVVeDx733I2NH581k1NNxNLG0i0IJ8/NjVaOZ0tYZ2Vtr0Xv7tPV3hkWp9EFkgS/J0vosngTaSoaG06WHi+xObQkaAdlbanP8B2+2l0f90LmUAAAAASUVORK5CYII=); }

This along with the Roboto Slab and Iosveka Fixed fonts gives me the following:


2 Likes

Hello,

I'm not sure if this is the right place to post it, sorry.
Some changes were added to Joplin in the past month that changed the style (colors, fonts, etc) of the Markdown editor (#5174 Codemirror theme update // #5314 Improved Markdown editor code styling // Added margin for readability, among other things).

In this attempt, I wrote some custom CSS put in the file userchrome.css that outclass the regular CSS, for the Light theme.

Here is what it look like:

On github:

Cheers,

3 Likes

Since I've been writing HTML in joplin, I've also been trying to link into other notes pages in html, to use instead of the self-contained Markdown formatted links between notes. I've gone through all the back and can't find any progress on the new selector you said you created, so I wonder if it's been fixed or if there's any other solution? :joy:

:question:

I'm confused. I didn't say I had created anything.

I'm really sorry I forgot to mention the specific entry you mentioned before, I'll mark it now, not sure if I've expressed it clearly and accurately enough.

The answer is in the quote you posted.

The selector is a[data-resource-id] however it is nothing to do with HTML linking. It is a CSS selector that enables a particular aspect of Joplin to be customised. In this case it enabled the colour of an internal link between notes within Joplin to be displayed in a different colour than the default.

This thread is about sharing tips on ways to use CSS to customise how Joplin looks.

Thank you very much for your prompt and patient answer, I misunderstood and thought you were trying to change the linking between html notes, but in fact it was just a good way to change the CSS style of the Markdown links. I'm already using the CSS you provided after changing the Markdown link style, and it works very well, thank you for your efforts. :star_struck:

Before using your CSS:
Before using your CSS:

After using your CSS:

After using your CSS:

Hi all,
For fun and testing purpose, I made a template to layout some notes like letters, with the address in the right place for a window envelope, the basic content and some filler text (lorem or whatever).
Letters are generated in their own notebook, with a dated title, and a default "letter" tag.
Below the markdown template and a screenshot for the rendered letter

---
template_notebook: 33291eb8837b44d4ab55eb6757ba1d82
template_title: {{#custom_datetime}}[]YYYY[-]MM[-]DD[ ]{{/custom_datetime}} – Letter to  
template_tags: courrier
---

<style>
	/*reset styles*/
html, body, h*, p, li*, ol, ul {}
	body {font-family: serif;}
	p {line-height: 115%;}
	li::first-letter {text-transform: none;}
	/*letter styles*/
	.addressblock {display: inline-block; margin-top: 50px; margin-left: 45%; margin-right: 1%; font-weight: 600; line-height: 110%;}
	address1, address2, address3, address4, address5, address6 {}
	.inviteblock, .letterblock, .signatureblock {margin-left: 5%;}
	.inviteblock {display: block; margin-top: 20px;}
	.letterblock {display: block; margin-top: 10px; text-align: justify;}
	.signatureblock {display: block; margin-top: 20px; text-align: left;}
	.importantblock {display: block; text-align: center; font-size: 105%; font-weight: 600;}
</style>

<div class="addressblock">
Address line 1<br />
Address line 2<br />
Address line 3<br />
Address line 4<br />
Address line 5<br />
Address line 6<br />
</div>

<div class="inviteblock">
In town, at {{#custom_datetime}}[]DD[ ]MMMM[ ]YYYY{{/custom_datetime}} <p>Dear Sir or Madam,
</div>

<div class="letterblock">
<span>Here is a long letter that should interest you. It doesn't start with "once upon a time", etc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat mi quis pretium semper. Proin luctus orci ac neque venenatis, quis commodo dolor posuere. Curabitur dignissim sapien quis cursus egestas. Donec blandit auctor arcu, nec pellentesque eros molestie eget. In consectetur aliquam hendrerit.

Sed cursus mauris vitae ligula pellentesque, non pellentesque urna aliquet. Fusce placerat mauris enim, nec rutrum purus semper vel. Praesent tincidunt neque eu pellentesque pharetra. Fusce pellentesque est orci.
Integer sodales tincidunt tristique. Sed a metus posuere, adipiscing nunc et, viverra odio. Donec auctor molestie sem, sit amet tristique lectus hendrerit sed.

Cras sodales nisl sed orci mattis iaculis. Nunc eget dolor accumsan, pharetra risus a, vestibulum mauris. Nunc vulputate lobortis mollis. Vivamus nec tellus faucibus, tempor magna nec, facilisis felis. Donec commodo enim a vehicula pellentesque. Nullam vehicula vestibulum est vel ultricies.

Aliquam velit massa, laoreet vel leo nec, volutpat facilisis eros. Donec consequat arcu ut diam tempor luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vitae lacus vel leo sodales pharetra a a nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam luctus tempus nibh, fringilla dictum augue consectetur eget. Curabitur at ante sit amet tortor pharetra molestie eu nec ante. Mauris tincidunt, nibh eu sollicitudin molestie, dolor sapien congue tortor, a pulvinar sapien turpis sed ante. Donec nec est elementum, euismod nulla in, mollis nunc.

</span>
</div>

<div class="signatureblock">
Signature
</div>

The result

4 Likes