Internal Link Style - Specifically in Tasks Plugin

Things I have tried

I searched the forums, reddit, and google for an answer. I tried the supercharged links plugin to no avail. I tried changing templates as well. Minimal Settings Plugin, Advanced Appearance, etc

What I’m trying to do

Issue: With the tasks plugin, but also more generally, internal links look messy and make it hard to quickly scan a task list. Note: I use Daily Notes.

Example: A task reads as " - [ ] Set up my account (01-09-2021 > [[Finances]]) "

This is hard to read, IMO.

Goal More flexibility in styling a task. It would be cool if a task displayed as:
“- [ ] Set up my account (Link)” OR “- [ ] Set up my account (01-09)” OR “…(Finances)” with everything in parentheses as a clickable link. Being able to choose what shows and how it shows in the parentheses would be nice.

Nice to Have Adding a tiny bit more space between tasks. Overall, I like how the checklist plugin looks but it doesn’t have the functionality I need to query and group tasks how I choose (e.g. by heading, folder path, etc)

Note: I am not technical and do not know CSS. I am learning though!

There is a task management plugin tq which allows you to query tasks. I believe it might fulfill your needs.

1 Like

I could have misused it but tq didn’t work well for my use case. Tasks Plugin works well for me because the tasks are within the notes i take, which makes creating and referencing them easy.

Is there a way to use CSS snippets to accomplish my goal? Maybe another plugin?

This is in my snippets file, reduces the backlink text size and italicizes it. I would greatly prefer an icon that I can hover over, maybe that even gave some context, but this at least makes it a lot smaller.

li.plugin-tasks-list-item span.tasks-backlink .internal-link
	{
	font-size: xx-small;
	font-style: italic;
	}
2 Likes

Thanks! For some reason, I’m having trouble getting that snippet to work - I tried a variation below but it didn’t work either:

li.task-list-item.plugin-tasks-list-item span.tasks-backlink a.internal-link
	{
	font-size: xx-small;
	font-style: italic;
	}

I’m using the default theme, if that makes a difference.

Have you looked at it with the ctrl+shift+i inspector to see what other css might be overwriting?

Ever since live-preview there’s a LOT of css stuff in there that’s overwriting what used to work.

Currently using the default template as well.

Inspector is where I was able to pull that variation on the css, but I’m not quite sure what to do with the information beyond slightly altering the CSS you provided. I see font-size inheritance from .markdown-source-view, style attribute, and body?

If CSS can’t do the trick, I wonder if editing the source code might? Scroll all the way to the bottom - seems like that last chunk pulls in the full backlink - maybe it could be altered to show an icon or something of the sort?

Not sure why but when I tried your code on my work PC, it worked just fine. Before I was using my mac.

I’d prefer the icon solution as well

If you want to replace the backlink text with an icon, you can use this one. I don’t know if the code is right, but it works, at least for me.

li.plugin-tasks-list-item span.tasks-backlink .internal-link {
  	font-size: 0;
	}

li.plugin-tasks-list-item span.tasks-backlink .internal-link::after {
  	content: "🔗";
	font-size: 1rem;
	}
1 Like

wow. that worked perfectly! i need to play around with the css a bit to remove underlines but spot on!

thank you

Follow up question: I’m trying to change the tasks icon link and see that some workspace-header icons have classes. I’m trying to change it to class=tasks that would be a checked checkbox. any ideas? happy to get directed towards resources so i can learn!

You can easily remove underlines just by adding in first block “text-decoration: none;”.
Regarding “second” question, I’m don’t know if I understood correctly. Can you clarify it? I’m not sure if I will be able to help you, though.

The sidebar has different header icons for the various sidebar tabs (internal links, external links, calendar, outline, etc.).

For Tasks plug-in, the default icon is just a “document” icon. I’m trying to change that little icon in the top bar to something a little more unique

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.