My CSS is a little complicated, so I created a post on my blog. Here is a screenshot:
9 Likes
Very nice style, thank you for sharing it. Besides being a very useable and well thought out design, it is well laid out an just what I needed to learn css syntax
Here’s mine, it looks like github.
* {
color: #24292e;
font-family: "sf pro display", "Segoe UI",Helvetica,Arial,sans-serif;
}
h1 {
margin-top: 0 !important;
padding-bottom: .3em;
border-bottom: 1px solid #eaecef;
font-size: 2em;
font-weight: 600;
line-height: 1.25;
}
h2 {
font-size: 1.5em;
padding-bottom: .3em;
border-bottom: 1px solid #eaecef;
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
h3 {
font-size: 1.25em;
font-weight: 600;
line-height: 1.25;
margin-bottom: 16px;
margin-top: 24px;
}
pre {
border-radius: 3px;
background-color: #f6f8fa;
}
a {
color: #0366d6;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
hr {
height: .25em;
padding: 0;
margin: 24px 0;
background-color: #e1e4e8;
border: 0;
}
td {
padding: 6px 13px;
border: 1px solid #dfe2e5;
}
tr:nth-child(even) {
background-color: #f6f8fa;
}
7 Likes
Hi,
My stylesheet to format my messages to the members of my association.
h1, h2, h3, h4, p, a, strong, ul, ol, {}
h1 {text-align: center;}
h1 {color: #008877;}
h2 {text-align: left;
color: #007700;}
h3, h4 {color: #2222FF;}
p {line-height: 200%;
font-family: Courier, monospace;
text-align: left;
}
op {font-size: 120%;
color: #008877;
}
strong {font-size: 120%;}
italic {color: #003333;}
ul {
margin-left: 5%;
color: #003333;
font-family: Courier, monospace;
font-style: italic;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
note {top: -0.5em;
font-style: italic;
color: darkblue;
}
u {
border-bottom: 0.5px, light, currentColor;
}
a:link {
color: darkgreen;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
font-size: 150%;
}
a:active {
text-decoration: underline;
}
chapo {
font-family: sans-serif;
font: italic arial sans-serif;
font-weight: bold;
}
2 Likes
26 Likes
Are the css for the built in themes available? They would make for a great starting point for changes
5 Likes
Maybe it is a good idea to build a repo to collect the Joplin theme?
Does Joplin need to be set to a certain theme in order for your styles to work?
My theme is for Dark mode, but also works for Solarized Dark. I haven’t tried the other ones. At one point I might create another folder for the Light theme, but since I’m not using it the priority for that is very low.
But others have created themes that were designed with the light theme in mind.
2 Likes
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.
1 Like
That's why I made those small changes. 
As you can see, it's nothing fancy, but it helps with legibility.
3 Likes
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;
}
8 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.
5 Likes
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 Supressing checkboxes · Issue #2646 · laurent22/joplin · GitHub 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?