Request: Joplin Layout | css or redesign?

Features
1

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

1 Like
2

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
3

That is not working for me:

image
image882Ă—604 56 KB

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

Thx Tatoosh

4

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.

5

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

image
image845Ă—606 83.3 KB

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

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
7

It looks like

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

will do it

1 Like
8

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

image
image1427Ă—1078 149 KB

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;
}
2 Likes
9

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.

10

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

11

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

13

Thanks for the styles, the list of the classes and ids is very helpful for me. I wonder if there’s any way to format the different headings (h1, h2, …) in markdown-view?

14

Yeah, you need to change that in the userstyle.css (the one for the markdown view with “normal css names”.

E.g.:

/* For styling the rendered Markdown */

h1
{
	background-color: #fff !important;
}

h2
{
	background-color: #ccc !important;
}
15

But that’s for rendered markdown, right? I’m not using the rendered markdown window, I’m just using the markdown-editor.

16

@scriptor

From what I have found the # symbol used for marking headings is controlled by a <span> tag with the classes .ace-heading and .ace_1 (in which the number indicates the heading level). However the text after the markdown code is controlled by a separate <span> tag using only the class ace.heading. This would seem to mean that whilst you could control the # properties for each different heading level you could only control the heading text itself as a whole and not by level.

editor

If you want to have a play you could use the below as a starting point and if anyone knows a way of altering the text properties by level as well, please chip in!

.ace_heading {
	font-weight: bold; /* makes all headings bold - both # symbol and text*/
}

.ace_heading.ace_1 {
	font-size: xx-large; /* makes # xx-large */
	color: red !important; /* changes # colour */
}

.ace_heading.ace_2 {
	font-size: x-large; /* makes ## x-large */
	color: orange !important; /* changes ## colour */
}

.ace_heading.ace_3 {
	font-size: large; /* makes ### large */
	color: green !important; /* changes ### colour */
}

.ace_heading.ace_4 {
	font-size:medium; /* makes #### medium */
	color: purple !important; /* changes #### colour */
}

The above was created just for testing this out. In no way do I imply that this selection of font size and colour is in any way pleasing to the eye!!

1 Like