Hide button switch Markdown and WYSIWYG

Hi, i want to hide the button that switches between Markdown and WYSIWYG in Editor.

Best regards - Carsten

Joplin 2.8.8 (prod, darwin)
Client-ID: 75696ff89d3a4a4f99070c7c17be83bb
Sync-Version: 3
Profil-Version: 41
Unterstützter Schlüsselbund: Ja
Revision: c2a6a13

1 Like

Thanks, works fine, Is there a kind of CSS Selectors Reference for Jolin?

There isn't really a single place.

Best resources are the Introduction to customising joplin and Joplin Customization wiki posts.

The former teaches you how to find elements yourself for styling, the second mostly features common elements that people want to style.

Another is the Share your CSS topic where people share anything they want from whole themes to little modifications.

1 Like

Interestingly, I just tried to implement that in my new OS (ArchLabs) and it doesnt seem to be working for me now

I hope I havent done something daft, ........ again!

My userchrome.css:

/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */

div.editor-toolbar div button {
	/* removes the WYSIWYG button */
	 display: none !important;

Joplin 2.8.8 (prod, linux)

Client ID: 289b819ae45a4a27a4567c37def14978
Sync Version: 3
Profile Version: 41
Keychain Supported: No

Revision: c2a6a13

That css in userchrome.css is working for me using v2.8.8 on Linux.

Have you fully shutdown (File > Quit) and restarted Joplin so that it can load the modified css as it starts?

Funny ....
Yes, I am even rebooting

I have tried deleting all plugins, disabling spellcheck and pretty much everything I can think of

I am using this:

3 aur/joplin-appimage 2.8.8-1 (+59 5.90) (Installed)
    The latest stable AppImage of Joplin - a cross-platform note taking and to-do app


That seems really odd. It definitely works normally. Maybe inspect the element with the dev tools and see if the CSS is being overruled by anything?

Or take a screenshot of the editor and compare it to after you add the CSS to see if somehow you are targeting some other element. I doubt it but it is always possible.

Will try that approach tomorrow - could you be more specific please - that is stretching :slight_smile: my abilities and knowledge very, very, very thin

So out of curiosity (as I've not heard of it before) I installed a VM of archlabs with dwm and installed the same AUR package as you, added the CSS and it works just fine.

I would check the following:

  • Double check you are editing the right file in the right place - open the profile dir from Joplin (Help > Open profile directory) and check the userchrome in there is the same one as is being opened from Options > Appearance > Custom stylesheet for Joplin-wide app styles. It should be in ~/.config/joplin-desktop.

  • Open Joplin and go Help > Toggle development tools.
    See this thread I posted before for a better description but basically press the little "arrow in a box" icon in the top left of the dev tools and click the editor button you are trying to remove.

You should see something like this:
In the elements section.

In the styles section at the bottom you can see the actual styles being applied - as I can't emulate yours exactly I applied a red border to my button which is being overwritten (as shown by the strikethrough) but you can still see that the CSS was valid and it would apply it if it wasn't being overruled.


Check to see if you have anything like that in there for the same selector but with display: none.

AL rocks!

My /home/leigh/.config/joplin-desktop/userchrome.css:
(I had edited out the comment line in my previous posts to see if that was the problem)

div.editor-toolbar div button {
	 display: none !important;

I have this:



EDIT: I just tried

  • uninstalling all plugins
  • making a new userchrome.css and pasting in from the post linked above link

I am using Openbox

I'm honestly at a bit of a loss, it just looks like Joplin isn't even seeing the file?

If you delete/rename the userchrome.css then use the options menu in Joplin to open the stylesheet, does it regenerate in the correct place?

Also try to see if any other CSS works at all in that file e.g.

div.sidebar {
  background-color: #FF69B4;

Yes it does

No, it doesnt do anything (with light or dark theme, just in case)

button[title="New to-do"] {
	/* button - for keyboard warriors - removes the new to-do button */
	 display: none;

Works tho

I have i3 set up on TTY2 so I thought I'd try there
I put the code for hiding the toggle editor button in my userchrome.css and started Joplin in i3
The button was still there
But when I clicked on it it dissapeared!
I shut down Joplin and reopened it in Openbox on TTY1 and no button
shutdown and restarted Joplin
the bloody button is back :rofl:

Yeah, I just looked at a previous post and realised something, I never even considered anyone trying to remove the button to stay inside the richtext editor - it is virtually always people wanting to disable it. I only just spotted the elements in the dev tool html you posted.


div.joplin-tinymce button.richText-active {
  display: none !important;

No matter what I try I cant replicate what happened before in i3
but it did disappear!

I dont want to use the WYSIWYG editor - I dont want to accidently go into it - hence removing the button
I may have wanted the WYWIWYG editor in the past tho - cant remember what I had for breakfast even :slight_smile: )

The first CSS (div.editor-toolbar div button) selector I think only works within the markdown editor, the one I just posted works in the richtext editor as it has a different toolbar. The pic you posted before has a joplin-tinymce div which must mean you had the richtext editor on.

It also explains why clicking it when you saw it made it vanish, it doesn't exist on the editor you swapped to - the CSS was removing it.

Yup, I must have clicked on it when trying t sort things out - bloddy button :smiley:

This is with Markdown editor

I changed the flex to none manually in the dev tools and it got rid of the button