Is there a way to hide the formatting bar

Support
1

is it possible to hide the formatting bar and title bar; because it takes too much reading space for me

2

@dundundunnn welcome to the forum.

Just a fellow user. I am not aware of any way to hide the title and formatting bars. Also I would doubt that a feature suggestion to add the ability to “roll-up” the toolbars would gain much traction as the interface is currently being redesigned.

3

Try adding this in the custom style sheet for Joplin.

.editor-toolbar {
    display: none !important;
}
1 Like
4

I understood the OPs post as wanting to be able to hide (temporarily?) the title field and editing toolbar to gain a bit of “real estate” when reading notes.

1 - The first option actually removes the text labels from the toolbar buttons (new notebook, new note, new todo etc.)

2 - That second option is a bit of a brutal one! It removes the editing toolbar as well as the the tag / metadata toolbar above it. So although you can add tags and trigger the external editor using a note’s right-click menu, there is no longer access to the forward / backward arrows and you cannot edit metadata or set a reminder. It leaves the tags themselves but squashes them up against the underside of the note title field.

Neither of these option are temporary, in that being a userchrome.css setting you cannot easily switch between displaying them or not.

Mods
Mods862Ă—186 8.82 KB

5

You’re right. The first option shouldn’t be there.

The second one is what I use when I want some more reading space.
Though I agree it is a bit brutal!

1 Like
6

I agree that removing the entire editor-toolbar is a bit brutal.

However since we are discussing this, is there a way to use userChrome.css to remove the bottom of the two bars over the note (the one featuring the formatting commands like bold, italic etc) while leaving the bar above (with the arrows and tags) visible?

I would be happy to be able to do that :slight_smile:

7

Funnily enough Joplin used to hide the formatting toolbar when in viewer mode but it seems that it came back a few releases ago after some code changes.

Anyway, from what I can see they both use the editor-toolbar class and from my limited knowledge I cannot see a way to differentiate between the two. I can get any disabled buttons to disappear but it does not actually remove the bar itself.

8

It would certainly make sense to hide the formatting toolbar in viewer mode because all the icons are grayed out anyway. Since they cannot be used their sole function is to take up space unnecessarily :slight_smile:

1 Like
9

Bumping an old thread, but the following CSS in userchrome.css file will make it so the formatting bar is hidden by default and shows after hovering the title or time:

div:has(> .title-input):hover + div .editor-toolbar {
    display: flex !important;
}
div:has(> .updated-time-label):hover .editor-toolbar {
    display: flex !important;
}
.editor-toolbar {
    display: none !important;
}
.editor-toolbar:hover {
    display: flex !important;
}
1 Like
10

This CSS works most of the time. When the searchbar is in use, hovering the time works as intended, but hovering the title doesn't show the toolbar. The toolbar doesn't show at all and isn't hidden behind the In: notebook button <div>.

11

This CSS fixes the issue I brought up:

div:has(> .title-input):hover + div + div .editor-toolbar {
  display: flex !important;
}