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!
