Internal Link Style - Specifically in Tasks Plugin

ycs · January 9, 2022, 11:15pm

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!

Borouch · January 10, 2022, 12:37am

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

ycs · January 10, 2022, 5:10am

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?

LeslieP · January 10, 2022, 5:35pm

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;
	}

ycs · January 12, 2022, 3:48am

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;
	}

LeslieP · January 13, 2022, 1:31am

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.

ycs · January 13, 2022, 6:31am

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?

ycs · January 13, 2022, 6:38am

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?

github.com

schemar/obsidian-tasks/blob/main/src/QueryRenderer.ts

import {
    App,
    EventRef,
    MarkdownPostProcessorContext,
    MarkdownRenderChild,
    Plugin,
} from 'obsidian';

import { State } from './Cache';
import { replaceTaskWithTasks } from './File';
import { Query } from './Query';
import { Sort } from './Sort';
import { TaskModal } from './TaskModal';
import type { Events } from './Events';
import type { Task } from './Task';

export class QueryRenderer {
    private readonly app: App;
    private readonly events: Events;

This file has been truncated. show original

ycs · January 19, 2022, 12:56am

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

moura4 · February 4, 2022, 12:57pm

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;
	}

ycs · February 5, 2022, 7:05am

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

thank you

ycs · February 5, 2022, 7:26am

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!

moura4 · February 5, 2022, 12:03pm

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.

ycs · February 5, 2022, 4:18pm

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

system · February 6, 2022, 4:18pm

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