+ Add Question

Formatting task counter in left menu

On mobile, the number of completed tasks is fairly visible, much like an email inbox. But on the Windows desktop version, the formatting is different, and the number of tasks is somewhat greyed out and the font size very small. Of course, clicking on the various boxes will list the tasks, but the 'at a glance' functionality is rather compromised.

Is there any way to either increase the font size for the whole program, or to change the formatting for those individual elements, or better still, to change their colour, so as to control the contrast of the element to suit different people's tastes?

Love the app
Mark - Business user :-)

All responses

Clyde Romo  staff
Replied on Sep 01, 2014 - 11:33 UTC

Hi Mark,

It's good to hear that you like the app. :-)

Sadly, customizing the appearance app (font size or color) is not yet possible at the moment. We'll look into making this possible in the future.


Mark Phillips  premium
Replied on Sep 02, 2014 - 19:59 UTC

I did find a way to customise this using a chrome add on. Is it against the rules to post this here in the forum?

Brendon Wadey  staff
Replied on Sep 02, 2014 - 20:05 UTC


There is nothing wrong with posting that, I don't believe.


Mark Phillips  premium
Replied on Sep 02, 2014 - 21:00 UTC

Okay. That's cool.

The addon works on Chrome and Firefox browsers and it's called Stylish. You can search for styles at userstyles.org

What about posting modified CSS code with notes?

Brendon Wadey  staff
Replied on Sep 02, 2014 - 21:02 UTC


I am not sure what you mean? The notes within Todoist I am sure can support entering any kind of text, but it will not do anything like those scripts.


Mark Phillips  premium
Replied on Sep 02, 2014 - 21:07 UTC

Oh, perhaps the 'with notes' was confusing. I meant posting code here, where the code has notes about what modifies what, if people want to tinker themselves.

Brendon Wadey  staff
Replied on Sep 02, 2014 - 21:24 UTC


Thanks. This post is public so anyone can find it.


Mark Phillips  premium
Replied on Sep 02, 2014 - 21:25 UTC

On the manage styles screen for the plugin, click the button 'write your own style', and paste this css code below. The notes are to help you if you want to modify the colours to your own taste.

/*changing the left column colours requires changing the colour values in these lines below

#td_logo, .invisible_bg {background-color: #f4eac7 !important;}
.cmp_td_logo_mini {background-color:#f4eac7 !important;}
.left_menu {background: #f4eac7 !important;}

/*this keeps the background colour at the top of the left screen white
div #top_bar {background-color: #ffffff !important;}

/* This code made the task counter seen in the right menus much clearer. You can adjust the opacities, font sizes, font-weight, and colors to suit. I have put the text color lines (x2) at the top. The other colors below these are for the brackets. The code below that stops the brackets from appearing if there are no tasks in any categories.

.counter {color:#d93434 !important; opacity: 0.7 !important;font-weight: bold !important;font-size:95% !important;}
.counter_count {color:#d93434 !important;opacity: 0.7 !important;font-weight: bold !important; font-size:95%;}


.td_color div {border-radius: 12px; height: 10px;width: 10px;margin-top: -2px;margin-left: 6px;}
.td_color div img {display:none;}

/* this fixes some problems with the arrow and move handle positions and colour bleed when you change the background colour
.cmp_reorder_handler {background-position:0 -1196px;width:18px;height:20px !important;}

.arrow {position:absolute; margin-left:-14px !important;margin-top:1px !important; cursor:pointer;z-index:20;}

Mark Phillips  premium
Replied on Sep 02, 2014 - 21:33 UTC

I've attached a screenshot to show how the program looks for me now on Chrome.

Happy customer!


Mark Phillips  premium
Replied on Sep 02, 2014 - 21:39 UTC

I posted this here because almost all of the styles at userstyles.org are very old, look horrible, or don't seem to work very well with the modern Chrome browser.

My style changes just a few small things to improve contrast and make the number of outstanding tasks more visible at a glance.