My Checkvist custom CSS

15 December, 2010

For Firefox. Puts due dates on the left of the task instead of the right, makes it smaller and feint. Makes tags smaller and feint. Makes the custom CSS box larger.

li.task div.coreDiv span.dueDate {
float: left;
margin: 0 5px 0 0;
border-color: #CCC;
color: #AAA;
padding-top: 0.15em;
font-size: 70%
li.task div.coreDiv span.dueDate.overdue {
border-color: #6D1249;
color: white
li.task div.coreDiv span.tag {
font-size: 70%;
opacity: 0.5
#theme_custom_css {
width: 90%

If Checkvist implement my request to put tags into the task item class attribute then I’ll add more CSS to style tasks according to what they’re tagged with, and then probably hide those tags too. For example a task tagged as ‘important’ can be styled in red. I know you can just set task colours but it’s limited and you can’t run a search for coloured tasks whereas you can filter for tags.

UPDATED: I now have a Greasemonkey script that does what the above feature request would do – although not as well as it will if/when supported natively.

My CSS is now:

li.task div.coreDiv span.dueDate{float:left;margin:0 5px 0 0;border-color:#CCC;color: #AAA;padding-top:0.15em;font-size: 70%}
li.task div.coreDiv span.dueDate.overdue{border-color: #6D1249;color: white}
li.task div.coreDiv span.tag{font-size:70%;opacity:0.5}
.taggedUrgent {color:#b21414}
.taggedImportant {font-weight:bold}
.taggedWaiting {color:#6984d0}
.taggedWaiting span.node_text a,
.taggedWaiting span.node_text a:visited {color:#6984d0}
.taggedDelay {color:#ccc}
.taggedDelay span.node_text a,
.taggedDelay span.node_text a:visited {color:#ccc}
.normalTaggedDelay .taggedDelay,
.normalTaggedDelay .taggedDelay span.node_text a,
.normalTaggedDelay .taggedDelay span.node_text a:visited {color:#000}
li.task div.coreDiv.taggedDelay span.dueDate {border:none;float:none;background:none;color:#ccc}
.taggedDelay span.dueDate:before {content: "Don't start till ";}
.taggedUrgent span.tagClass_5,
.taggedImportant span.tagClass_8,
.taggedWaiting span.tagClass_1,
.taggedDelay span.tagClass_10 {display:none}
.oneTagInList.taggedUrgent span.tagClass_5,
.oneTagInList.taggedImportant span.tagClass_8,
.oneTagInList.taggedWaiting span.tagClass_1,
.oneTagInList.taggedDelay span.tagClass_10 {display:inline}

Most tags now get hidden and things tagged important show up in red, urgent bolded, important and urgent in bold red. Tasks I’ve marked as ‘delay’ now show the due date as “Don’t start till dd/mm” and a few other bits and pieces which make it easier to scan my task lists and identify things that need my attention as well as filter out things that I can pass over for now.

Sample modified Checkvist list.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: