Share your CSS

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.

2 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

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

5 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:

23 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?