Sidebar + Note List... How do I change their broken layout?

Operating system


Joplin version


Sync target


What issue do you have?

I am new to Joplin, it looks powerful, but if I say the configuration settings are a zoo, it's an understatement.

I can't figure out how to change the Sidebar and Note list appearance.

When Joplin starts, it shows a grey sidebar, it reminds me of Evernote. I prefer it to the white layout also because in the grey layout the notebooks are aligned left, not right (as is in the case of the white layout) and the sidebar looks more condensed in general and it also shows Tags which is not shown in the white layout for some reason.

As for the Note list, I would like to change the font size to make the font of the list bigger.

Also for the Note list, I have the issue with the buttons, the font and buttons are merged. The grey layout when Joplin starts shows the buttons correctly.

I know I could reset Joplin and start from scratch, but not sure if this would fix these issues and secondly that would be a bazooka method. Prefer if I could make changes manually. I am okay with editing CSS as I have done it for the Agenda panel font size so I am comfortable with it.

See sreenshots.


If it does this after loading plug-ins, what plug-ins do you have installed and have you tried to find out if a particular plug-in is causing the problem?

The first interface that shows briefly is the one on the bottom with the grey notebooks panel, that shows a 1-2 seconds, then it loads the interface on the top with the white panel.

I haven't installed any plugins, not that I know. Attached screenshots of plugins.

The installed White Theme plugin causes the unwanted white sidebar and merged buttons. Try disabling or deleting the plugin to fix those issues.

This CSS changes notebook list item font size:

.list-item-container > a > span.title {
  font-size: 14px !important;

I'd also recommend clicking all of those Update buttons to keep your plugins updated.


Got it, that was the white theme. I thought that was part of Joplin, didn't realize I enabled it myself there. Now is good.

But question about the font size..
The CSS code changes the font for the list of notebooks.

Do you know perhaps how to change font size for the list of notes?
This apparently doesn't work:

No plugin besides Backup is part of Joplin by default.

This CSS changes note list item font size:

.note-list-item span {
  font-size: 14px;

If note titles seem cramped within their containers, this CSS changes note list item container size:

.note-list-item-wrapper, .note-list-item {
  height: 30px !important;