Setting to hide Markdown/WYSIWYG Button?

Hi

Manjaro
Joplin 2.4.12 (prod, linux)

Client ID: 00952e555f6c4f91b420f63ab8131624
Sync Version: 3
Profile Version: 39
Keychain Supported: No

Revision: b45585d

I think I am going to stick to the Markdown editor but see that changes with various Markdown plugins (in the 'Markdown', not the 'Plugin' section in settings) will get lost if I inadvertently change to the WYSIWYG editor (the 'toggle editor' button is very close to the 'toggle editor layout' button)

So, because of this, would it be possible to have the option to hide that editor choice button?

Thanks

You can remove it using CSS:

Thanks!
Could you direct me to a quick overview of which CSS files are involved and where to find them, please?
I am guessing its userstyle.css and userchrome.css, but where are they, what do they do and are there any others?
I know nothing about html but have changed things by trial and error / comparisons with what I want with success on my website.
Cheers

Tools > options > appearance > advanced will reveal the buttons that will open those css files directly with a small description of each one. Each file also has a header comment explaining which is which but essentially userstyle is for rendered markdown and userchrome is for literally everything else.

I know nothing about html but have changed things by trial and error / comparisons with what I want with success on my website.

With web pages the stylesheet can be stored within the single HTML page or as a separate stylesheet containing just the styling information that can be linked to. That is what these css files are; separate stylesheets.

I am guessing its userstyle.css and userchrome.css, but where are they, what do they do and are there any others?

Joplin has several internal stylesheets but two have been provided that allow the user to customise the app. Joplin uses its built-in styles but these two files (userchrome.css and userstyle.css) can be used to override those styles. As @Daeraxa explained, userchrome.css allows styling of the app and userstyle.css allows styling of the markdown viewer pane. See the image below.

It is important to note that these custom stylesheets are loaded as Joplin is started. If you modify either of the stylesheets you have to quit and restart Joplin for the changes to take effect. Also as these are just styling modifications, simply deleting the stylesheets or the contents of the stylesheets (and quitting / restarting Joplin) will bring Joplin back to normal.

Could you direct me to a quick overview of which CSS files are involved and where to find them, please?

Both these files can be accessed from within Joplin as @Daeraxa mentioned. You are using Linux so the actual location of the files is ~/.config/joplin-desktop. If you have not opened the css files from within Joplin they initially may not exist in the folder and so need to be created manually. Do not touch any other files in this folder.

Search this forum and you will find many examples to try out and modify. There will also be posts about ways to find out the element names required to make style changes. Initially it's not an easy thing to do if you do not have much experience of using stylesheets, but over time the logic becomes clearer and it does become a bit easier.

This ability to customise Joplin is considered an "unsupported" feature. This basically means that if a custom stylesheet does not work as you expect or there does not appear to be a way to modify a particular part of Joplin, it's not a bug. Being unsupported also means Joplin has no obligation to maintain compatibility with any custom stylesheets. As Joplin develops, the names of the style elements could change (and they have) and your custom stylesheet may no longer fully work. So it's up to the user to maintain compatibility. That also means that when browsing the forum for ideas, there is a possibility that examples in old posts will not work.

As a starter, open the userchrome.css file, paste in this text, and the WYSIWYG button will disappear (after quitting / restarting Joplin)

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

Enjoy experimenting!

1 Like

Thanks @Daeraxa !
And thanks @dpoulton for that great description
I cant wait to start playing
I will make copies of the original css files for when I mess up :smile:

They actually start off empty, think of them more like an 'override'. Basically you can't break the ui with them permanently, if you mess up then you can just delete or empty the file entirely.

OK, thanks

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