Use CSS to hide unnecessary dates until hovered

What I’m trying to do

Streamline the Tasks plugin’s display of individual tasks by hiding all unnecessary fields unless the cursor hovers above the task.

Things I have tried

Searched the Internet and this forum. I actually found a web page with a nifty implementation of this feature, but for the life of me I have not been able to find it again.

Details

When the Tasks plugin displays a task, it often contains dates relatively unnecessary for identifying the task. E.g., Start, Scheduled, Created, … . It also may contain tags. Such things may be important to keep track the task, but they just clutter the screen when one is looking to see what to do next. The solution of hiding such fields unless hovered is both elegant and efficient.

Help Wanted

Do you know where this has already been implemented? Can you suggest suitable css? Can you suggest a better way?

Thanks for asking this. I think using a separate task manager gives the best solution to you because you can have Obsidian URI links in your tasks in case you want to quickly switch from task to your note taking. I think most efficient way to integrate task manager to Obsidian would be using command line version of your task manager and then embedding command line to your notes using various plugins available such as Execute Code. I think this approach would be well suited for reference manager or flash card creation as well.

I use these two snippets that allow me to reduce links and dates to icons, which are displayed in full on mouseover. The snippets are made by By Anna Kornfeld Simpson (@AnnaKornfeldSimpson) AnnaKornfeldSimpson (Anna Kornfeld Simpson) · GitHub and @sunb_mn

short-link-tasks.css (1.4 KB)
compact tasks.css (9.4 KB)

Is short mode equivalent with short-link-tasks? It seems to implement short dates as well.

I hadn’t seen that he had implemented this in the plugin. The objective is the same, but the result is not exactly the same.

With the short mode:

With the snippets:

Just to clarify: the second screenshot also includes the result of compact tasks css which shows red check boxes for high priority. The check box priority based coloring is applied also in raw tasks when you view the file in reading mode. I think this can be customized to be applied in live preview (someone else can post details).

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