Home / GitHub Page

Request: Joplin Layout | css or redesign?

I like Joplin very much, but the UI is not very nice.
So i tried some custom css. Why not give a custom css for the notewriting frame??

Will there be a UI redesign or will u plan a more comfortable way to adjust the layout?
Thx, Tatoosh

There is.

Tools > Options > Appearance

and select

Custom stylesheet for Joplin-wide app styles

The file is userchrome.css and gets stored in the same place as your userstyle.css

2 Likes

That is not working for me:

I want other colors for h elements and so on.
Can u give me an advice please?

Thx Tatoosh

You can use the development tools to find the css element names.

See this post.

I haven’t modified my userchrome.css but if you want to change the colour, weight etc. of all the headers in the Markdown (#, ##, ### etc.) it looks like you would need to add something like:

.ace_heading {
	color: red;
	font-weight: bold;
}

to your userchrome.css.

Tried some variations, but only .ace_layer is working :frowning:

userchrome.css

.ace_content{
  color: green !important;
}

.ace_layer{
  color: yellowgreen;
}


.ace_heading {
	color: red;
	font-weight: bold;
}

.ace_editor{
  color: black;
}

.ace-chrome{
  color: grey;
}

It appears that the # headers are going bold but not changing colour, so there must be something else controlling it.

I am sorry but as I have not delved into this to any degree yet I cannot help any further. You have already discovered more than me!

Hopefully a far more knowledgable person on this forum can assist.

1 Like

It looks like

.ace_heading {
color: red !important;
font-weight: bold;
}

will do it

1 Like

I tried a lot more and now i got my first nice looking joplin UI :slight_smile:

userchrome.css

.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;
}
1 Like

I also played around with the ace headers, but I ran into a slight problem. I tried to set font-size: 1.1em, but the cursor still used the old font size, which means editing the header is tricky. I tried to change the cursor size as well for the heading, but no luck. My knowledge of CSS is pretty bad, so I’m sure I screwed up or it’s just not possible.

now i have a good solution and for me a well looking writing theme. thanks all for helping!

I never thought about changing the styles of the writer frame. It’s more clear with your custom CSS. Thank you!