Taskpaper 3 themes

Generally no … TaskPaper 3.5 adds some new theme settings, and renamed the display span stylesheet attribute to content. But generally should give same behavior.

I think maybe your stylesheet didn’t hardcode font size (best really) and you just need to View > Zoom In a few times? TaskPaper 3.5 changed it’s bundle identifier, and as a result preferences reset.

This is weird because zoom in or zoom out have no effect.
I overwrited Task Paper 3.5 on my old version. Maybe better to delete whole app and all the Preferences and clean install?

Can you post your stylesheet? Shouldn’t need to reinstall I think.

theme.txt (2.9 KB)

I think part of the issue is:

@font-family: Menlo Regular;

If I change to:

@font-family: Times;

Then I do see larger fonts when using your stylesheet. I need to dig further into this eventually (probably not today) because I wouldn’t have expected that change to make a difference, even if “Menlo Regular” wasn’t matching an existing font.

1 Like

There is also fragment in my code:
item[data-done] {
> run[display] {
text-strikethrough: NSUnderlineStyleDouble;
text-strikethrough-color: lighten(red,20%);
color: @wtopiony;
}
}

should I change display to content in this example?

Yes! I renamed display to content. It basically means the item “text” … minus leading syntax, trailing syntax, and trailing tags.

1 Like

Remove “Regular” (just Menlo) and it works - don’t know why …

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.

1 Like

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.

I’ve just updated:

https://guide.taskpaper.com/reference/stylesheets/

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.

1 Like

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.