How to style backlinks
Table of contents
Motivation and assumptions
In Tasks results, by default each task is displayed with its filename, and the name of the previous heading, for example (ACME > Steps to world domination)
. This is called a backlink.
If you don’t like how backlinks look, this guide shows how you can modify their appearance.
We assume that you know how to use CSS snippets in Obsidian.
Default backlink style
Here is an example task block that does not hide any components of the output: sometimes you want to see all the information in each task.
```tasks
not done
description includes trash
```
This screenshot shows what this might look like, with some sample data:
Notice that the backlinks (the blue file and heading names) can quite dominate the results, visually.
Built-in options
We could use hide backlink
, but then we would lose the ability to navigate to the source file.
We could also use short mode
, which would replace the backlink text with an icon, but this would hide all the other properties of the task, such as due date and recurrence.
Using CSS to de-emphasize the backlinks
We can de-emphasize the text in the backlinks, with this CSS snippet:
/* By David Phillips (autonia) https://github.com/autonia
From https://github.com/obsidian-tasks-group/obsidian-tasks/discussions/622#discussioncomment-2649299
*/
.tasks-backlink {
font-size: 0.7em;
opacity: 0.6;
filter: grayscale(60%);
}
Which gives us this result:
Using CSS to replace the backlinks with icons
Or we can replace the backlink text with an icon, with this CSS snippet:
/* By Anna Kornfeld Simpson (@AnnaKornfeldSimpson) https://github.com/AnnaKornfeldSimpson
From https://github.com/obsidian-tasks-group/obsidian-tasks/discussions/834#discussioncomment-3028600
Then converted to embed the icon inside this .css file, to remove the need
for an internet connection, as follows:
1. Link icon downloaded from https://twemoji.twitter.com
https://github.com/twitter/twemoji/blob/master/assets/svg/1f517.svg
licensed under the CC-BY 4.0
2. SVG encoded for embedding here with https://yoksel.github.io/url-encoder/
*/
li.plugin-tasks-list-item > span.tasks-backlink > a {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%238899A6' d='M15 9l6-6s6-6 12 0 0 12 0 12l-8 8s-6 6-12 0c-1.125-1.125-1.822-2.62-1.822-2.62l3.353-3.348S14.396 18.396 16 20c0 0 3 3 6 0l8-8s3-3 0-6-6 0-6 0l-3.729 3.729s-1.854-1.521-5.646-.354L15 9z'/%3E%3Cpath fill='%238899A6' d='M20.845 27l-6 6s-6 6-12 0 0-12 0-12l8-8s6-6 12 0c1.125 1.125 1.822 2.62 1.822 2.62l-3.354 3.349s.135-1.365-1.469-2.969c0 0-3-3-6 0l-8 8s-3 3 0 6 6 0 6 0l3.729-3.729s1.854 1.521 5.646.354l-.374.375z'/%3E%3C/svg%3E");
height: .9em;
}
Which gives us this result: