The most simplistic CSS

Support
1

In order to customize Joplin to my day in day out needs, it takes very little. All I would like to achieve is to change char size and line spacing in the notebook pane and in the notes pane. The overall zoom in and out commands do not work well for me. Could anybody tell me what to put into the userchrome file in order to achieve this goal ?
Thank you in advance

2

my css for notes pane (markdown editor, in edit mode)
saved as
C:\Users\my-user-name\.config\joplin-desktop\userchrome.css

/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
.CodeMirror-lines {
    line-height: 1.8em;
    letter-spacing: 1px;
	}
3

Strange enough, it has no effect on my Joplin app.
Here is what I do:

  • quit Joplin
  • open userchrome and add / edit values (e.g. 1.8em vs 2.8em vs ...)
  • save the file
  • restart Joplin
    and everything looks exactly as before. The settings dialog in Joplin shows that the file has changed and is used. And I made sure I am editing the file inside the correct / one-and-only profile folder.

Would you have any idea how it could go wrong ? (Joplin 2.6.10 on Mac)

4

What elements exactly are you trying to change?
The ones posted by @xbeta will change the spacing and line height of the text within the codemirror (i.e. markdown) editor.

If you want to change properties of the notebook and notes sidebars then you can use something like

div.list-item-container {
	height: 20px !important;
}
5

Thanks, it seems I misunderstood "For styling the entire Joplin app ...".
I'd like to change char size and line spacing in the notebook pane and in the notes pane.

I assume height changes line height only (?), so I would still need for char size ...

6

When you say notebook and notes pane do you mean the sidebar/note list? (F10, F11). Just making sure as notes pane is a bit ambiguous in case you meant the editor.
If so then the CSS class I posted before will allow you to target the elements within those areas.

7

I see, and yes, I mean the side bar, and the notes list, in default layout both to the left of the actual notes. I am trying to change the size of text in there (and how space is used efficiently) in relation to text size in the notes themselves. Otherwise zoom (which changes all text) would work.

Now that I realize the the check boxes within the notes list can cause problems when I change "height", I would ideally need a way to set different heights to side bar and notes list.

8

So the CSS I posted before will work for the item containers but they are overridden further into the CSS so font-size needs a different selector.

div.list-item-container {
	height: 20px !important;
	font-style: italic !important;
}

div.list-item-container > a {
	font-size: 10px !important;
}

Will syle the font and line spacing of the sidebars.

If you use todos then I think the checkboxes are also off so you might need to do:

div.todo-list-item > div {
	height: auto !important;
}

image

1 Like
9

And this works like a charm !

10

Sidebar is OK, but for Note List, there is a problem described here.

11

One related question: is there a (again "very simple") way to change the background colors of the two lists as well. I don't need colors really, but different shades of grey what have a major impact on readability in certain light conditions.

12

Just be warned you are going down the rabbit hole now of things that will start to look odd if you mess with them too much.

The basic background of the sidebar can be done with div.sidebar but if you also wanted to change the selected and hover colours to match then you will have to take other classes into consideration.

div.sidebar {
        background-color: #ff00ff !important;
}

div.list-item-container.selected {
        background-color: #32cd32 !important;
}

div.list-item-container:hover {
        background-color: #00ffff !important;
}

Likewise the notelist can be styled with div.rli-noteList > div > div > div but that will also target the box at the top with the search bar and buttons.
If you just want the list itself you can use div.note-list but you need to override the opacity too.
Like the other bar you may want to re-style the hover and selected colours too.

Any more than this and we are into full on theming territory rather than quick css hacks.

/* whole notelist panel */
div.rli-noteList > div > div > div {
  background-color: #800000 !important;
}

div.note-list .list-item-container {
  background-color: #808000 !important;
}

div.note-list .list-item-container:hover {
  background-color: #ffff00 !important;
}

div.note-list .list-item-container.selected {
  background-color: #000080 !important;
}

/* Just the bottom part of the note list panel, not the search box area*/
div.note-list {
  background-color: #000000 !important;
  opacity: 1;
}
1 Like
13

Thanks again. Here is what I copied / use - and it is as simple as it can get. What it does for me ? Readability if I spend a long time reading in Joplin, less strain on the eyes :wink: sort of.
I am using nothing but

div.list-item-container {
	height: 22px !important;
}
div.list-item-container > a {
	font-size: 14px !important;
}
div.todo-list-item > div {
	height: auto !important;
}
div.sidebar {
        background-color: #661957 !important;
}

What it produces is this ... if sb interested ... compare it to the original theme on your screen.

1 Like
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.