How do I make a TaskPaper StyleSheet?

TaskPaper
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;
}
21

It does! :sunglasses: Once again: thank you very much!

1 Like
22

Sorry, basic question. When I open theme.less in TextEdit, all I see is a line saying to see http://guide.taskpaper.com/creating_themes.html . What am I doing wrong?

23

Nothing, that’s what you should see. You can find the base theme here:

http://guide.taskpaper.com/base_theme.html

Then you can add rules to your own theme that add new styles or override existing styles defined in that base theme.

24

That worked, thanks! The mistake I was making is I had put in:

item[data-type=“note”] {
}

in order to clear the italic style, but I realized I need to put in:

item[data-type=“note”] {
font-style: none;
}

25

Jesse, may you please put the old documentation online, for us users of obsolete version?

Paolo

26

I think this should give you the latest 3.3 documentation:

https://guide.taskpaper.com/v/8f4e569b33dec831c3fa7bd15be33c9c784b4320/

27

If I use a monospaced font, the notes don’t line up with the items:

Any ideas how to fix this?

(This is the Light.less theme with the following line added: @font-family: 'SF Mono';)

28

There’s not a great solution, but please see the discussion here:

1 Like
29

I’m unable to get themes to work.
0) Quit TaskPaper

  1. On this page I’ve selected all the text in the code box.
  2. I’ve pasted that into a plain text file (Using TextEdit)
  3. Named this file “user.less”
  4. Placed this file in directory noel/library/Application Support/TaskPaper/user.less
  5. Re-Launch task paper.

The theme is never applied. Sorry if I’m missing something obvious.

I’m using the direct download purchased app.

Also FYI several links above are no longer found:
https://guide.taskpaper.com/base_theme.html
https://guide.taskpaper.com/theme_definitions.html

30

Sorry the information in this thread is outdated. Please see this new documentation:

https://guide.taskpaper.com/customizing-taskpaper/creating-stylesheets.html

Summary – mostly the same, but when TaskPaper got the ability to switch between stylesheets the stylesheet location changed.

31

Struggling with theming and finding the guide non too helpful.

I would like to make the note fields a light shade of grey. How do I achieve this? The background-color only styles the text background not the whole note section.

I need some easy visual to distinguish between a note and a task and project.

many thanks

32

Here’s a style that will make notes grey and make them use normal font instead of italic font:

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