Styling Todoist

Update Oct 2018: Do NOT use Stylish. Instead use Stylus. 

I don't usually use task lists to manage work. I find them quite limited and instead use different tools for different needs, most commonly some kind of Kanban board is a better substitution. However, some tasks are just tasks... if they can have only 2 states: not done and done then they are not really suited to a Kanban board, which is more oriented towards flow. After using Kanban boards of various kinds for years, I've finally given in and admitted my secret use of OneNote's sheet for a list of private tasks is a quite outdated method. So, I started a short search for a task management software with the following criteria:

• Must work online and offline.
• Must have subtasks visible with main tasks and with unlimited levels. (not like Asana)
• Must be quick.
• The interface must be nice.
• After some searching and lots of tools I've returned to Todoist, an app that tries to embrace GTD methodology and satisfies all the requirements from above.

The app does look good, but is not perfect. For my tastes it's quite narrow and line items are incredibly high. What used to take just a little bit of screen space now takes a whole screen! I find this a lot with modern web apps: I always want them to be more compact. But, there is a way to change the actual styling without breaking anything. You may have heard of Stylish, a browser extension for Chrome and Firefox. I use it only with Chrome.

I've used it previously and styling a web app was a breeze. Styles are applied instantly on styles saving. You can check it out here.

You can check my custom CSS here. What it does is very simple: it makes the layout wider and list items shorter, and also adds a link to a nice background. There is not much actual code, but it hits the right places.

#all_holder {
  max-width: 1600px !important;
  margin: 0 80px !important;
  -webkit-box-shadow: 0 0 25px 2px #1C1C1C;
  box-shadow: 0 0 25px 2px #1C1C1C;
}
  
body {
    background-image: url("http://www.designbolts.com/wp-content/themes/dotmag/images/pattern12.png"); 
}
 
.items>li {
    font-family: "Verdana", "Open Sans","Helvetica", Arial, sans-serif;  
}
 
.task_item .task_content_item { 
    border-bottom: none !important;
}
 
.task_item td {
    padding-top: 5px  !important;
    padding-bottom: 0px  !important;
}
 
#editor .arrow {
    margin-top: 8px;
}
 
#editor .drag_and_drop_handler {
    padding-top: 0px !important;
}
 
#editor .task_item td.menu {
    padding-top: 5px !important;
}
 
span.text.sel_item_content>a {
    color: orangered;
}

In addition to the above, the style has a drop down menu so you can choose a theme to match your Todoist theme.

The downside is these things may become irrelevant when they change the style on their end. That's OK, it's very easy to turn off  and modify styles.

I've just started using this configuration. If you find any issues wile using it let me know.

If you're finding this article helpful, consider our asset Dialogical on the Unity Asset store for your game dialogues.