Share your CSS

I would be curious if anyone would care to share their userstyle.css snippets and perhaps a screenshot?

18 Likes

Curious too…

I’ll start. I like my list numbers to be bold, and I thought it might be nice to have them red as well.

ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}

ol > li {
margin: 0;
padding: 0 0 0 2em;
list-style-type: none;
counter-increment: item;
}

ol > li:before {
float: left;
width: auto;
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
color: red;
content: counter(item) ".";
}

Before:

ac119dafa98b7a5782e26758ace229b9

After:

3 Likes

Thanks for this contribution that make me understand that the CSS concerns only the rendered markdown, not the raw markdown editor !!

2 Likes

I don't use any custom CSS yet, but I'm willing to start, if you have something useful.

Dunno what I'd need fat red list numbering for, but meh, I'll give it a go. :smiley:

image

Red was too red, so this is my Dark theme with Crimson.

… then I got annoyed that my unordered lists don’t match colors. Also changed the Mark color from yellow to orange, so it’s less jarring. I ended up with this.

image

ol {
    margin: 0 0 1.5em;
    padding: 0;
    counter-reset: item;
}

ol>li {
    margin: 0;
    padding: 0 0 0 2em;
    list-style-type: none;
    counter-increment: item;
}

ol>li:before {
    color: crimson;
    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 0 0 2em;
    /* Remove default bullets */
    list-style: none;
}

ul li::before {
    color: crimson;
    content: "\2022";
    display: inline-block;
    float: left;
    font-weight: bold;
    padding-right: 0.3em;
    width: 1em;
}

mark {
    background-color: orange;
}

Yeah, I’ve lost the bullet point type change when nesting lists. Maybe I should look at how to fix that… someday.

5 Likes

Here is my userstyle.css, stolen from here and there and sometimes changed to my requirements ... :wink:

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i');

body {
font-family : 'Open Sans', sans-serif;
font-weight : 300;
font-size : 12pt;
line-height : 1.42em;
color : #EEEEEE;
background-color : #1D2024;
}
p a {
border-bottom : 1px solid #453886;
color : #453886;
color : #FB667A;
padding-bottom : 0.25em;
text-decoration : none;
}
a:hover, a href:hover {
background-image : url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position : bottom;
background-repeat : repeat-x;
background-size : 10%;
border-bottom : 0;
padding-bottom : 0.3em;
text-decoration : none;
color : #FB667A;
background-color : yellow;
}
kbd {
color : #1D2024;
background : #EEEEEE;
font-weight : bold;
letter-spacing : 0.1em;
padding-left : 0.5em;
padding-right : 0.5em;
}
blockquote q {
background : #f9f9f9;
border-left : 10px solid #ccc;
margin : 1.5em 10px;
padding : 0.5em 10px;
quotes : "??" "??";
line-height : 1em;
color : darkred;
}
blockquote q:before {
content : open-quote;
color : navy;
font : 1.5em/150% Georgia, serif;
}
blockquote q:after {
content : close-quote;
color : navy;
font : 1.5em/250% Georgia, serif;
}
p[lang="de-DE"] {
text-align : justify;
hyphens : auto;
background-color : red;
}
hr {
width : 98%;
height : 1px;
margin : 12px auto;
background : black;
border : salmon solid 1px;
border-radius : 5px;
}
p > a[href^="https://"], p > a[href^="http://"] {
font-size : 1.0em;
font-weight : 300;
padding-top : 0;
border : none;
padding-right : 0;
padding-left : 0.3em;
line-height : 1em;
font-family : 'courier new', sans-serif;
border : none;
color : salmon;
}


h1 {
text-transform : uppercase;
font-size : 1.3em;
font-weight : 600;
text-align : left;
line-height : 1.3em;
margin-top : 0em;
padding-bottom : 0em;
color : salmon;
}
h2, h3, h4, h5, h6 {
font-size : 1.3em;
font-weight : 400;
text-align : left;
line-height : 1.3em;
padding-top : 1em;
padding-bottom : 0em;
color : salmon;
}
h1, h2, h3, h4, h5, h6 {
width : 100%;
}

/*
h1:after, h2:after, h3:after, h4:after, h5:after, h6:after {
display : inline-block;
margin : 0 0 8px 20px;
height : 3px;
content : " ";
text-shadow : none;
background-color : #999;
width : 40px;
}
h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
display : inline-block;
margin : 0 20px 8px 0;
height : 3px;
content : " ";
text-shadow : none;
background-color : #999;
width : 40px;
}
*/

h2 a {
font-weight : 700;
text-transform : uppercase;
color : #FB667A;
text-decoration : none;
}


.blue {
color : #185875;
}
.yellow {
color : #FFF842;
color : gold;
}
.container th h1 {
font-weight : bold;
font-size : 1.8em;
text-align : left;
color : #185875;
color : navy;
}
.container td {
font-weight : normal;
font-size : 1em;
box-shadow : 0 2px 2px -2px #0E1119;
}
.container {
text-align : left;
overflow : hidden;
width : 80%;
margin : 0 auto;
display : table;
padding : 0 0 8em 0;
}
.container td, .container th {
padding-bottom : 2%;
padding-top : 2%;
padding-left : 2%;
}
.container tr:nth-child(odd) {
background-color : #323C50;
}
.container tr:nth-child(even) {
background-color : #2C3446;
}
.container th {
background-color : #1F2739;
background-color : lightblue;
}
.container td:first-child {
color : #FB667A;
}
.container tr:hover {
background-color : #464A52;
box-shadow : 0 6px 6px -6px #0E1119;
}
.container td:hover {
background-color : #FFF842;
color : #403E10;
font-weight : bold;
box-shadow : -1px 1px #7F7C21, -2px 2px #7F7C21, -3px 3px #7F7C21, -4px 4px #7F7C21, -5px 5px #7F7C21, -6px 6px #7F7C21;
transform : translate3d(6px,-6px,0);
transition-delay : 0s;
transition-duration : 0.4s;
transition-property : all;
}
@media (max-width:800px) {
.container td:nth-child(4), .container th:nth-child(4) {
display : none;
}
}
table {
border : navy dotted 1px;
border-collapse : collapse;
width : 100%;
}
td {
border : #999 solid 1px;
padding : 0.1em 1em;
background-color : #CEF6F5;
color : #024457;
}
th {
border : #999 solid 1px;
padding : 0.1em 1em;
background-color : #024457;
color : #CEF6F5;
}
.alternative {
background-color : #ddf;
}
.unterstreichen {
text-decoration : underline dashed lime;
}
.durchstreichen {
text-decoration : line-through;
}




/*
body{
  margin      : 0;
  padding     : 1.5em;
  font-family : Georgia,Utopia,Charter,serif;
}
*/

.example{
  margin-bottom : 1.5em;
}

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : green;
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

input[type=radio]:not(old):checked +  label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;

  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}


/** Abgewandelt aus Typora übernommen. initialize css counter 
https://philarcher.org/diary/2013/headingnumbers/
*/

body {counter-reset: h1}
h1 {
    counter-reset: h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset: h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}

/** put counter result into headings */
h1:before {
	text-transform:uppercase;
	margin-left: -0.5em;
    counter-increment: h1;
    content: counter(h1) "  "
}

h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) " "
}

h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) " "
}

h4:before,
h4.md-focus.md-heading:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " "
}

h5:before,
h5.md-focus.md-heading:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
}

h6:before,
h6.md-focus.md-heading:before {
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
}

/** override the default style for focused headings */
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
    color: inherit;
    border: inherit;
    border-radius: inherit;
    position: inherit;
    left:initial;
    float: none;
    top:initial;
    font-size: inherit;
    padding-left: inherit;
    padding-right: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* Für Passworte, die nicht gleich jeder sehen soll. */
/* Gleiche Farbe, wie der Hintergrund, der in dieser CSS definiert ist. */
.hidden {
  background: #1D2024;
  color: #1D2024;
  border-style: dashed;
  border-color: yellow;
  border-width: 1px;
  
  transition: background 0.5s ease;
}

.hidden:hover {
  background: yellow;
}

div.footnote, a:before  {

border-top: solid salmon 1px;
}

/* Abstand der Fußnoten voneinander. */
div.footnote, a  {
margin-bottom: 0.5em;
}

/* Damit die Fußnoten (ganz unten) nicht gelb sind beim Drüberfahren. */
div.footnote a:hover  {
background-color: transparent;
}

.footnote  {
margin-top: 0.5em;
padding-left: 0.5cm;
text-indent:-0.4cm;
padding-top: 0.3em;
padding-bottom: 0.3em;
font-size: 0.9em;
color: salmon;
line-height: 100%;

font-family: Garamond, serif;
font-weight: 300;
background-color: #101010;
}

/* Fußnoten im Text sollen salmon sein und eine Klammer haben. */
sup:after { 
content: ")"; 
color: salmon;
}




ol {
    margin: 0 0 1.5em;
    padding: 0;
    counter-reset: item;
}

ol>li {
    margin: 0;
    padding: 0 0 0 2em;
    list-style-type: none;
    counter-increment: item;
}

ol>li:before {
    color: salmon;
    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 0 0 2em;
    /* Remove default bullets */
    list-style: none;
}

ul li::before {
    color: salmon;
    content: "\2022";
    display: inline-block;
    float: left;
    font-weight: bold;
    padding-right: 0.3em;
    width: 1em;
}

mark {
    background-color: orange;
}

5 Likes

You forgot the screenshot. :wink:

2 Likes

What you have shared seems to be promising to fix the issue I have in my style css. My counters for the header does not increment themselves correctly. Could you share a screen shot for your rendered style?

Do you mean this?

I also could provide all styles with a template, if you have one.

3 Likes

After seeing Merlinuwe's, my little tweaks in userstyle.css feel kinda lame, but I'm posting them anyway. :sunny: :smile:

body { font-family: Calibri; }
pre, code { font-family: Consolas; }
.highlight { background-color: yellow; }
mark { background-color: yellow; }

Mostly I just wanted cleaner fonts that I already work with in other programs. And I like a nice clean yellow highlight, and don't particularly like the orangy color that seems to be the default.

I don't think there's much point in a screenshot for this!

3 Likes

body, p, ul, ol, {
font-family: ‘Open Sans’, sans-serif;
font-size: 14px;
}

pre, code, .inline-code {
font-family: ‘Inconsolata’, monospace;
font-size: 14px;
}

h1 {
font-weight: bold;
font-size: 24px;
border-bottom-style: none;
margin-bottom: 0;
padding-bottom: 0;
line-height: 1;
}

ul {
margin-left: 2em;
line-height: 1.1;
}

I am trying this now.
The one issue I have is the size of the fonts within tables. The fonts are too small for my liking. Any way to change that?

Impressive and inspiring, @merlinuwe!

And for everyone interested in styling: I’ve just added a contribution about mixing homebaked checkboxes in lists, tables, and whatever. The concepts exposed there were partly based on the ideas of @etcSudoers and @zblesk here. Thanks for sharing them.

@wallyreport

Try,

th, td {
    font-size: 24px;
}

Change the font size to whatever pleases your eye…

The ==mark== syntax and search facility both highlight the text by an orange background. However, you can affect their look in your userstyle.css:

mark                            { background-color: #BBDD66; }  /* green for your own marking */
mark[data-markjs]               { background-color: #F3B717; }  /* orange */
mark[data-markjs].mark-selected { background-color: #CF3F00; }  /* reddish orange */

Or, if you want green and orange switched, just:

mark[data-markjs]               { background-color: #BBDD66; }  /* green */
mark[data-markjs].mark-selected { background-color: #6B8E23; }  /* dark green */

Your own markings do not add attributes to the <mark> tag, as the search mechanism does. More technical backgrounds can be found here.

5 Likes

I find it impossible to concentrate when things are moving on the screen, and after struggling to stop the cursor from blinking, finally found a way to do this via CSS:

.ace_cursor-layer:not(.ace_hidden-cursors) .ace_cursor {
opacity: 1 !important;
}

This keeps the cursor a solid bar. The .ace_cursor-layer:not(.ace_hidden-cursors) bit allows Joplin to continue to dim the cursor when the editor pane loses focus.

4 Likes

A really simple change I have found useful is to add the below to userchrome.css

.ace_heading {
	font-weight: bold;
}

This makes any heading markdown #, ##, ### etc bold so as to stand out. I was surprised at how much this helps me navigate longer notes as the section headers really stand out in comparison to the rest of the text.

2020-02-07 22_05_23-Window

6 Likes

userchome.css

/*Tatoosh style*/

.ace_heading {
  color:#298d56 !important;
  font-weight: bold;
}

#note-editor{
  color: black !important;
}

.ace_emphasis{
  color: black !important;
  font-weight: bold;
}

.ace_blockquote{
  color: #298d56 !important;
  border-left: 1px solid #298d56;   
}

.ace_string{
  color: #85b096 !important;
  font-weight: bold;
}

.ace_support{
  color: #298d56 !important;
  font-weight: bold;
}

.ace_function{
  margin-left: 5px;
  /* color:#6f6f6f !important; */
  color: #85b096 !important;
  background-color: #f7f7f7;
  font-style: italic;
}

.ace_list{
   color:#313131 !important;
   font-family: monospace; 
}

.ace_strong{
  color: black !important;
  font-weight: bold;

userstyle.css (not really finished, so only parts)


  h1 {
    color: white;
    font-weight: 300;
    background-color: #414650;
    width: 100%;
    border: 3px solid  #414650;
  }
  
  h2 {
    color: white;
    font-weight: 400;
    background-color: #414650;
    width: 100%;
    border: 2px solid  #414650;
  }
  
  
  h3 {
    color: white;
    font-weight: 150;
    background-color: #606776;
  }
  
  h4 {
    color: black;
    font-weight: 100;
    width: 100%;
    text-decoration: underline;
  }


  .code,
  .inline-code {
    margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
  }

  .inline-code{
    color: #37684b !important;
    background-color: #f7f7f7;
  }
8 Likes