Checkvist customization (CSS samples) / archived / read-only

 
  • Sometimes we need to customize a list for specific needs or preferences. You can do it with CSS (both screen and print versions) on your profile page. It is a PRO feature, so you might want to start a free trial.

  • Styling with tags

    • You can control the list item's styles with tags. When you add a tag to a list item, we add that tag's name to the class attribute. If you reference that class afterwards in your CSS, you can style the tagged item as you like.
    • Say, you have a tag called important and you want the tagged list item to stand out

      • ```css .tag_important .userContent { font-weight: 500; /* Bolder text */ }

        .tag_important .userContent:before { content: "\F06A"; /* An icon from the Font Awesome library / font-family: var(--fa-family);   font-weight: 500; color: darkorange; / Brighter color */ font-size: 14px; padding-right: 5px; }

        /* The following section is required to fix case when icon is used with numbered lists / .numberedList .tag_important .userContent:before { content: counters(section, ".") ". \F06A"; / Same icon code as in previous section */ } ```

    • How to add icons

      • Open the Font Awesome icon library
      • When you write CSS, don't forget
        • To precede the Unicode with *\*
        • To mention the font-family: font-family: var(--fa-family)
        • To set right padding for your icon, depending on its size
      • You can set color and size for your icons, just like you would do for text
        • I am not sure we'll be doing that
        • Mary Ann's contact details

    • Invisible tags

      • If you want to use tags only as triggers for the icons and hide them afterwards, use this code (the example hides the tag #invisible)
      • ```css .topLevel .tag.tag_invisible { display:none; /* Hides the tag #important, leaving only the styling */ }

    • CSS Sample for replacing tags with meaningful icons

      • Such css allow to have several icons for a single list item ```css /* Hide styled tags text */ .topLevel .tag.taganalysis, .topLevel .tag.tagtest, .topLevel .tag.tagdesign, .topLevel .tag.tagcode, .topLevel .tag.tagnotes, .topLevel .tag.tagwireframe, .topLevel .tag.tagquestion, .topLevel .tag.tagmockup, .topLevel .tag.tagresearch, .topLevel .tag.taganswer, .topLevel .tag.tagdone, .topLevel .tag.tagfuture { visibility:hidden; width: 5px; }

        .tag.tagnotes:before, .tag.tagquestion:before, .tag.taganswer:before, .tag.tagresearch:before, .tag.tagwireframe:before, .tag.tagmockup:before, .tag.tagfuture:before, .tag.tagdone:before { font-family: var(--fa-family);   font-weight: 300; font-size: 1em; visibility: visible; }

        .tag.tagnotes:before {content:"\f15c";} .tag.tagquestion:before {content:"\f059";} .tag.taganswer:before {content:"\f0eb";} .tag.tagresearch:before {content:"\f002";} .tag.tagwireframe:before {content:"\f044";} .tag.tagmockup:before {content:"\f1fc";} .tag.tagfuture:before {content:"\f04e";} .tag.tagdone:before {content:"\f00c";}

        ```

  • Font size

    • Same font size for all levels
      • With Markdown it's so easy to set headers mh bold and italic text (guess the shortcuts!), that the list items can be just of the same size.
      • Make the text smaller

        • ```css ul.topLevel li.task, ul.topLevel ul li.task { font-size: 14px; /* Makes all lines the same size / font-weight: normal; / and weight */ }

          div.nodeImage { top: 3px; /* Adjust the collapse/expand triangle */ } ```

      • Make the text larger

        • ```css ul.topLevel li.task, ul.topLevel ul li.task { font-size: 20px; /* If you want the font larger / font-weight: 300; / It's good to make it lighter as well*/ }

          ul ul div.nodeImage { top: 5px; /* Adjust the collapse/expand triangle position for sub-items*/ } ```

    • Reduce inter-line spacing
      • css .editable, .editableList { line-height: 1.1; min-height:auto;} div.coreDiv, .editable { padding-top: 1px; padding-bottom: 1px;} i.act, div.nodeImage {top: 0;}

  • Custom fonts

    • Import custom fonts, and customize any element on the page. For instance, for list items and list title - as in the example below

    • ```css @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

      .list-h1, .userContent { font-family: “Roboto Condensed”, sans-serif; }

    • Custom font for notes/comments

      • css .commentText.userContent { font-family: 'Roboto Condensed', sans-serif; }

  • Styling sub-levels

    • Automatically style x-level list items.
      • In the example below, all 2-nd level items will be red, all deeper levels - blue:

      • ```css ul ul li { color: red; }

        ul ul ul li { color: blue; }

    • Automatically style all list items, nested under a certain tag. In our example, all list items under the tag tagname will be red:
      • ```css .tag_tagname + ul li { color: red; }

  • Task completion styles

    • Completed tasks are marked with grey color and are stroked through. You might want to change that, to make the completed items stand out, to be more readable, or to have an icon.
    • Remove strike through
      • ```css span.task_closed { text-decoration: none; }
    • Icon
      • ```css span.task_closed:before { content: "\F00C"; /* Pick any icon from the https://fontawesome.com/v5.15/icons / font-family: var(--fa-family); font-size: 13px; / Smaller than the text / padding-right: 5px; color: #999; / Of a lighter color */ }
      • This is a closed task
    • Change the completed tasks color
      • ```css span.task_closed { color: #666; }
    • Keep priority colors for completed tasks
      • ```css .priorityColored span.task_closed { color: inherit; }

  • Different color for bold/strong items

    • css .userContent strong, .userContent b { color: #164174; }

  • Remove your avatar from notes

    • Every note nn comes with its author avatar picture. You can hide it, if you like with this code snippet
      • css .authorPic { display: none; } ul.comments div.coreNote { margin-left: 0; }

  • Remove envelope from items created by "send via email"

    • When an item is created using Add tasks via email feature, it is marked with an envelope. If you don't like it, you can remove this envelope with the following CSS:
      • ```css .userContent .fa-envelope { display: none; }

  • Remove vertical guide on the left

    • css .verticalGuide__selected, .verticalGuide { display:none; } ul.topLevel { padding-left: 0; }

  • Print style customisation

    • Print styles are also customisable
    • Print every top-level item on a separate page
      • ```css .topLevel > li { page-break-before: always; }
      • If you use list dividers (----) on the top level, you might want to avoid printing empty pages for them
      • ```css .topLevel > li.dividerClass { page-break-before: avoid; }

  • Zen mode backgrounds

  • If you want to share your customisation snippets or have a suggestion for new ones, ping us at kirsa@checkvist.com
Loading page ...

Print options

Expand or collapse list branches

Want checkboxes? Change the list style

List style:

Display or hide list attributes

x

Expand & collapse ec

Import im

Examples and details

Word count wc

Current selection
Words: #{js-wc-sel}
Characters with spaces: #{js-cc-space-sel}
Characters without spaces: #{js-cc-sel}
The whole list
Words: #{js-wc}
Characters with spaces: #{js-cc-space}
Characters without spaces: #{js-cc}

List view options oo

  • hc
  • hf
  • sd
  • List style
  • om

Any email, forwarded to this address, will appear in beginning of this list.

Send an email to yourself and add the sender to Contacts for future use.

  • The email subject becomes the list item's text.
  • The email body becomes the list item's note.
  • All attachments from the email are attached to the list item (PRO only).
  • In the subject, you can also add #tags, ^due dates, and @assignees with Checkvist's smart syntax.

You can also set up voice integration on mobile devices