Styling the task list items

[DigiSquid]

I'm new to Obsidian, so I apologize if this question is related more to Obsidian than your plugin, but how would I go about styling the list items for filtered task lists only? Basically, I'm trying to style what the lists look like in the queries.

I've tried adding .markdown-preview-view ul > li.task-list-item and .markdown-preview-view .task-list-item-checkbox to my custom theme, but those styles appear to be generated by app.css and changes to them appear to apply to all checklists. So I assume I'm targeting the incorrect styles.

[schemar]

At the moment, Obsidian Tasks does not add any special classes or tags. It specifically reproduces obsidian's behvior to be "non-intrusive". However, I think your use-case is very valid, so I created #91
The implementation itself should be easy, if I am not forgetting anything.

[DigiSquid]

I think something simple like plugin-obsidian-tasks might be fine. It's just something easily identifiable so those of us who want to style it don't have to go hunting around. As long as you wrap everything in that, theme builders should be able to target individual child elements pretty easily.

My issue was that I'm not that familiar with Obsidian yet so it wasn't entirely clear which styles are generated by the app or by plugins. Now that I know what to target, I was able to create an appearance that's different from the rest of my tasks without any trouble.

[schemar]

Nice! Mind sharing?

[DigiSquid]

Sure thing. Might be a little rough around the edges, and some of the markup is specific to my custom theme, but here you go.

/* ====== Obsidian Tasks Plugin ======== */
.markdown-preview-view div.block-language-tasks > div > ul,
.markdown-preview-view div.block-language-tasks > div > ol {
  padding: 0;
  list-style-position: outside;
}

.markdown-preview-view div.block-language-tasks > div > ul > li.task-list-item {
  background: var(--gray-7);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}

.markdown-preview-view div.block-language-tasks > div > ul > li input.task-list-item-checkbox {
 position: relative;
 right: 20px!important;
}

.markdown-preview-view div.block-language-tasks > div > ul > a.internal-link {
  text-indent: 0;
}

[schemar]

Thank you! This will be of help to others for sure!

[schemar]

I added some classes in the latest release, see https://github.com/schemar/obsidian-tasks/releases/tag/0.8.1

• Styling is now easier since ul (query result) and li (everywhere) elements of tasks have specific classes
  • ul: plugin-tasks-query-result
  • li: plugin-tasks-list-item