Minimal Tasks Theme #1962
Replies: 9 comments 21 replies
-
|
Wow. Amazing. Thank you very much indeed. I took the liberty of editing your post very very slightly so the credit links work. |
Beta Was this translation helpful? Give feedback.
-
|
Pinging @esm7 😄 |
Beta Was this translation helpful? Give feedback.
-
|
This is so beautiful, thank you for sharing that! |
Beta Was this translation helpful? Give feedback.
-
|
Looks great, how do I use it? |
Beta Was this translation helpful? Give feedback.
-
|
Find the Styling page in the Advanced section of Tasks docs, and follow the link where it says “we assume you know how to use Obsidian snippets”. |
Beta Was this translation helpful? Give feedback.
-
|
Essentially,
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks, it works 👍 |
Beta Was this translation helpful? Give feedback.
-
|
That is a very great upgrade for the appearance of tasks! Thank you. A little feature request: I tried it on my own but I´m a noob in css 😅 |
Beta Was this translation helpful? Give feedback.
-
|
I don’t know if any CSS wizards could tell you how to do that. But it wouldn't be something we would spend time building in to the Tasks tool tip, I think. The assumption would be that if the user used a style that truncated the Description, that was the intention. Also, the tool tip itself doesn’t work well with long text, and I wouldn’t see it as a priority to work around user style choices. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for the late reply. You can add the CSS below, after |
Beta Was this translation helpful? Give feedback.
-
|
Amazing that is exactly what I wanted! 👍🏼 |
Beta Was this translation helpful? Give feedback.
-
|
This seems to work better with Obsidian 1.5. I added this to remove the bullets: ul > li.task-list-item {
list-style: none;
} |
Beta Was this translation helpful? Give feedback.
-
|
I edited the above to format the CSS |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the css it's so useful 🙏 Instead of: /* Change the Tasks Text Element to an "inline-flex" Element */
.tasks-list-text {
display: inline-flex;
max-width: 100%;
}
span.task-description {
flex: 2;
min-width: 0;
width: 350px;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}I'm using: /* Allow .tasks-list-text to shrink and take up remaining space responsively */
li.task-list-item {
display: flex;
}
.tasks-list-text {
flex: 1;
display: inline-flex;
}
span.task-description {
flex: 2;
}Note: I use it in |
Beta Was this translation helpful? Give feedback.
-
|
SUPERB. Just a thing: this messes up some other plugins views and search views (I'm using "Better Search View" plugin, not sure it's only for that or all search views). The following is a fix to only target the task list query results: /* Allow .tasks-list-text to shrink and take up remaining space responsively in the task view only */
.plugin-tasks-query-result li.task-list-item {
display: flex;
}
.plugin-tasks-query-result .tasks-list-text {
flex: 1;
display: inline-flex;
}
.plugin-tasks-query-result span.task-description {
flex: 2;
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you - the CSS didn't work right for me in query lists, until I added this snippet. |
Beta Was this translation helpful? Give feedback.
-
|
This is great, and produces a much easier to read rendering of tasks. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much. Feel free to share the Markdown as well, as text, when you have time - so that anyone interested can try and reproduce what you see, reliably and quickly. |
Beta Was this translation helpful? Give feedback.
-
|
Whoops. Here's the markdown. Yes, it's inside a callout. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, Sorry I was unclear. The markdown of the task lines. It's not at all clear from the screenshot what are the nested tasks... |
Beta Was this translation helpful? Give feedback.
-
|
Ah, right. And the 2nd one is: Is that what you're looking for? |
Beta Was this translation helpful? Give feedback.
-
|
Perfect!! Thank you. 🎉 |
Beta Was this translation helpful? Give feedback.
-
|
Really amazing style, thanks a lot for your work! I am an absolute beginner with css but tried to implement the same hovering logic with the due and creation date emojis, sadly it behaved very strange... Can anybody help me achieve that? Here is what I have tried: |
Beta Was this translation helpful? Give feedback.
-
|
@Wasserkopp Can you be more specific than:
Like show us a screenshot of the problem? Otherwise, how will anyone know what problem you are asking to be solved? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the fast response :) I assumed that you can easily replicate the "strangeness" with the css snippet I have posted (which only adds those due/creation emojis (📅➕) to the logic you already created for the 🔁🛫⏳in your theme/css.
It's somewhat tricky to make a screenshot of a the strange hovering behavior as it only captures the moment and not the whole behavior when hovering/moving the mouse in different ways. The best way I can describe it is that it does not show the 📅➕ at all, but when i hover with my mouse above that field where they should be, they sometimes appear for a short time (like you can see in the 2nd screenshot)
The problem is not the css snippet I posted (it's just for others to be able to understand what I tried myself as somebody new to css). What I was asking for was to find a way to just implement the same hovering logic you did for the 🔁🛫⏳, also for the 📅➕. |
Beta Was this translation helpful? Give feedback.
-
|
i think tasks may have updated in a way that broke the hovering? i was having the same problem that you were with the 📅➕ symbols with the 🔁🛫⏳ symbols as well, and when i messed with the code meant to hide the content, i found that the emojis are now hidden along with their content. |
Beta Was this translation helpful? Give feedback.
-
|
I think I fixed it: all you need to do is change the font size to 1rem and the color to whatever you want just so it isnt transparent anymore |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot, i will give that a try! |
Beta Was this translation helpful? Give feedback.
-
If you want a more minimal look for your tasks, use the CSS code below. The checkboxes are colored according to their priority and when you hover over emojis, they reveal additional context. Credit goes to SlRvb and esm7's CSS code, since I wouldn't be able to figure it out on my own.
Beta Was this translation helpful? Give feedback.
All reactions