Hi everyone,
I’ve been trying for hours, including ChatGPT’s help to style tasks containing the emoji in Obsidian while keeping the interactivity of the Tasks plugin (checkbox toggles, links, etc.). I’m using the following CSS and DataviewJS code, but I can’t seem to find a solution that combines both.
The Problem
- When I use this CSS with a custom
dataviewjs
block, the styling works perfectly, but I lose the interactive features of the Tasks plugin. - When I use the Tasks plugin engine (
tasks
block), I keep the interactivity, but the CSS no longer applies.
I’ve been trying to merge these two approaches for hours, but I’m still stuck. I’d really appreciate any guidance!
CSS I’m Using
This is the CSS I’m using to style my tasks:
/* Conteneur général */
.taches-toutes {
list-style-type: none;
padding-left: 0;
}
/* Tâches prioritaires */
.task-prioritaire {
font-weight: bold;
color: yellow;
background-color: #333;
border-left: 4px solid yellow;
padding: 5px;
margin-bottom: 4px;
}
/* Tâches normales */
.task-normale {
font-weight: normal;
color: inherit;
padding: 5px;
margin-bottom: 4px;
}
This CSS works perfectly when I generate the task list manually using this dataviewjs:
// 1) Récupère la date depuis le nom de la note (format "YYYY-MM-DD")
const noteDate = dv.current().file.name;
// 2) Vérifie la validité du nom (doit être une date)
if (moment(noteDate, "YYYY-MM-DD", true).isValid()) {
// 3) Filtre les tâches : non terminées ET dues à la date
let tasks = dv.pages().file.tasks
.where(t => !t.completed) // Tâches non terminées
.where(t => t.due && t.due.toFormat("yyyy-MM-dd") === noteDate); // Due aujourd'hui
// 4) Tri des tâches : prioritaire (🔺) en premier
tasks = tasks.sort(t => t.text.includes("🔺") ? 0 : 1, 'asc');
// 5) Génère le HTML
let html = `<ul class="taches-toutes">`;
for (let task of tasks) {
// Vérifie si la tâche est prioritaire
const isPrioritaire = task.text.includes("🔺");
// Associe la classe CSS correspondante
const cssClass = isPrioritaire ? "task-prioritaire" : "task-normale";
html += `
<li class="${cssClass}">
<input type="checkbox" ${task.completed ? "checked" : ""}/>
${task.text}
</li>
`;
}
html += `</ul>`;
// Affiche le HTML généré dans la note
dv.paragraph(html);
} else {
// Message d'erreur si le nom de la note n'est pas une date valide
dv.paragraph("⚠️ Nom du fichier incorrect (format YYYY-MM-DD attendu).");
}
Using this code, I can generate a task list with custom CSS styling. Tasks containing 🔺
are highlighted in bold yellow, and everything looks great. However, I lose the interactivity provided by the Tasks plugin (e.g., clickable checkboxes, links, and date pickers).
What Works (but partially)
If I switch the other way around to using the tasks
block from the Tasks plugin like this:
const noteDate = dv.current().file.name;
if (moment(noteDate, "YYYY-MM-DD", true).isValid()) {
const query = `
not done
due on ${noteDate}
sort by priority desc, due
hide task count
`.trim();
dv.paragraph("```tasks\n" + query + "\n```");
}
I get the interactivity I want, but my CSS (.task-prioritaire
, .task-normale
) no longer applies because the Tasks plugin generates its own HTML structure, and my classes are ignored.
What I’m Looking For
I want to:
- Keep the interactivity provided by the Tasks plugin (checkboxes, links, etc.).
- Apply custom CSS to tasks containing the
emoji to highlight them visually.
I know the Tasks plugin uses a different HTML structure in Live Preview mode (the only mode I use) (e.g., <li>
with classes like .task-list-item
), but I haven’t been able to make my CSS work with it.
Example Markdown Task
Here’s an example of how my tasks are written in Markdown:
markdown
Copy code
- [ ] High-priority task 🔺 📅 2025-01-12
- [ ] Normal task 📅 2025-01-12
Thank you so much for any guidance!