Where did these originate? From @kepano , or elsewhere?
As I was playing around with them, I was craving a note where I could remember all the types, see what they looked like, and quickly copy and paste if needed.
Maybe you will have a similar need, so just wanted to share.
As of this post, these are the alt checkboxes in @kepano’s Minimal theme (and soon to be LYT Mode thanks to @Cecilia_May).
Copy and paste the following into a new note of yours:
Alt Checkboxes (syntax)
Use this section to remember all the types and what the syntax is:
- [ ] to-do - [/] incomplete - [x] done - [-] canceled - [>] forwarded - [<] scheduling - [?] question - [!] important - [*] star - ["] quote - [l] location - [b] bookmark - [i] information - [S] savings - [I] idea - [p] pros - [c] cons - [f] fire - [k] key - [w] win - [u] up - [d] down
Alt Checkboxes (rendered)
After you copy and paste, make sure to remove the code block marks ``` so the alt checkboxes will render:
Minimal’s implementation was late to the party and took inspiration from Sanctum, Primary and ITS Theme. However each theme has slightly different syntax so I tried to follow the conventions that are common across themes, and added a couple of my own.
Noteplan has used a few specific “types” of tasks to imply that a task has been deferred or cancelled for a few years, IIRC. At least, that’s why I was originally excited by the idea of a stylable data-task attribute.
@EleanorKonik also advocated for the data-task attribute not because of the use in tasks but because it served as a way of doing bullet journal-style notations, I believe. So bullet journaling is probably another precedent!
Help please, I would like to cash in some help currency.
I am trying to do these styles check boxes. All I get is a regular ticked check box.
I do this - [?] and get a checked box.
My assumptions:
So is there a conflict somewhere or a missing plug-in?
And do I need to add Css, if so where?
There seems to be a missing step between installing the minimal plugin and Style Settings plugin, and then the picture checkboxes working. Can you fill in the steps or the code needed?
Obsidan version 1.0.3
Been at this for a few days. Feeling like my last brain cells vacated my head with my sanity.
is there a way to for us to add our own alt checkbox?
maybe through css snippet?
if you could point me what to learn for prerequisites that would be helpful.
also what icon are you using for this alt checkbox?
I’ve used these, and extended with even a couple more of my own, and I’ll post a little reference as to how I go about when adding more alternatives to this impressive list. But first I wanted to show two queries I use to collate my alternative checkboxes from all around my vault.
List all checkboxes of a given type
```dataview
TASK
WHERE status="?"
```
Where you can change the "?" to match whatever checkbox type you want to see.
List all checkboxes for a list of types
```dataview
TASK
WHERE contains(list(["?", "!", "I"]), status)
```
Which lists all checkboxes with question, important or ideas. The list can of course be changed to whatever you like it to report.
Another useful set, would be the list of those referring to task statuses, like in list(" ", "/", "x", "-", ">", "<"), where depending on what kind of list you want, you could remove those you deem uninteresting for a good status overview or similar.
Based upon using Minimal theme in default, I played around and found what I needed to add my own custom icons as alternative checkboxes, and I found that I need two sections with a total of 6 CSS selectors to properly define them.
Getting started
You need to add some CSS, like shown below, into a CSS file, and enable this. To do this follow this procedure:
Go to Settings > Appearance > CSS snippets, and click on the folder icon on the far right. This opens the folder where you should store your CSS snippets
Create a file in this folder, and name it something, like alternativeCheckboxes.css
Edit this folder with an ordinary text editor, and for starters I suggest copying in the code from below
After saving the file, go back to Settings > Appearance > CSS snippets, and locate your filename in the list below, and enable it
Now you should be ready to use it in your vault.
Details
Example CSS to set three different custom checkboxes
The three first seem to be general stuff to allow for that letter to be recognised as a task decorator, whilst the three last ones are needed to set a proper icon for the given letter.
The three icons I’ve setup here are a for appointment, F for forum related stuff and w for walking. Just three random area icons, so feel free to remove/change/… to your liking. These look like the following:
Select the filled variant, as they seem to best suited for this use
Click on the icon you want, and select Copy SVG and Data URL, hit the copy
Locate the line with -webkit-mask-image: you want to change, and delete everything from the colon, :, and to the end of the line
Paste in the icon, and remove the text background-image: so that the line reads something like: -webkit-mask-image: url( ...
Save, and your new icon should be available
Now it should show up when you add a task with your new letter within the square brackets. I’ve not needed to re-enable, or restart Obsidian to get new icons added. Just saving the CSS file usually has done it for me.
Update: If you want to remove the possibility to change these checkboxes accidentally, you can add pointer-events: none to either the general section, or a specific section. With this you can’t click away your custom status
Thanks very much @holroy for the detailed instructions on how to add to CSS.
One question I’ve asked is how to add icons to my Vault folders? Is that possible?
Thank you! Just trying to make my Vault more visual and will try this out.
This is what my Vault looks like now, and would like to add an icon for ‘Facebook’ as an example.
hey there. here’s how use the pointer-event: none for both reading and editing view to prevent accidental clicks. I trimmed down the example for checkbox with * i.e. - [*] Star. repeat for other alternate checkbox you would need.
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect fill-opacity="0"/></svg>){kind=small}
Apr 2022
15d
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect fill-opacity="0"/></svg> "kepano"){kind=small}
