Change fonts for High Priority Tasks in Dataviewjs

Hi everyone,

I’ve been trying for hours, including ChatGPT’s help to style tasks containing the :small_red_triangle: 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

  1. When I use this CSS with a custom dataviewjs block, the styling works perfectly, but I lose the interactive features of the Tasks plugin.
  2. 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:

  1. Keep the interactivity provided by the Tasks plugin (checkboxes, links, etc.).
  2. Apply custom CSS to tasks containing the :small_red_triangle: 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! :pray:

With both dataview and dataviewjs you’re able for any given task in a query to set the visual variable to be whatever you’d like, and it’ll show it and preserve the task functionality.

Like I put your tasks in a test file, and added this query:

```dataview
TASK
WHERE file = this.file
FLATTEN choice(contains(text, "🔺"), "<span style='background-color: #700000'>" + text + "</span>", text) as visual
```

And the result was:

Of course more care could be taken in decorating the high priority task. This is merely a proof of concept :stuck_out_tongue:

Thank you @holroy for your inputs!

Actually, what I meant in my first message, it’s that by doing it your way I lose the precious Tasks plugin quick visual links because Dataview queries doesn’t use any more the powerful Tasks plugin features. Here are those links I mean:
Xnip2025-01-12_20-45-53

As you can see, the Tasks plugin automatically feature a calendar date picker, a quick jump link, an edit button and date postpone button. So the challenge is to make exactly what you’ve achieved with the background color WITH those buttons still present^^

The task query that keeps the links is:

tasks
due on  <% tp.date.now("YYYY-MM-DD",0, tp.file.title, "YYYY-MM-DD") %>
short mode
hide task count

Any idea on that? :laughing: