Due date styles ✨

[califa]

Put together some style options to make my task lists more intuitive and clean.

Option 1 - Labels

Due date labels	Option 1 CSS

Option 2 - Checkboxes

Due date checkboxes	Option 2 CSS

Each of the CSS files linked above also includes CSS to fix task alignment, change task icons, and clean up backlinks—but feel free to remove these.

[claremacrae]

Thanks very much!

A little feedback... The checkboxes will cause problems for anyone using custom statuses.

Steps to reproduce.

1 Create a vault

1. Open a brand new vault
2. Optionally, set the theme to Light

2 Install SLR's custom checkboxes styles

3. Go to Settings
   1. -> Appearance
   2. -> Scroll down to CSS Snippets
   3. -> Click on the folder icon. This will create a folder .obsidian/snippets/
4. Download the S - Checkboxes.css and save it in the vault's .obsidian/snippets/ folder
5. Hit the Refresh icon in CSS Snippets
6. Turn on the S - Checkboxes snippet

3 Set up the test file

7. Create a new note called test
8. Paste in these lines:

[Install the Tasks plugin](obsidian://show-plugin?id=obsidian-tasks-plugin)

- [ ] status: space ` ` - due 2023-08-12 📅 2023-08-12
- [/] status: slash `/` due 2023-08-12 📅 2023-08-12

9. Switch to Reading view

4 Install Tasks

10. Settings -> Community Plugins
11. Click 'Turn on community plugins'
12. In the test note, click on the Install the Tasks plugin
13. Install Tasks
14. Enable Tasks

5 Set up Tasks

15. Settings -> Tasks
16. Click on ITS Theme & SlRvb Checkboxes: Add 37 supported Statuses

The test note now looks like this:

6 Install the CSS for this ticket

17. Save the snippet in .obsidian/snippets/
18. Enable it in Settings -> Appearance
19. Restart Obsidian, so that this setting is fully loaded

The test note now looks like this:

Notice how the two tasks have the same due date, but the CSS for 'in-progress' is shown, but not the icon for overdue.

7 Conclusion

Changing the checkbox content is only going to be a good solution for vaults that only use the default statuses [ ] and [x].

[claremacrae]

@califa I think it's not going to be obvious to many people how to make the snippet display the pills/labels shown in your first screenshots...

Maybe edit the post and provide two separate links?

• one for the labels version
• and one for the custom checkboxes one?

[claremacrae]

(It seems that the pills code is commented out in the original link)

[califa]

Updated!

[elvarb]

Loving this, really good way to show the due dates, especially the labels one

Could this be adapted to replace the priority symbols for tasks to custom ones?

[claremacrae]

It does already.

[ndharari]

Hi! Do you know any way to prevent the pills to break like this:

I very much love this pluggin! Thanks a lot

[ndharari]

Found it! I added white-space:nowrap; to the definition.
Thanks anyway!

[elvarb]

This snipped is causing some strange things when you have a task query within a callout and you use that note in a canvas.

See here #2270

[elvarb]

Been testing this by fiddling with this part of the css

.contains-task-list .task-list-item-checkbox {
    top: .5em !important;
    left: 0;
    position: absolute;
}

And it seems that there is some overwrite when it comes to displaying task lists in Canvas that takes over. Debugging the css chain in the developer console is something I'm not familiar with so I wont touch it.

The issue is related to how the position is defined, if it set to relative then it starts to show up in the right place but then it becomes very obvious that the height position is not right as its around the center of the line in Canvas and too low on normal notes.

Changing it to static makes it appear right but then the rest of the tasks text goes to the left of the checkbox in Canvas but in notes it is just like the first character in the line and the line overflow goes below it. No indentation.

I modified the css right below that one in the end as it looks good enough for both notes and canvas.

From

.plugin-tasks-query-result {
    padding-left: 0 !important;
}

To

.plugin-tasks-query-result {
    padding-left: 1em !important;
}