Greyed checkboxes

I was thinking we would use some kind of dropdown. But copy markdown link is certainly easier. Maybe we could have a right click menu item "Set Style"

Also not a bad idea. As long as I don't have to enter anything manually and the hash is used internally I am good. But I am not the one who has the authority to decide. :slight_smile:

This may be so, but Joplin seems to be the only tool that uses greyed out checkboxes like this in its UI. And not even then:
scrot20190529092400
All other tools I know use greying out when an item cannot be selected or changed.

:point_up_2:t2: exactly this. Those two things are logically different: I should not see configuration in places that are meant for my notes.

I do think think there is a way around this, while still getting to keep all of the advantages: make the notebook a special case, hardcode its name and hide it.

More precisely: imagine you set the name (and I do mean the name, I don't care about the ID) of the notebook to ce8e849c-b6a2-4f19-b2b1-9a4f9b4f57ee, or some other random guid. (Please don't use all zeroes, that's just asking for trouble.)
No need to implement notebook or note hiding - just hardcode that notebook to be hidden.
Also no need for special notes with specific names - Add a menu item saying "Customize CSS" (or maybe "Customize CSS for this particular instance" that will open (or create) a note, with a hardcoded name, in that notebook, and display its contents in a 'edit settings' window/dialog.

That way, it could internally be a notebook for syncing purposes, there would be no issue of it being displayed among your other notes (because the notebook would be hidden) and no issue with specific names (because that'd be hidden as well, and handled when a user clicks on the 'Customize CSS' menu item.)

I think this is a bad idea from the UX point of view. Having to see an option on every single note, while that option will be used by a fraction of users, for a single note among potentially thousands you create in Joplin, would just be confusing and superfluous.

In this case how would we access the css notes from other devices? And what if we want 2 devices to use the same css?

I disagree here, this is already the standard on mobile and desktop OS's for setting the wallpaper. I would argue that users are already familiar with these kinds of options and won't negatively effect anyones workflows.

I think we should create a new topic, e.g. userstyle.css on desktop and mobile or rename this one.

Either way, the sooner we agree on a solution, the sooner we can start implementing it…

1 Like

Hello! I do not know where userstyle.css file is located. Sorry. I am on Linux Manjaro.

should be there https://joplinapp.org/#custom-css

Les notes et paramètres se trouve(nt)* dans (notes & settings are in) : /home/username/.config/joplin-desktop. But no css file in sight! Do I have to create it myself? What is its full content? Thanks you for your help

*il y a une faute de conjugaison. Il manque “nt” à la fin de “trouve”: “Les notes et paramètres se trouvent dans…” (there is a fault of conjugation. Missing “nt” at the end of “trouve”: “Notes and settings are in…”)

You need to create it yourself. You can put basically any css in there to customize your rendered notes. Checkout this forum topic for examples and inspiration.

Thanks you. But, it doesn't work with the CSS file, only with

 <style>
    .checkbox-label-checked {
    opacity: 1;
    }
    </style>

(directly in a note).

How can I inverse the effect? That is, bold character when the box is checked and normal when not checked.

Relatively interesting for a shopping-list: Using

opacity: 0 ; (zero)

the text becomes invisible when the box is checked.

@nettlebay after creating a userstyle.css and putting your styling tweaks in it, you need to restart joplin, please check the README for reference.

Here is the effect you asked for

.md-checkbox {
	font-weight: normal;
}
.checkbox-label-checked {
    font-weight: bold;
    opacity: 1;
}

Thanks you

As you can see from Joplin’s own UI, it is higly uncommon to grey out checked checkboxes.
Please revert this change, or make it optional.

Reviving this old topic. I stumbled on it when I was looking if custom CSS is supported on the mobile app (Android in my case). It seems that still isn't the case, am I right ? Any chance to see it happen in the future ?