Home / GitHub Page

Share your CSS

Thanks. Trying to make it work in windows by dumping them in the .config\joplin-desktop folder. No luck. Great job on the color scheme!

You have to copy just the 2 css files into the profile directory. On macOS I clone the repo and create 2 symlinks, but Windows works a bit different. (I don’t think Windows has folders that start with a dot.)
I don’t know the location of the profile folder on Windows, but it will tell you in Preferences.

Done. It works now. Looks great. So much easier to read everything now!

That’s why I made those small changes. :wink: As you can see, it’s nothing fancy, but it helps with legibility.

1 Like

7 posts were split to a new topic: Use customized css

7 posts were split to a new topic: CSS modifications

Let me share my Neon Midnight Mint themed userstyle.css with you guys! I spent quite some time to tune the color to a balance that I really like. After reading some of the css post above, I think I will also invest some time to change the color in the editor side in the future.

pre {
behavior:url(“https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js”)
}

body {
  background-color: #212432;
  color: #D6FFEF;  
  font-size: large;
  /*font-family: "DFKai-SB", "KaiTi", "Times New Roman", "宋体", Times, serif;*/

  margin:0;
  p{margin:0}
  ul{margin:0}
  pre{margin:0}
  span{margin:0}
}

a:link{
  color: #4BBFEF;
  text-decoration: underline;
}

b,
em {
color: #f1ce00;
text-shadow: 0px 0px 2px #FF5E98, 0px 0px 5px rgba(255, 94, 152, 0.2);
text-decoration: underline;
}

b,
strong {
font-weight: bold;
color: #2AF500;
text-shadow: 0px 0px 1px #2CFF00, 0px 0px 5px rgba(42, 245, 0, 0.3), 0px 0px 10px rgba(42, 245, 0, 0.2), 0px 0px 20px rgba(42, 245, 0, 0.1), 0px 0px 30px rgba(42, 245, 0, 0.05);
}

blockquote::before{
  color: #FF9957;
}

blockquote {
  color: #FF9957;
}


dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: bold;
}

ul li{
  background-color: #292D3E;
  color: #85E785;
}

ul li li{
  background-color: #343A4F;
  color: #E4DB74;
}

ul li li li{
  background-color: #565870;
  color: #BF9AFF;
}

ul li li li li{
  background-color: #565870;
  color: #F2711D;
}

ul li li li li li{
  background-color: #565870;
  color: #4D9DFF;
}

body {
  counter-reset: h1counter;
}


h1 { counter-reset: h2counter; margin: 0em}
h2 { counter-reset: h3counter; margin: 0em}
h3 { counter-reset: h4counter; margin: 0}
h4 { counter-reset: h5counter; margin: 0}
h5 { counter-reset: h6counter; margin: 0}
h6 {}

h1:before {
    counter-increment: h1counter;
    content: counter(h1counter) ".\0000a0\0000a0";
}

h2:before {
    counter-increment: h2counter;
    content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
}

h3:before {
    counter-increment: h3counter;
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
}

h4:before {
    counter-increment: h4counter;
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
}

h5:before {
    counter-increment: h5counter;
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ".\0000a0\0000a0";
}

h6:before {
    counter-increment: h6counter;
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) ".\0000a0\0000a0";
}



h1 {
font-size: 2em;
line-height: 1.2;
background-color: #080808;
color: #2FDEB6;
border-bottom: 1px solid #eee;
padding: 0 0em;
text-shadow: 1px 1px 2px #1CA686;
}


h2 {
font-size: 1.75em;
line-height: 1.2;
background-color: #080808;
color: #3CDCBE;
border-bottom: 1px solid #eee;
padding: 0 1em;
text-shadow: 1px 1px 2px #269983;

}

h3 {
font-size: 1.5em;
line-height: 1.2;
padding: 0 2em;
background-color: #080808;
color: #84F0DB;
text-shadow: 1px 1px 1px #58A697;
}

h4 {
background-color: #080808;
color: #AEF2E5;
}
6 Likes

Awesome, I will add the nested counters for the headings to my css repo as well. I’ve been thinking about this for a while. I wish there was a way, one could toggle that behavior. Restarting the client for css changes is a bit annoying. I’m wondering, if there’s a way to apply changes dynamically.
I think to remember that Laurent mentioned at one point to allow scripts to be called from Joplin. This would be a good use-case for such a script/action.

3 Likes

9 posts were split to a new topic: Toggle headings numbering

Just pitching in with a bit more info: Windows has no problem with folders that start with a dot. (If you name something .name and it gets immediately renamed to just name, that’s probably Windows trying to be user-friendly or whatever. In that case, just write .name. and it gets changed to .name.)

And while symlinks are not as ubiquitously used under Windows as they are under Linux, they’re still available. (If needed, google ‘ntfs’ + hardlink, symbolic link or junction.)

Nice and impressive collection of CSS… I can’t wait to start stealing interesting settings…

But…

In issue https://github.com/laurent22/joplin/issues/2646 Laurent explicitly states:

There’s unfortunately not guarantee that the HTML will remain stable from one version to the next. In general userstyle.css is “use at your own risk” (or better, don’t use it, but that’s up to the user).

So if the HTML can (and will, and did) change from one version to the next and userstyle.css is officially discouraged, what’s the use of having this in Joplin?

Mermaid - Chart Widths

I found that when using Mermaid pie charts the chart would expand to fill all the available space. Therefore if you had a pie chart in a note with Joplin maximized on a large screen the pie chart was huge.

After some searching / experimenting I found that by adding the below to userstyle.css you can restrict the width of Mermaid charts.

svg[id^="mermaid-"] {
	width: 500px;
}

or maybe,

svg[id^="mermaid-"] {
	min-width: 200px;
	max-width: 500px;
}

There is also a “side-effect”. I previously reported an issue where having a flowchart without a “node” on its left side appeared to be cut off on its left.

cutoff

This was closed as a Mermaid issue as it seems that when a chart is on the left Mermaid does not draw the “empty” line.

However using the above css moves the flowcart out from the left and the line is drawn!

This setting may cause problems for those with horizontal charts and possibly using % rather than px would be better, but hopefully it may assist someone else or act as a starting point for something better…

Edit: Added min/max-width variant.

4 Likes

What a weird question.
Clearly, plenty of us want to use userstyles, and don’t care if they break sometimes. :wink:

3 Likes

I am not sure if this is applicable to your use case, but hitting Command-R (Mac) inside the Development Tools window force reloads the app, so you get CSS changes without having to restart the app.

Since I usually have that window open when I am messing with css, it was a little faster than restarting each time. Happened upon it by accident, so thought I’d share :slight_smile:

5 Likes

Really?

I have a vast archive of notes collected over the years (decades). I would really hate to see old notes suddenly looking different (even becoming unreadable/unusable) due to unsollicited changes in the rendering engine.

Even without custom CSS Joplin keeps changing note appearance from version to version, which I must consider a big disadvantage when it comes to serious, long term note taking and collecting.

Really. Since all the notes are just markdown, what could Joplin possibly do to make them “unreadabe” or “unusable”? It’s text files.

And if you don’t like userstyles changing the look of your notes, it’s actually very easy not to use userstyles. Someone else’s userstyles stop working because of Joplin’s internal changes? That won’t affect your notes one bit.

Btw, for me, this is exactly why I like my notes in Joplin: the chance I will suddenly lose access to them (and I include their becoming ‘unreadabe’ in that) is virtually nil.
Since this is a point of interest to me (I suspect for many of the same reasons as it is to you): what system/s do you currently use, instead of/beside Joplin?
I do realize this is veering off topic a bit, so feel free to DM me if that’s better.

2 Likes

Mine can be found here. For future readers, here’s a deep link to that file at the time I made this post: link.

You will need to have this font installed if you want it to look right.

I deliberately tried to create something LaTeX-like, because I work in that a lot and like the way it looks.

4 Likes

Thanks for this, huge time saver!

For anyone on Linux F5 in the dev tools does the same thing, I’d assume on Windows as well.

You can refresh really fast if you press Alt+H to open help, T to open devtools, then F5.

3 Likes

Hi, made a repo to share the first version of my dark theme if anyone is interested: https://github.com/amandamcg/joplin-theme

Thanks to everyone who shared their tips!

9 Likes

I’ve now added a warning in the app and moved the setting under Advanced Options to make this clear.

They are discouraged because indeed many users don’t like when their style break from one version to the next, and that’s understandable. However I won’t make a commitment to keep the HTML structure stable as that would be the end of many improvements that could otherwise be made.

So that’s why we allow usercss, as it’s easy for us to allow it and many users want it, however it’s your custom file so it’s your job to update it as the app evolves.

3 Likes