Share your CSS

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

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


3 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,

4 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

5 Likes

Hi all,
this time, I propose you a model of newsletter set up in 2 columns, similar to the one of a newspaper.

The markdown template below

---
template_notebook: here your notebook target ID
template_title: {{#custom_datetime}}[]YYYY[/]MM[/]DD{{/custom_datetime}} The TinyVillage Newsletter
template_tags: newsletter,draft, 2columns
---

<style>
/*reset styles*/
h1, h2, h3, h4, p, a, strong, ul, ol, li {}
/*set headers*/
h1 {column-span: all; text-align: center;
color: #777799;}
h2 {column-span:2; text-align: left;
color: #7777AA;}
h3, h4 {color: #0077BB;}
/*set paragraphs*/
p {column-count: 2;column-gap: 5%;
line-height: 120%;
font-family: sans-serif;
text-align: justify;
text-justify: inter-word;
text-justify: inter-character;
hyphens: auto;
}
/* set lists*/
li::first-letter {text-transform: lowercase;;}
ol li::first-letter {text-transform: uppercase;}
ul {
margin-left: 5%;
color: #003333;
font-family: inherit;
font-style: italic;
}
/*set caracters*/
strong {font-weight: 600;
font-size: 100%;}
italic {color: #003333;}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
u {
  border-bottom: 0.5px, light, currentColor;
  }
/*set links*/
a:link {
  color: darkgreen;
  text-decoration: underline;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  font-size: 150%;
}
a:active {
  text-decoration: underline;
}
/*set hr lines*/
/* simple single */
hr.singleline {
  border-top: 2px solid #0077AA;
	padding-top: 1px;
}
/* dashed */
hr.dashes {
  border-top: 1px dashed #0077AA;
}
/* dotted */
hr.dots {
  border-top: 1px dotted #0077AA;
}
/* thick */
hr.thickline {
  border: 2px solid #0077AA;
}
/* thick double dotted  */
hr.doubledots {
  border: 4px dotted #0077AA;
  border-radius: 2px;
	padding-top: 2px;
}
/* styles for the bulletin purpose*/
chapo {column-count: 1;
	text-align: justify;
	font-family: sans-serif;
	font-style: italic;
	font-weight: 550;
}
note {top: -0.5em;
font-style: italic;
color: darkblue;
}
op {font-size: 100%;
color: #008877;
}
</style>
# Your TinyVillage Newsletter<br> {{#custom_datetime}}[]YYYY[-]MM[-]DD{{/custom_datetime}}
## Hello dear readers,

<div>
<chapo>Editorial: here some text from the newsletter staff. It could be long enough to demonstrate the chosen style. Nice! It spreads to both columns, just as I wished…</chapo>
</div>

## A two columns wide title for this first article[^1]

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.

## Article #2, with a picture
![d7e8e5fae5cb157024cabbfa65c9230e.png](:/578d33b596a0467fb1525cea5cce4eb3)
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.


<footer><hr class="singleline">
Put here your footer content and some text to fill the template
<hr class="singleline">
</footer>

<div class="footnote">

[^1]: You could modify the column count inside the CSS

</div>

A partial screenshot of rendered note

1 Like

Hi,
no attachment is displayed after uploading, I don't know why.
Sorry :frowning:

Hi,
I love your theme but I somehow cannot get it to work.

I have put userchome.css and userstyle.css in .config\joplin-desktop\ on windows.
My appearance config is "dark" with a editor font size of 14.
I have not installed the fonts yet.
Joplin version is 2.8.8.
Restarted multiple times.

Any advice?
Thank you very much in advance!

Edit:
I got the same problem with this CSS:

Hi, thank you for your feedback. I would check first if you didn't forgot to enable the rich markdown plugin and check this checkbox that is essential for my theme to work properly:

Currently I'm on an older version of Joplin but I'll will try the theme with the current version this evening and come back to you as soon as I know what's going on.

But just in case here you can find always the last version of my theme:
https://github.com/gonzalovsilva/joplin-dark-theme

Hi, thanks for the reply!
I have installed and enabled the rich markdown plugin, but still nothing has changed.
Any help would be highly appreciated!

Currently I've updated and now with the last version(2.8.8) on my side it's working normally.
Are you sure that you followed all the instructions written here: https://github.com/gonzalovsilva/joplin-dark-theme ?

Now I am at home on my Linux PC. There it is indeed working.
On my Windows PC at work not. Same settings... Don't know why.

I prefer to have the complete note like one page and not splitted into 2-3 columns.
What settings should I adjust in the userstyle.css to achieve that?

Thank you very much in advance!