Hide button switch Markdown and WYSIWYG

cnichte · 2022-07-04T12:06:04.529Z

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

Daeraxa · 2022-07-04T12:49:39.357Z

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.

Leigh · 2022-07-07T19:10:41.968Z

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

dpoulton · 2022-07-07T22:27:48.666Z

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?

Leigh · 2022-07-08T01:04:52.201Z

Funny ....
Yes, I am even rebooting

Leigh · 2022-07-08T01:33:21.305Z

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

https://aur.archlinux.org/packages/joplin-appimage

Daeraxa · 2022-07-08T01:37:40.583Z

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.

Leigh · 2022-07-08T01:47:04.938Z

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

Daeraxa · 2022-07-08T02:21:54.117Z

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.

Leigh · 2022-07-08T13:00:32.230Z

Thanks
AL rocks!

Daeraxa:

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.

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;
}

Daeraxa:

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.

I have this:

ArchLabs_2022-07-08-30_1920x1848996×1049 257 KB

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

Daeraxa · 2022-07-08T14:33:47.509Z

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;
}

Leigh · 2022-07-08T15:57:26.606Z

Daeraxa:

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?

Yes it does

Daeraxa:

Also try to see if any other CSS works at all in that file e.g.
div.sidebar {
  background-color: #FF69B4;
}

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

Leigh · 2022-07-08T16:05:18.713Z

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

Works tho

Leigh · 2022-07-08T16:29:41.258Z

So,
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

Daeraxa · 2022-07-08T16:33:46.631Z

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.

Try:

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

Leigh · 2022-07-08T16:38:32.475Z

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 )

Daeraxa · 2022-07-08T16:40:42.383Z

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.

Leigh · 2022-07-08T16:48:12.793Z

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

This is with Markdown editor

image1920×1097 231 KB

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

Daeraxa · 2022-07-08T16:55:58.526Z

I honestly don't see why

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

Wouldn't target that button in markdown mode, you can see in the html that button is a child of a div which is a child of div.editor-toolbar.

Leigh · 2022-07-08T16:59:42.688Z

oh well
Thanks for your help, much appreciated
I will just have to live with it then cause if you cant see why its not working, there is little hope I will be able too