Highlight your tasks on Visual Task Boards

This is the 3rd part of a series on how to customise the visual task boards to your preferences without asking for permission.

📌 Part 1: Setup + Pin user on Visual Task Boards

🐘 Part 2: Expand short description on Visual Task Boards

Part 3: Highlight your tasks!

🌾 If you are the primary assignee → cards will be highlighted in “wheat

🐬If you are the only additional assignee → cards will be highlighted in “lightblue

🏳️ If you are an additional assignee, but there are more additional assignees → cards won’t be highlighted

Solution

You can check the required setup in my previous post explaining how to pin your user.

This is the CSS code you need to add to your browser extension (tested in Chrome, it might not be supported by others).

/* Highlight the tasks assigned to me */
.vtb-card:has(.sn-card-component-avatar:is([data-original-title="Rubén FERRERO"],[title="Rubén FERRERO"])[ng-if=":cardUpdated:assignedTo || false"]) {
    background-color: wheat;
}

/* I'm the only additional assignee */
.vtb-card:has(.sn-card-component-avatar:is([data-original-title="Rubén FERRERO"],[title="Rubén FERRERO"])) {
    background-color: lightblue;
}Code language: CSS (css)

Feel free to choose your favourite colours and remember to replace my name with yours!

Warning: This will probably stop working at some point if ServiceNow changes the HTML. But remember that this is just for you and you can fix it easily!