Any Toggl users here? I'm putting together an integration so the toggl (Chrome extension) button ( https://github.com/toggl/toggl-button ) is displayed for tasks on a Checkvist list. It's dead simple (a few lines of javascript), but I'm slightly torn on the best way to handle one aspect: whether or not toggl is shown for a particular list. It can't be always-on, as it adds too much clutter for non-projecty lists (who wants a timer button for the carrots on their grocery list?). What I have now is that if any task on a list is tagged #toggl, then all tasks on that list will have the toggl button. A few alternatives I canvassed were: - display toggl buttons only on subtasks of a task tagged with #toggl - display toggl buttons only on focused (hoisted) tasks - find some other way to indicate that all of a list's tasks should have the button, eg. something encoded in the list's name I think what I have now is the most convenient of these (I don't want to hav...
Hello Neil! Unfortunately there's no forum, and it seems a good idea to create a css snippet library of sorts. Will try to collect something like this over the weekend.
ReplyDeleteAs an example, Kirill is describing a nice trick with custom CSS here https://plus.google.com/+JohnWinstanley/posts/7JUPaYdGUMM (the first comment to the post).
Thanks for the reply. Very interesting about the tags
ReplyDeleteAdditionally, you can use custom CSS to:
ReplyDelete1. Set custom tag colors. Example:
.tagClass_19, a.tagClass_19 {
background-color: #D8DFE0;
color: #150069;
font-weight: bold;
}
2. Use FontAwesome icons. would display a clock if you add the following CSS:
.fa-clock{
padding:4px .5em 4px 0;
margin-left:1em;
background-color:#eee;
border-radius:4px;
color:#0980f4;
}
.fa-clock:before{
content:"\00a0\f017";
color:#0980f4;
}
.fa, .fa-clock {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
3. Create a custom quote style where all quotes have a line to the left and no extra space (which I find distracting and confusing with all the indenting already used in an outline):
.userContent blockquote, .userContent q {
margin: 0 1em 0 0;
padding: 0 0 0 1em;
border-left: 3px solid #eee;
font-style: normal;
display:block;
}
.userContent q:before, .userContent q:after{
content:"";
}
I also use it to increase the size of the expansion arrows, but the alignment on my arrows is a little off, so I won't share that code.
Hello, we've created a public list with some CSS snippets, here https://checkvist.com/checklists/486715
ReplyDelete