Share your CSS

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

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

My userstyle.css and userchrome.css are here:

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!