How do I make a TaskPaper StyleSheet?

TaskPaper
1

Please see Creating Themes in the User’s Guide:

2

I do not know what I am doing wrong, but I can’t modify the theme. I followed the instructions and clicked on the app, and then clicked on show package contents There I was presented with one folder, the “contents” folder and proceeded to click on it. The only place in here were I could find something related to “less” was in the “Resources” subdirectory so I opened that folder and then edited the default.user.less file. None of my changes took effect. Even after closing and opening TaskPapers repeatedly. In the link to the documentation provided above, it mentions a user.less file, but that file is nowhere to be found (I have the latest version install, 164). Am I missing something fundamental here?

3

It’s not in the TaskPaper.app folder… it’s in the folder that opens when you choose TaskPaper > File > Open Application Folder. I should maybe rename that to “Open Application Support Folder”… though that name is pretty long.

4

Thank you. It does make sense now :smile:

5

I was able to change the color of tags in “user.less”, but I do not see an easy way to make certain tags a different color, which I could do in TaskPaper 2. Any suggestions?

6

Here’s an example that colors “@now” tags green:

run[tag=data-now] {
  color: green;
}
2 Likes
7

Hi, how can I color the entire task line with a specific color for each tag? The example you gave changes the color only for the tag, but it’d be great (as in TaskPaper 2) if one could color the entire line

Thanks for continuing to develop TaskPaper, I use it everyday!

1 Like
8

Wait, I got it:

item[data-today] {
color: rgb(255, 0, 0);
}

(to make “@today” text red)

1 Like
9

Yes, this works! Thank you!

10

I must have missed something fundamental. Is modifying the user.less file the only way to replicate the “themes” function of TP2?

Is it not possible to have separate themes files and choose them? I’d hoped to bring a couple of my favored TP2 themes along with me to TP3.

Apologies if I’ve overlooked a previous explanation of this.

11

@MikeSeb Correct, right now TaskPaper 3 only supports a single theme file. Though it does live reload any changes that you make to it. So you could switch between themes (without having to reload TasskPaper) by just commenting in/out sections of that file.

You might want to wait just a bit longer, in the next release I’m changing how theme files are declared, so that user.less doesn’t need to repeat all the default rules. Generally that will make what you put in your user.less much shorter.

12

Can you supply a theme that makes TaskPaper 3 look like TaskPaper 2?

Or more generally, can you provide a number of examples for themes? I don’t want to have to figure out the names of all of your things. I just want to be able to change font size, color, line spacing, etc. Also, giving a list of things that can be addressed would be very helpful (i.e., tasks, projects, notes, etc.) Figuring how to make notes gray like in TaskPaper 2 is a major undertaking and it shouldn’t be… I’d be happy to see the docs, copy and example and change the color or size to what I want. But figuring out what things are called and the exact syntax for addressing them is way too much work.

Thanks.

13

Themes are never going to be particularly easy I expect. But I’ve documented theme pretty completely (in a geeky way) here:

I think the first link would probably be most useful for people who already know CSS. It’s the base theme definition. So it has examples of everything in the default theme.

For gray notes you’d want:

item[data-type="note"] {
  color: gray;
}

And for font, color, line spacing… see variables in the base theme. You can override a variable by just including it with a new value in your own theme. For example:

@font-family: Helvetica;

I hope that helps!

14

Ahhh, yes - this is what I was looking for (http://guide.taskpaper.com/base_theme.html).

However, I couldn’t find it because it wasn’t linked to in any of the other files. I now see it in TOC on the left, but it really ought to be linked from http://guide.taskpaper.com/theme_definitions.html.

Also, changing @base-font-size doesn’t change anything and that through me off. However, changing @user-font-size does…

15

Thanks, I’ve added a few more links.

Base font size is mostly an internal thing. @user-font-size / @base-font-size is used to calculate UI scale. Which is then used to compute things like the level indention width, etc. Maybe there’s a better way to do it, I think I got the term from how CSS has EM sizes.

16

Two question on themes:

  1. How can I get TP3 to use the OS X default system font SF UI Text? @font-family: “SF UI Text”; doesn’t work. Is there a special name/code for the UI system font?

  2. How can I add some spacing above project headings?

Thanks for any tips for this!

17

I’m actually not sure on this. Anyone else know? Behind the scenes I’m using [NSFont fontWithName:size:] to find the fonts if that helps.

It adds spacing to both top and bottom, but you can use:

item[data-type="project"] {
  line-height-multiple: 2.0;
}

Right now there’s no way to only add spacing above.

18

@font-family: .SF NS Text;

19

Thanks, @JonL – works fine for me!

@jessegrosjean, if I can’t add space (only) above a project heading, is there a way to get rid of the red “folding dot” on empty lines?

20

This should do it:

item[empty] {
  handle-color: none;
}