Alternative Checkboxes (Icon Bullets) - Copy and paste

Alternate checkboxes

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:

- [ ] 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
5 Likes

I am not sure who the originator of the idea was (not me!). I think the syntax has existed prior to Obsidian in other tools.

The suggestion originally came on my radar via @ryanjamurphy in issue #8 of Minimal theme referencing a snippet by @death.au

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.

The available options can be referenced in the Minimal Documentation

6 Likes

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!

5 Likes

Is there a way to add own types of checkboxes (e.g. any kind of emoji)?

I don’t know how, but if you know CSS and maybe other things, you can, again, don’t know how.

1 Like

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.

If you need me to send any more information.

Thanks in advance.



1 Like

You need a theme that supports this feature. The alternative checkboxes are not supported in the default theme.

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.

3 Likes

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.

Example CSS to set three different custom checkboxes
/*** Common bits, and parts ***/
input[data-task="a"]:checked,
li[data-task="a"] > input:checked,
li[data-task="a"] > p > input:checked, 

input[data-task="F"]:checked,
li[data-task="F"] > input:checked,
li[data-task="F"] > p > input:checked,

input[data-task="w"]:checked,
li[data-task="w"] > input:checked,
li[data-task="w"] > p > input:checked 
/* No comma after previous line */
{
  --checkbox-marker-color: transparent;
  border: none;
  border-radius: 0;
  background-image: none;
  background-color: currentColor;
  color: var(--color-green);
  -webkit-mask-size: var(--checkbox-icon);
  -webkit-mask-position: 50% 50%;
}

/* Setting of the icon for the various letters */

/* a - appointment, remixicon: calendar-event-fill */ 
input[data-task="a"]:checked,
li[data-task="a"] > input:checked,
li[data-task="a"] > p > input:checked {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zM4 9v10h16V9H4zm2 4h5v4H6v-4z'/%3E%3C/svg%3E");
}

/* F - Forum, remixicon: question-answer-fill */
input[data-task="F"]:checked,
li[data-task="F"] > input:checked,
li[data-task="F"] > p > input:checked {
  color: var(--color-orange);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M8 18h10.237L20 19.385V9h1a1 1 0 0 1 1 1v13.5L17.545 20H9a1 1 0 0 1-1-1v-1zm-2.545-2L1 19.5V4a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v12H5.455z'/%3E%3C/svg%3E");
}

/* w - walking, remixicon: walk-fill */ 
input[data-task="w"]:checked,
li[data-task="w"] > input:checked,
li[data-task="w"] > p > input:checked {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M7.617 8.712l3.205-2.328A1.995 1.995 0 0 1 12.065 6a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.697 3.955 2.061 1.73 2.223 6.108-1.88.684-2.04-5.604-3.39-2.845a2 2 0 0 1-.713-1.904l.509-2.885-.677.492-2.127 2.928-1.618-1.176L7.6 8.7l.017.012zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-2.972 13.181l-3.214 3.83-1.532-1.285 2.976-3.546.746-2.18 1.791 1.5-.767 1.681z'/%3E%3C/svg%3E");
}

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:

Adding new checkbox icons

Whenever I want to add another icon to the set, I repeat the following:

  • Open up the file we created earlier
  • Copy a set of three lines in the top part, and change to the new letter
  • Find a corresponding block in the last part, and copy that block, and change to the new letter
  • Find an icon to use in the -webkit-mask-image: of this last block

Finding the icons

I’ve mainly used https://remixicon.com, but other can be used but then the procedure will vary slightly, so here is what I’ve done so far:

  • Open the website https://remixicon.com, and search for icon of your liking
  • 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.

7 Likes

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?

Thanks in advance for your response.

If you install the plugins, and follow this instruction you should get folder icons:

1 Like

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.
Vault folders