After digging into the code I guess this is odd, but correct enough behavior. I think when you ask for “Melo Regular” it’s a bit to specific for the way that I create fonts from the stylesheet. In the end I’m using the API:
NSFontManager.shared().font(withFamily: fontFamily, traits: fontTraitMask, weight: fontWeight, size: fontSize)
In the docs it says that “fontFamily” should be generic name of the desired font. So I guess “Menlo Regular” is to specific.
Yeah, sounds odd. But thanks for pointing this out. This is worth upgrading the docs with example to avoid confusion what “generic name” means because for me it was always tricky especially when full name of the font has three words or more like e.g. Alegreya Sans SC Regular.
Update: I also noticed that if I hardcoded @base-font-size and @user-font-size to fixed values than Zoom In and Out not work, but probably this is expected behaviour.
Yes, that’s expected… or really just setting @user-font-size to a fixed value will break zoom in/zoom out.
Hi Jesse,
Having just updated to Taskpaper 3.5 – which is looking good and working well! – a couple of questions:
I used to see all handles, but now only see handles on mouseover. Is there a way to force them to appear if I want to?
Is it possible to change the colour of the task dash (-) based on a tag?
Thanks in advance for your continued support!
Mark
Good to hear!
In the default sty sheet I only have handle border color set when item has children, but if you just set it for all items then you’ll always see it. This should do it:
item {
handle-border-color: @handle-secondary-color;
}
This will color that leading dash orange, only for items tagged @done:
item[data-done] {
> run[link^="button"] {
color: orange;
}
}
Is there a way to set style attributes for an item based on the text string it contains (not a tag)?
An example … creating a project called “Urgent,” and having the project title display in red without impacting the styling of any other project title.
Thanks!
No.
There is a content run attribute that you could in theory target like this:
run[content*=Urgent] {
color: red;
}
But currently I don’t associate the actual content string with that attribute, it’s just an empty marker. So the above doesn’t work. I could change that, though might not be able to, not sure about performance implications.
But more generally I think you’d be better off using tags. Things like this are there intended purpose, they are integrated into the autocomplete, sidebar UI, and query language.
Is there are particular reason why you don’t want to use a tag?
Thanks. This definitely isn’t a big deal … I was just wondering about a quick way to make a couple of important project titles stand out visually in the larger list. But there are other ways I can make sure those projects catch my eye.
In this case, the only reason I would add a tag would be to trigger the style attribute, so it’s almost overkill, but I can do that if it later seems helpful.
Hi Jesse,
Thanks for this! I’m not sure why, but the code relating to the leading dash you gave me doesn’t seem to do anything. I’m including the .less here incase it helps. Any help very much appreciated!
Best,
Mark
// Base text
@font-family: SFNS Text;
@font-size: 11px;
@text-color: black;
@background-color: rgb(247, 247, 247);
@line-height-multiple: 1.1;
@done-color: hsl(78, 66%, 40%);
@link-color: #3974cb;
@waiting-color: #828ccb;
@due-color: orange;
@flag-color: red;
// UI
@tint-color: #ff4b4d;
@interface-color: @tint-color;
@selection-color: mix(@tint-color, @background-color, 30%); // rgb(148, 192, 255);
@invisibles-color: mix(@tint-color, @background-color, 70%); // rgb(67, 119, 211);
editor {
color: @text-color;
font-size: @font-size;
font-family: @font-family;
background-color: @background-color;
line-height-multiple: @line-height-multiple;
item-indent: 20px;
caret-width: 2px;
caret-color: @tint-color;
handle-color: @tint-color;
drop-indicator-color: @tint-color;
invisibles-color: @invisibles-color;
selection-background-color: @selection-color;
guide-line-color: mix(@tint-color, @background-color, 15%);
message-color: mix(@text-color, @background-color, 50%);
}
item[data-type="note"] {
font-style: italic;
}
item[data-type="task"] {
font-style: normal;
}
item[data-type="project"] {
font-size: 13px;
}
item[depth="1"].item[data-type="project"] {
}
run[link] {
cursor: pointer;
color: @link-color;
}
run[link^="button"] {
// color: mix(@tint-color, @background-color, 15%);
text-expansion: 1;
}
item[data-done] {
> run[link^="button"] {
color: orange;
}
}
run[link^="filter"] {
color: @text-color;
}
item[data-done] {
> run[display] {
text-decoration: none;
}
}
pre[cm-done] .cm-text {
text-decoration: none
}
run[tag] {
font-size: @font-size;
font-style: normal;
font-weight: normal;
color: mix(@text-color, @background-color, 50%);
}
item[data-done] {
color: @done-color;
handle-color: @done-color;
guide-line-color: @done-color;
handle-border-color: @done-color;
}
run[tag=data-done] {
color:@done-color;
}
item[data-today] {
color: orange;
}
run[tag=data-today] {
color: mix(@due-color, @done-color, 70%);
}
item[data-flag] {
color: @flag-color;
}
run[tag=data-flag] {
color: darken(@flag-color, 20%);
}
item[data-next] {
color: darken(@due-color, 20%);
}
run[tag=data-next] {
color: darken(@due-color, 20%);
}
item[data-waiting] {
color: @waiting-color;
}
run[tag=data-waiting] {
color:@waiting-color;
}
item[data-hold] {
color: @waiting-color;
}
run[tag=data-hold] {
color:@waiting-color;
}I’m not sure why, but it seems that this rule breaks things:
pre[cm-done] .cm-text {
text-decoration: none
}
Looks like a left over rule from FoldingText or some other app … TaskPaper doesn’t know about pre or cm-text. At the same time I would have expected that whole rule to just get ignored. I’ll look into that part of things, but for me just deleting it fixes the problem.
Also I noticed that you have:
item[data-done] {
> run[display] {
text-decoration: none;
}
}
To cancel out the @done strikethrough… except now it doesn’t work because TaskPaper 3.5 changed things so that you need to use content instead of display.
Jesse, thanks as ever, that has sorted everything out. Forgive me for tacking on one last request, but I have also been attempting to change the colour of the “guideline” in the case of a slew of tasks being done, by using guide-line-color within item[data-done]. No luck so far. Is this possible? Thanks once again for all your help.
Sorry that’s not possible, right now guide-line-color is only associated with the editor, so it applies to all items the same.
OK, good to know – I’m playing with a theme that uses colour in the “handles” rather than the leading dash, text or tags. But changing the guideline colour might be a bad idea from a logical/hierarchical point of view, anyway! Thanks for all your help with this.
Here is my BLACK background - GREEN text old fashion monochrome theme with some color tag.
I write lot of notes so that they are shaded not to hide task
@font-family: "Lucida Console";
@background-color: rgb(20, 20, 20);
@text-color: rgb(21, 220, 0);
run[link] {
color: rgb(0, 75 , 0);
text-decoration: none;
}
run[link^="button"] {
color: rgb(200, 10, 10);
text-expansion: 1;
text-decoration: none;
}
editor {
top-padding-percent: 25%;
bottom-padding-percent: 50%;
typewriter-scroll-percent: 50%;
color: @text-color ;
background-color: @background-color ;
font-family: @font-family ;
editor-wrap-to-column: 100;
item-wrap-to-column: 100;
}
item[data-type=project] {
text-decoration: underline;
color: rgb(0, 150, 0);
}
item[data-type=note] {
color: rgb(0, 100, 0);
}
item[data-type=task] {
color : rgb(100, 220, 0);
}
run[tag=data-due] {
color: rgb(255, 0, 0);
}
run[tag=data-today] {
color: rgb(255, 0, 0);
}
run[tag=data-waiting] {
color: rgb(204, 0, 204);
}
run[tag=data-delegate] {
color: rgb(255, 200, 255);
}
run[tag=data-meeting] {
color: rgb(255, 255, 150);
}
run[tag=data-delete] {
color: rgb(100, 100, 100);
text-decoration: line-through;
}
item[data-delete] {
color: rgb(100, 100, 100);
text-decoration: line-through;
}
run[tag=data-done] {
color: rgb(21, 100, 0);
text-decoration: line-through;
}
item[data-done] {
color: rgb(21, 100, 0);
text-decoration: line-through;
}Is the interface/window sidebar customizable in TP > 3.5 ? Can you give me an example ?
You can set the macOS “appearance” for the window and sidebar, but that’s the only styling possibility right now. So you can’t change font/size, just overall appearance. You change appearance like this:
window {
appearance: NSAppearanceNameVibrantDark;
}
sidebar {
appearance: NSAppearanceNameVibrantDark;
}
Thanks a lot, that’s do the job for a full black background app.
Hi Jesse,
Thanks for all your help with this so far! Two further theme-related queries from me today, if you can bear them.
Thanks as ever!
Mark
Yes, something like:
item[collapsed] {
handle-color: green;
}
No, TaskPaper’s underlying syntax is fixed and styling isn’t as flexible as FoldingText. There’s no ability to hide characters or add extra syntax parsing such as for CriticMarkup.