Home / GitHub Page

Greyed checkboxes

In the end that would be the perfect solution for this and several other issues.

I like this solution at a technical level because it allows customising things easily, it’s cross-platform, and we get free sync for it by re-using the existing architecture (and without having to make that architecture more complicated).

Then we can indeed add more config in there, including the templates you mentioned.

On the other hand, it’s not very user-friendly. People will have to read the doc, manually create that config notebook with the right name (I agree with tessus that we shouldn’t do it automatically), and the notes inside with the right name too.

I’m not concerned about duplicate names though - let’s say for now the result of having two notes named userstyle.css will be undefined - the algorithm will pick the first one. Later maybe that algorithm could emit a warning, but it’s not a big issue for now.

1 Like

Don’t forget that with this solution you have one file that will determine the css for all your devices and all installations. This might not be wanted. I might want to have one css for my ipad, another one for my Android, and another one for desktop.

This was also the argument for the welcome notes…

I’m just saying, if you add it to settings, it will be bound to the instance of joplin, which is something I would prefer over syncing. And as I said, people can still put the css in a note for copy and paste purposes or for reference. Maybe other see it differently. I will tell you that using a notebook and note will be a mess. You will get all sorts of problems. IMO this is opening the proverbial can of worms.

This also means that people can’t already have a folder that is called whatever you will pick for that name.

Another thing - I don’t want a notebook called whatever that is visible to me. The notebooks are for my notes, not to configure the application. So, if I wanted to use a different css, I’d have to have a new folder which I don’t want and which is in my way all the time?

Using notebooks and notes for configuration sounds nice and it could be an awesome feature, but it would require a lot more than what was discussed here. e.g. hiding notebooks and notes, a unique id per device that is appended to the config note name, merging of notes, … this is highly complex when you want to do it right.


My thought had been that we would take a different approach to creating the config notebook because it is so special, and as you noted, you would need to be able to hide it. What would have been possible is to manually specify the ID and only refer to it by such (the users would then be free to rename it however they want). For example the config notebook could use the ID 00000000000000000000000000000000 because the probability that any specific ID is in use is extremely low. If this did cause problems (only possible during rollout) we would have to help the 1 or 2 users and then it’s done.

That said, typing this out makes sort of proves your point that it would be adding a lot of needless complexity and we’re sure to get complaints about the additional notes…

How about a compromise? We allow the user to select a userstyle.css in settings by having them point to a note with css in it. This way they can have separate css for each device and get the benefit of syncing infrastructure. We would also probably want to allow users to copy and paste css into settings for the users that don’t want configuration notes.

1 Like

Yes, this would certainly makes sense. However, I would rather use the link from Copy Markdown link to specify the file than entering the filename manually.

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:
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…

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

    .checkbox-label-checked {
    opacity: 1;

(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.