Can CSS for task priority attribute be rendered at the beginning?

General
1

From this thread: I'd like the priority attribute for task (I use A/B/C) to appear at the beginning, so they are helpfully aligned like so:

image
image671×262 15.3 KB

To do this, I write out the task this way, putting the priority attribute at the beginning:

  - [ ] [priority: C] Paint the cave

If there is a way to have it render like in the screenshot above regardless of whether the priority attribute appears at the beginning or end of the task, I'd love to know, so I don't have to worry about assumptions user code and libraries make about where the attribute should appear.

2

I'm wanting them to render this way at the source line, and not when rendered as the results of a query. I use this CSS currently, which means the attribute must appear at the beginning:

/* priority: hide raw value */
.sb-attribute[data-priority] > .sb-list.sb-frontmatter {
  font-size: 0;
}

/* priority: base pill */
.sb-attribute[data-priority]::before {
  padding: 0 7px;   /* spacing without white gap */
}


/* priority values */
.sb-attribute[data-priority="A"]::before {
  content: "A";
  background: var(--sb-warning-color, #ff6b6b);
  color: #000;
}

.sb-attribute[data-priority="B"]::before {
  content: "B";
  background: var(--sb-highlight-color, #ffd43b);
  color: #000;
}

.sb-attribute[data-priority="C"]::before {
  content: "C";
  background: var(--sb-success-color, #69db7c);
  color: #fff;
}

/* priority: hide attribute plumbing */
.sb-attribute[data-priority] > .sb-list.sb-frontmatter.sb-atom,
.sb-attribute[data-priority] > .sb-list.sb-frontmatter.sb-meta {
  display: none;
}
3

You're Welcome!

image
image710×234 13.2 KB

- [ ] Paint the cave [priority: C]
- [ ] Feed the cats [priority: A]
- [ ] Pet the dogs [priority: B]
- [ ] Buy Milk [priority: A]


/* Hide the original [priority: X] */
.sb-attribute[data-priority="A"],
.sb-attribute[data-priority="B"],
.sb-attribute[data-priority="C"] {
  visibility: hidden;
  font-size: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Shared badge style — on checkbox instead of task text */
.sb-line-task .sb-checkbox::after {
  font-size: 0.85rem;
  font-weight: bold;
  display: inline;
  padding: 2px 6px;
  border-radius: 4px;
  color: black;
  margin-left: 6px;
}

.sb-line-task:has(.sb-attribute[data-priority="A"]) .sb-checkbox::after {
  content: "A";
  background: var(--admonition-color-danger, #e53935);
}
.sb-line-task:has(.sb-attribute[data-priority="B"]) .sb-checkbox::after {
  content: "B";
  background: var(--admonition-color-warning, #f9a825);
}
.sb-line-task:has(.sb-attribute[data-priority="C"]) .sb-checkbox::after {
  content: "C";
  background: var(--admonition-color-success, #43a047);
}

:warning: Limitations, this only works with single-line tasks. No multiline supported due to CodeMirror line architecture.

1 Like
4

Beautiful and simple, works perfectly, thanks so much!

I hope you will consider giving us a class on how to so effectively collaborate with AI to produce so many great features for SB!

5

My "secret" is the Context whatn you give in your Prompt.

Here is my conversation with claude to the solution with the Priority Styling as reference. Read it through and maybe it helps you formulate your prompts better:

https://claude.ai/share/d2a6dfc4-47cb-4aee-93fe-432cbe916851

as you can see it's not a magical formula, it's just a trial and error, like a real conversation with as much as possible information for the AI, so it can understand the problem exactly, and what works and what not.

Of course after the LLM gave you the response you check it, analyse it, maybe correct it and give feedback what exactly works and what it should correct.

And as always at the end don´t forget to confirm which solution worked and thank the LLM nicely :wink:

1 Like
6

Very helpful to see the conversation, thanks much for sharing!

In addition to the principles you mentioned, it makes sense that giving it the output css/html source allows it to narrow down the problems.

1 Like