How to change editor layout?

Operating system


Joplin version


What issue do you have?

Hi, is there a way to change the layout or organization of the built in editor section? For instance I was thinking to move the tags bar at the bottom to the top or to hide it if possible. Thanks.

1 Like

Yes, see this explainer: Introduction to customising Joplin (userchrome.css & userstyle.css)

Adding this CSS to the userchrome.css file hides the tag bar:

.tag-bar {
  display: none !important;
1 Like

Thanks so much. That code ended up hiding the tag bar and that blue "In NOTEBOOK" blue button in the editor, which is a little perplexing but it frees up a lot more space in the editor. And I can just right click a note in the sidebar to edit those settings. Thanks.

I would love to be able to move the tag bar to the top.

Is this somehow possible?

Many thanks!

That should not occur as the class .tag-bar is not used by the "In:Notebook" button.

Note that this button only appears if you have not selected a notebook in the sidebar on the left. If you select a notebook from your sidebar list it will not be there but if you select a tag from your sidebar list it will.

Clicking on the "In:Notebook" button when you can see it keeps you looking at the same note but switches you to its parent notebook, so the button disappears.

Ohhh, I didn't realize notes could exist without being in any notebook. Yes, after clicking Move to Notebook, the blue notebook button appeared in the editor for that note.

Add this CSS to userchrome.css to move the tag bar to the top:

.tag-bar {
  order: 1 !important;

.rli-editor > div > div > div div:not(.tag-bar) {
  order: 2 !important;

Wow thank you so much for this! Very kind of you.

I'm going to try this later and let you know how I get on.

Many thanks again.


This works perfectly and will be loved by all ex-Evernote users! Thank you so much again.